Tag: when a Tag is actionable(has an onClick), the pointer icon does not change

Title line template: Tag: when a Tag is actionable(has an onClick), change the pointer icon

What package(s) are you using?

• carbon-components
• carbon-components-react

Detailed description

When a Tag has a filter property, the mouse icon will change when hovering over the Tag. <Tag type="red" title="Clear Filter" filter> Red </Tag> If a Tag does not have the filter property but does have an actionable property(onClick), the mouse will NOT change when hovering over the Tag. <Tag type="red" title="Clear Filter" onClick={()=>alert("red")}> Red </Tag>

I expected the mouse icon to change when actionable in the same way as when filter property is set.

This happens in any browser. This happens in any version of the Carbon Design System.

Steps to reproduce the issue

1. Create a tag like <Tag type="red" title="Clear Filter" filter> Red </Tag>
2. Create a tag like <Tag type="red" title="Clear Filter" onClick={()=>alert("red")}> Red </Tag>
3. Hover over each and observe the icon changing(or not).

Use case

The product has a search input. The product has three suggestions for searching “Platform”, “Runtimes”, and “Services”. It shows these as clickable tags for quick filtering. This is on the Carbon Design System Tag page just above the Live Demo. https://www.carbondesignsystem.com/components/tag/usage#live-demo

Work arounds

The child of Tag is a node, so it could be coded as an input. Styling could be applied, to account for the hover. Always create a filter tag - and apply display: none; to the filter button when not a filter tag. All of these are client work and they come with their own problems.

[emyarod]

I’m not sure if double click interactions are part of the design system (cc @aagonzales) but the workaround here of course is to manually add the interactive class. on a general note, we typically do not modify styles based on JS event handlers outside of ones that coincide with the hover, focus, etc. CSS pseudoclasses, and I think it would be unreasonable to include the entire list of JS events here to get the cursor: pointer style rule

on a side note, I am not certain if double click interactions are fully supported by screen readers

[DragosRistici]

Double-clicking typically selects a paragraph or line of text and HTML content. You can “double-click” icons of apps to open them, even on web, which is a behavior imported from the desktop apps. Also you could “double-click” to perform cell-based interactions of web tables, but here usually you have 2 actions back-to-back: selecting the cell with the first click and entering edit mode with the second, or selecting the app icon with the first and opening it with the second (On the accessibility part, its Tab for selection and Enter/Return for the action).

I didn’t find any submitting actions through buttons that use a hover and also a double-click event on the web. I’m sure there are, but I don’t believe that’s the norm. Clicking usually means a change in the webpage, either through hyperlinks or submit buttons. Hovering is used to show the responsiveness to the clicking of different elements on the screen: hyperlinks, drop-down menus, buttons, etc.

I think it would be tricky from a user experience point of view to try to override the double click behavior of the browser.

So for clickable tags, if they have the hover/focus/active/etc usual button states, the double-click should be treated just like the regular button treats it. Double-clicking a tag feels like should be a visual feature for a CMS admin in the add/edit/delete tag nomenclator functionality that opens the tagName edit feature.