microsoft-graph-toolkit icon indicating copy to clipboard operation
microsoft-graph-toolkit copied to clipboard

[Design] Tabindex accessibility visible highlighting for all components

Open vogtn opened this issue 4 years ago • 1 comments

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: mgt-task-2nd-tab

vogtn avatar Aug 20 '19 17:08 vogtn

keyboard_input_focus

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;

tramadon avatar Sep 22 '20 21:09 tramadon