microsoft-graph-toolkit
microsoft-graph-toolkit copied to clipboard
[Design] Tabindex accessibility visible highlighting for all components
Proposal: Design states for VISIBLE accessibility highlighting, when the user utilizes "tab" key controls for component navigation.
Description
The user should be able to access and navigate through all toolkit components using accessible key controls, there must be a visual indication of the users location.
Rationale
Per requirement of https://accessibilityinsights.io/
**When interacting with a website or web app using a keyboard, users need to know which component currently has the input focus. By default, web browsers indicate focus visually, but custom programming, styles, style sheets, and scripting can disrupt it.
When navigating sequentially through a user interface, keyboard users need to encounter information in an order that preserves its meaning and allows them to perform all supported functions.**
Preferred Solution
Generate figma states for the component and all interactive portions of components in the graph toolkit.
Additional Context
Example for the mgt-tasks component:
![keyboard_input_focus](https://user-images.githubusercontent.com/46977768/93940152-d551c080-fce0-11ea-9012-2536d9c026e2.png)
Main (cards, containers etc.) opacity: 0.5; border: 6px solid #296EEA; border-radius: 6px;
Secondary #1 (small icons) border: 2px solid #666666;
Secondary #2 (links) border: 2px dashed #0078D4;