Keyboard interactions

Key
Interaction
Tab
Moves focus to next item.
Shift + Tab
Moves focus to previous item.
Enter or Space
Selects item, expands and collapses item with children.

Cursor guidelines

Cursor
Usage
Pointer
Use the pointer cursor for all interactive components in every state.
Grab hand
Use the grab hand cursor when hovering over a side navigation item that can be moved.
Grab fist
Use the grabbing hand cursor while dragging a side nav item.

WCAG 2.2 compliance

Any criterion not mention in the below table are not applicable to this component or are resolved with underlying requirements, engineering, and styles of the entire system.

1 . Perceivable

Requirement
Criterion
Level
Compliance
Non-text content
1.1.1
A
Non‑text elements—such as icons used in side navigations—must provide a text alternative that communicates the control’s purpose. All controls, especially icon‑only controls, need an accessible name (for example, via a title, aria‑label, or associated text) so screen readers can announce their function.
Info and relationships, Identify purpose
1.3.1, 1.3.6
A, AAA
Side navigation must be understandable to assistive technologies, such as screen readers. Use proper semantic HTML or the appropriate ARIA roles to ensure accessibility.
Text contrast minimums
1.4.3
AA
Large text has a contrast ratio of at least 3:1, and small text has a contrast ratio of at least 4.5:1. Incidental text such as disabled, hidden, or decorative text has no contrast requirement.
Visual presentation
1.4.8
AAA
The width of text blocks is no more than 80 characters (40 for CJK languages), and text is never justified.
Non-text contrast
1.4.11
AA
The visual presentation of icons and various states have a contrast ratio of at least 3:1.
Text spacing
1.4.12
AA
Line height of text is at least 1.5x the font size.

2 . Operable

Requirement
Criterion
Level
Compliance
Keyboard
2.1.1, 2.1.3
A, AAA
All functionality of the component is operable through a keyboard without specific timing for keystrokes.
Keyboard traps
2.1.2
A
Focus can be moved away from the component using only a keyboard.
Seizures and physical reactions
2.3.1, 2.3.2, 2.3.3
A, AAA, AAA
There is no flashing content or unnecessary motion or animation in this component.
Focus order
2.4.3
A
Navigation sequences receive focus in an order that preserves meaning and operability.
Focus visible
2.4.7
AA
Keyboard states use an indicator that is visible with at least 3:1 contrast.