Accessibility: WCAG 2.1 AA Compliance. (UXPROD-216)

[UXPROD-446] Accessible Focus Component Created: 01/Apr/18  Updated: 28/Apr/21  Resolved: 25/May/18

Status: Closed
Project: UX Product
Components: None
Affects versions: None
Fix versions: Q4 2018
Parent: Accessibility: WCAG 2.1 AA Compliance.

Type: New Feature Priority: P3
Reporter: Khalilah Gambrell Assignee: Filip Jakobsen
Resolution: Done Votes: 0
Labels: accessibility, ux
Remaining Estimate: Not Specified
Time Spent: Not Specified
Original estimate: Not Specified

Epic Link: Accessibility: WCAG 2.1 AA Compliance.
Development Team: Stripes Force
Rank: GBV (MVP Sum 2020): R2

 Description   

PR: https://github.com/folio-org/stripes-components/pull/253

Purpose
To achieve universal hover, focus and active styling for most clickable/focusable elements through a single helper component.

This allows developers to quickly add our uniform styles to any custom component.

It's implemented in all of our components (or at least it should be - might be missing some but I'll fix those later on if something should come up).

The ideas behind the design & UX
These changes are made in cooperation with @filipjakobsen. Here are his words on the design and UX.

The purpose of the AccessibleFocus design is three-fold:

The accessibleFocus style means that when people increase contrast or change system background color with Theming, in the future, we can make sure the focus-styling is still very visible.
The accessibleFocus style means we maintain the styling of focusable elements in one place, so we — with a few exceptions — can control the focus styling in one place and keep it consistent across the system
The accessibleFocus style also means that we can ensure a very visible focus styling across all browsers, avoiding doubt or ambiguity in how the styling will look in different browsers.
The styling is meant to fit the general styling of the system, while still being conspicuous enough that ambiguity of what's in focus is not a problem.

The dot provides, in addition to the styled box, a very clear and 100%-contrast interface element which can easily be recognised even on things that already stand out in some other way through their styling.



 Comments   
Comment by Khalilah Gambrell [ 25/May/18 ]

PR closed.

Generated at Fri Feb 09 00:08:06 UTC 2024 using Jira 1001.0.0-SNAPSHOT#100246-sha1:7a5c50119eb0633d306e14180817ddef5e80c75d.