[Card with pictogram does not open correct right-click menu] #10960
Assignees
Labels
dev
Needs some dev work
Feature request
A new adopter requested feature
owner: Innovation Team
used when the engineering work will be done by Hybrid Cloud with DDS engineers as consultants
package: web components
Work necessary for the IBM.com Library web components package
Comments
10 tasks
kennylam
added
package: web components
andy-blum
added
the
owner: Innovation Team
kodiakhq bot
pushed a commit
that referenced
this issue
Dec 18, 2023
### Related Ticket(s) Closes #10960 [Jira ticket](https://jsw.ibm.com/browse/ADCMS-4074) ### Description Alternate approach to fixing #10960. Previously we had attempted a resolution that wrapped the whole card in `<a></a>`. That solution introduced regressions with accessibiltiy. It's also come to my attention that the approach is a well [known poor approach](https://css-tricks.com/block-links-are-a-pain-and-maybe-just-a-bad-idea/). This solution takes the same approach as the Default Card component, which is to wrap the footer icon in a `<a></a>` and then absolute position a pseudo element child to make the whole card clickable still. More on [the pseudo-element method](https://css-tricks.com/block-links-the-search-for-a-perfect-solution/#aa-method-3-the-good-ol-before-pseudo-element). ### Changelog **Changed** - Wrap the footer icon in a link for the card pictogram in the same way as the default card - Adjustment to Storybook for Card so that the body copy is used on page load **Removed** - Remove the `role="button"` wrapper for pictogram card
sangeethababu9223
pushed a commit
to sangeethababu9223/carbon-for-ibm-dotcom
that referenced
this issue
Dec 19, 2023
…ign-system#11225) Closes carbon-design-system#10960 [Jira ticket](https://jsw.ibm.com/browse/ADCMS-4074) Alternate approach to fixing carbon-design-system#10960. Previously we had attempted a resolution that wrapped the whole card in `<a></a>`. That solution introduced regressions with accessibiltiy. It's also come to my attention that the approach is a well [known poor approach](https://css-tricks.com/block-links-are-a-pain-and-maybe-just-a-bad-idea/). This solution takes the same approach as the Default Card component, which is to wrap the footer icon in a `<a></a>` and then absolute position a pseudo element child to make the whole card clickable still. More on [the pseudo-element method](https://css-tricks.com/block-links-the-search-for-a-perfect-solution/#aa-method-3-the-good-ol-before-pseudo-element). **Changed** - Wrap the footer icon in a link for the card pictogram in the same way as the default card - Adjustment to Storybook for Card so that the body copy is used on page load **Removed** - Remove the `role="button"` wrapper for pictogram card
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
JIRA
Description
When you right-click on a "Card with pictogram", it opens the menu you would get for clicking on a blank part of the screen rather than the one you get when you right click on a link. As a result, users can't easily copy the link, open it in a new tab, etc.
Component(s) impacted
Card with pictogram
Browser
No response
Carbon for IBM.com version
v1.36.0
Severity
Severity 3 = The problem is visible or noticeable to users but does not impede the usability or functionality. Affects minor functionality, has a workaround.
Application/website
https://www.ibm.com/community/qradar/
Package
@carbon/ibmdotcom-web-components
CodeSandbox example
https://githubbox.com/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components/examples/codesandbox/components/card
Steps to reproduce the issue (if applicable)
Right click on the card.
Release date (if applicable)
No response
Code of Conduct
The text was updated successfully, but these errors were encountered: