Token > Use button instead of span
Problem
Editing a token can only be done by mouse because the token uses a <span>
instead of a <button>
.
CleanShot_2022-06-01_at_10.35.16
While using VoiceOver, trying to activate a "clickable" token activates whatever item has focus since the token isn't a focusable element (possibly occurring in other screen readers too).
CleanShot_2022-06-01_at_11.53.54
Solution
- An editable token should be a
<button>
that triggers a dropdown. This means it would also need to be separate from the × remove button when present. - Item shouldn't indicate that it's clickable unless it can be activated.
Edited by Jeremy Elder