Popover > Accessibility Audit
Refer to the parent epic description for more information on this effort.
Purpose
Audit the accessibility of the GitLab UI Popover component in all variants and states in order to update documentation on the component’s page in Pajamas.
Component description
Popovers are used to provide supplemental, useful, unique information about an element, including one or multiple actionable elements. They inform the user of additional information within the context of their original view, but without forcing the user to act upon it like a modal.
A popover is not a tooltip, and although they share some similarities, in general a popover has more formatting, structure, and interaction that make it more like a disclosure widget than a tooltip.
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.
Note: The current popover is built using the Bootstrap Vue Popover which behaves more like a tooltip. This means that out of the gate the current implementation doesn't align with expected behavior.
- Evaluate all of the popover variants and options in GitLab UI.
- Visual review for contrast and states.
- Semantic and functional review and evaluating against applicable WCAG 2.1 Level AA success criteria.
- 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. -
A popover with interactive content should not be triggered by anything other than a click. -
Popover content shouldn't be announced or used to describe the trigger element. When content announced from aria-describedby
is announced by a screen reader it is as a single string with no regard for semantics or structure. -
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. -
Color combinations have sufficient contrast.
Resources
- https://codepen.io/jasonday/full/MWWaGYz
- https://codyhouse.co/ds/components/info/popover
- https://inclusive-components.design/tooltips-toggletips/
- https://codyhouse.co/ds/components/info/popover (This pattern that uses a dialog would be accurate if in the example the popover content required interaction instead of just static text, see https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-haspopup for details on why.)
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:popover