Token > Accessibility Audit

Refer to the parent epic description for more information on this effort.

Purpose

Audit the accessibility of the GitLab UI Token component in all variants and states in order to identify any problems and provide more documentation on the component’s page in Pajamas.

Component description

A token represents a keyword used to add or filter objects.

Initial Methods and Tools

Review the initial testing methods in the parent epic. List the testing methods used for your audit below, including any additional testing methods needed for this component that is not listed in the parent epic.

• Review the Token examples in GitLab UI
• Review live token examples in GitLab
• Visual review for contrast and states
• Keyboard only
• Screen reader: VoiceOver + Safari on macOS
• Screen reader: NVDA + Chrome on Windows
• axe DevTools extension in browser

Audit Criteria

Review the general audit criteria in the parent epic. Add applicable criteria to this section, including any additional criteria needed for this component that is not listed in the parent epic. A check indicates that the audit has been performed, not that it passes.

• All actions and functionality can be done with a keyboard.
• Links, buttons, and controls have a visible focus state.
• All content is presented in text or with a text equivalent. For example, alt text for SVG, or aria-label for icons that have meaning or perform actions.
• Changes in a component’s state are announced by a screen reader. For example, changing aria-expanded="false" to aria-expanded="true" when an accordion is expanded.
• Color combinations have sufficient contrast.

Results

Problem	Solution	Related Issue/MR
The × button has aria-label="Close", which doesn't accurately represent the remove action. VoiceOver announcing button	Change to something more clear, for example aria-label="Remove token".	TBD
Avatar alt="avatar" which is vague and unnecessary since the user name is included in the proceeding text. VoiceOver announcing avatar	Use a null value, for example alt="" which will indicate the avatar is "decorational" and not meaningful content.	TBD
Editing a token can only be done by mouse because the token uses a <span> instead of a <button>. Focus skips clickable elements	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.	TBD
While using VoiceOver, trying to activate a "clickable" token activates whatever item has focus since the token isn't a focusable element. Token announced as "clickable" can't be activated	Item shouldn't indicate that it's clickable unless it can be activated.	TBD
The != (not equals) token operator is announced as "equals" because the exclamation point is not a character that gets announced by some screen readers. NVDA announces != as "equals" VoiceOver announces != as "equals"	Consider including screen reader only text for explicit meaning. For example, <span class="gl-token-content"><span class="gl-sr-only">not equals</span><span aria-hidden="true">!=</span></span>.	TBD
Inadequate contrast for several states.	Ensure all × button states have sufficient contrast, including when tokens are assigned a color.	TBD
The × button can't be activated via keyboard. It can be closed when using NVDA, or when using the SO keys in VoiceOver, but not with the enter or escape keys as expected. Trying to activate × button	The × button should be activated with the default enter and space keys that activate buttons by default.	TBD

Completing the audit

After the solutions have been explored and applied, review the completing the audit section in the parent epic. Complete all items prior to closing this issue.

accessibility ~"Category:FE/UX Foundations" ~"component:token"