ARIA Label Accessibility Violation in VersionPicker Component

[huangkevin-apr]

Code of Conduct

• I have read and agree to the GitHub Docs project's Code of Conduct

What article on docs.github.com is affected?

Description

IBM Equal Access Accessibility Checker detected an accessibility violation on the GitHub Docs homepage: Accessible name does not match or contain element label.

An element has a visible label, but its accessible name (used by screen readers) does not match or contain it. This causes a mismatch between what sighted users see and what assistive technology users hear.

Why is this important?
Speech-input users navigate to an input field by speaking the visible field label (i.e., text displayed on the screen). Their verbal command activates the interactive component programmatic accessible name and sets focus to the component. A point of failure occurs when the visible label and the accessible name are different, or the visible label text string is not contained within the accessible name value.

What changes are you suggesting?

The accessibility bug report indicates a violation of WCAG 2.5.3 Label in Name. The visible label of the button is "Version: Free, Pro, & Team", but its accessible name (defined by aria-label) is "Select GitHub product version: current version is free-pro-team@latest". For speech input users and screen reader users, the accessible name must contain the visible label text.

To fix this, the aria-label attribute needs to be updated to include the visible text "Version: Free, Pro, & Team".

Looking at the provided code:

1. In src/tools/components/Picker.tsx, the ActionMenu.Button receives its aria-label from the ariaLabel prop. The visible text is composed of pickerLabel and selectedOption?.text || defaultText.
2. In src/versions/components/VersionPicker.tsx, the Picker component is used, and its ariaLabel prop is set to Select GitHub product version: current version is ${currentVersion}. The pickerLabel prop is set to xs ? Version\n:Version: `` and the defaultText prop is `t('version_picker_default_text')`. The `selectedOption?.text` would correspond to `allVersions[currentVersion].versionTitle`.

Therefore, the full visible label text is constructed by concatenating the pickerLabel and the currently selected version's title (or the default text if no version is selected). This constructed visible label needs to be prepended to the existing ariaLabel value.

The visible label can be constructed as:
const visibleLabelText = ${xs ? 'Version\n' : 'Version: '}${allVersions[currentVersion]?.versionTitle || t('version_picker_default_text')}`

Then, the ariaLabel prop should be updated to:
`${visibleLabelText}, Select GitHub product version: current version is ${currentVersion}`

This ensures that the accessible name starts with the visible label text, followed by the additional descriptive information, satisfying WCAG 2.5.3.

### src/versions/components/VersionPicker.tsx
<<<<<<< SEARCH
        descriptionFontSize={xs ? 6 : 5}
        ariaLabel={`Select GitHub product version: current version is ${currentVersion}`}
        renderItem={(item) => {
          return (
            <div data-testid="version-picker-item" className={styles.itemsWidth}>
=======
        descriptionFontSize={xs ? 6 : 5}
        ariaLabel={`${xs ? 'Version\n' : 'Version: '}${
          allVersions[currentVersion]?.versionTitle || t('version_picker_default_text')
        }, Select GitHub product version: current version is ${currentVersion}`}
        renderItem={(item) => {
          return (
            <div data-testid="version-picker-item" className={styles.itemsWidth}>
>>>>>>> REPLACE

Additional information

N/A

[welcome]

Thanks for opening this issue. A GitHub docs team member should be by to give feedback soon. In the meantime, please check out the contributing guidelines.