Page MenuHomePhabricator

Icon: Remove click handler event
Closed, ResolvedPublic3 Estimated Story Points

Description

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:

  1. WikiLove dialog close button
  2. WikiLambda tester table message button

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.

Event Timeline

Restricted Application added a subscriber: Aklapper. · View Herald Transcript
CCiufo-WMF renamed this task from Icon: accessibility warning on wrapper span to [Spike] Icon: accessibility warning on wrapper span.Jun 20 2023, 7:35 PM
CCiufo-WMF added a project: Codex 1.0.
CCiufo-WMF moved this task from Backlog to Accessibility on the Codex 1.0 board.
CCiufo-WMF set the point value for this task to 1.
CCiufo-WMF renamed this task from [Spike] Icon: accessibility warning on wrapper span to Icon: Remove click handler event.Jul 5 2023, 5:06 PM
CCiufo-WMF triaged this task as Medium priority.
CCiufo-WMF updated the task description. (Show Details)
CCiufo-WMF changed the point value for this task from 1 to 3.
CCiufo-WMF raised the priority of this task from Medium to High.Jul 24 2023, 4:07 PM
CCiufo-WMF moved this task from Needs Refinement to Up Next on the Design-System-Team board.

Change 942464 had a related patch set uploaded (by Anne Tomasevich; author: Anne Tomasevich):

[design/codex@main] Icon: Remove click handler

https://gerrit.wikimedia.org/r/942464

Change 942464 merged by jenkins-bot:

[design/codex@main] Icon: Remove click handler

https://gerrit.wikimedia.org/r/942464

Change 944353 had a related patch set uploaded (by Catrope; author: Catrope):

[mediawiki/core@master] Update Codex from v0.15.0 to v0.16.1

https://gerrit.wikimedia.org/r/944353

Change 944353 merged by jenkins-bot:

[mediawiki/core@master] Update Codex from v0.15.0 to v0.16.1

https://gerrit.wikimedia.org/r/944353