File Uploader > Accessibility Audit
Refer to the parent epic description for more information on this effort.
Purpose
Audit the accessibility of the GitLab UI File Uploader component in all variants and states in order to update the Pajamas component and provide more documentation on the component’s page in Pajamas.
Component description
A file uploader is used to upload files from a computer or device to the application.
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.
- Evaluate all of the file uploader variants and options in
GitLab UI. Component doesn't exist yet. - Visual review for contrast and states.
- Semantic and functional review.
- Screen reader: VoiceOver + Safari on macOS
- Screen reader: NVDA + Chrome on Windows
- axe DevTools extension in browser) variants and configurations in GitLab UI.
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"
toaria-expanded="true"
when an accordion is expanded. -
Color combinations have sufficient contrast. -
Review component specific accessibility guidelines for how attributes and component should behave.
Results
Problem | Solution | Related MR |
---|---|---|
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:file-uploader"