Refer to the [parent epic description](https://gitlab.com/groups/gitlab-org/-/epics/5387) 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](https://gitlab.com/groups/gitlab-org/-/epics/5387#initial-methods-and-tools). 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](https://gitlab-org.gitlab.io/gitlab-ui/?path=/story/base-token--default) * 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](https://gitlab.com/groups/gitlab-org/-/epics/5387#audit-criteria). 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.** * [x] All actions and functionality can be done with a [keyboard](https://design.gitlab.com/accessibility-audits/2-keyboard-only). * [x] Links, buttons, and controls have a visible [focus state](https://design.gitlab.com/accessibility-audits/2-keyboard-only#focus-states). * [x] 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. * [x] 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. * [x] Color combinations have [sufficient contrast](https://design.gitlab.com/product-foundations/colors#accessibility). ## Results | **Problem** | **Solution** | **Related Issue/MR** | | ----------- | ------------ | -------------- | | The × button has `aria-label="Close"`, which doesn't accurately represent the remove action.<br> | Change to something more clear, for example `aria-label="Remove token"`. | https://gitlab.com/gitlab-org/gitlab-ui/-/issues/1826 | | Avatar `alt="avatar"` which is vague and unnecessary since the user name is included in the proceeding text.<br> | Use a null value, for example `alt=""` which will indicate the avatar is "decorational" and not meaningful content. | https://gitlab.com/gitlab-org/gitlab-ui/-/issues/1827 | | Editing a token can only be done by mouse because the token uses a `<span>` instead of a `<button>`.<br> | 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. | https://gitlab.com/gitlab-org/gitlab-ui/-/issues/1828 | | While using VoiceOver, trying to activate a "clickable" token activates whatever item has focus since the token isn't a focusable element.<br> | Item shouldn't indicate that it's clickable unless it can be activated. | https://gitlab.com/gitlab-org/gitlab-ui/-/issues/1828 | | The `!=` (not equals) token operator is announced as "equals" because the exclamation point is not a character that gets announced by some screen readers.<br><br> | 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>`. | https://gitlab.com/gitlab-org/gitlab-ui/-/issues/1829 | | Inadequate contrast for several states.<br><br><br><br><br> | Ensure all × button states have sufficient contrast, including when tokens are assigned a color. | https://gitlab.com/gitlab-org/gitlab-ui/-/issues/1436 | | 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.<br> | The × button should be activated with the default enter and space keys that activate buttons by default. | https://gitlab.com/gitlab-org/gitlab-ui/-/issues/1830 | ## Completing the audit After the solutions have been explored and applied, review the [completing the audit section in the parent epic](https://gitlab.com/groups/gitlab-org/-/epics/5387#completing-the-audit). Complete all items prior to closing this issue. gitlab-ui~2677490 ~"Category:FE/UX Foundations" ~"component:token"