Title: As a Design System Product Owner, I want to update focus indicators across all interactive components to meet accessibility standards, so that all users can navigate our digital products effectively.
Acceptance Criteria:
Color Contrast Compliance: The focus indicator must have a color that achieves at least a 3:1 contrast ratio against a “light” or “dark” background, meeting WCAG 2.1 AA guidelines.
Consistent Visual Treatment: The design of the focus indicator must be consistent types of interactive components (e.g. all “inputs” have the same treatment). The treatments can differ between interactive elements (e.g. we can have different treatments between buttons and inputs).
Backward Compatibility: Ensure that updates to the focus indicators do not break existing implementations of the design system across government digital products.
Design samples for all interactive components: For any components that receive focus, create an example. These examples will be reviewed in a later meeting with CPE.
Spark450
commented
7 hours ago
Title: As a Design System Product Owner, I want to update focus indicators across all interactive components to meet accessibility standards, so that all users can navigate our digital products effectively.
Acceptance Criteria:
Color Contrast Compliance: The focus indicator must have a color that achieves at least a 3:1 contrast ratio against a “light” or “dark” background, meeting WCAG 2.1 AA guidelines.
Consistent Visual Treatment: The design of the focus indicator must be consistent types of interactive components (e.g. all “inputs” have the same treatment). The treatments can differ between interactive elements (e.g. we can have different treatments between buttons and inputs).
Backward Compatibility: Ensure that updates to the focus indicators do not break existing implementations of the design system across government digital products.
Design samples for all interactive components: For any components that receive focus, create an example. These examples will be reviewed in a later meeting with CPE.
Prior work:
https://www.figma.com/file/J2hziM5PO8PDqUHVQONUG8/Style---Colour?type=design&node-id=1228%3A592&mode=design&t=0dtU4BUYLx2PZsMu-1