In the Firefox accessibility report, the <span> that is the root element of the Icon component has the following error:
Clickable elements must be focusable and should have interactive semantics
This seems to occur because we have a @click handler on the span, in case parent components want to know when an icon is clicked. However, the accessibility checker thinks that this element is clickable, and should therefore be focusable. Since most use cases for clickable icons actually should be icon-only buttons, we should remove the click handler event from icons to resolve this issue.
This would be a breaking change. (Update: it's not) There are at least 2 uses of the click event in the wild now:
Both of these instances should be updated to use an icon-only button instead of a clickable icon. Perhaps they should be updated (the Wikilove example to use the CdxDialog component, which comes with a close button, and the WikiLambda example to use a quiet icon-only button), but they still work even when the CdxIcon's click event is removed.
Acceptance Criteria
-
Migrate existing uses of the click handlers in icons.Not needed - Ensure this doesn't break anything. Confirmed that the CdxTextInput clearable button and the 2 production examples work when the CdxIcon click even is removed
- Remove the click handler from icons and communicate the change.