Tests keyboard navigation, focus management, ARIA attributes, and screen reader compatibility for the side panel tab handle.
Use Tab to navigate through the interactive elements below. The side panel tab handle should appear in the tab order after the last element on this page (or at its natural DOM position).
Below are focusable buttons. After tabbing past these, focus should reach the side panel tab handle.
Expected keyboard behaviors for the side panel:
| Key | Context | Expected Behavior |
|---|---|---|
| Tab | Page navigation | Tab handle receives focus in natural DOM order |
| Enter | Tab handle focused | Toggles panel open/closed |
| Space | Tab handle focused | Toggles panel open/closed (same as Enter) |
| Escape | Panel open | Collapses panel, returns focus to tab handle |
The tab handle element should have these ARIA attributes:
| Attribute | Value (collapsed) | Value (expanded) |
|---|---|---|
role |
button |
button |
aria-expanded |
false |
true |
aria-label |
Open chat panel |
Close chat panel |
tabindex |
0 |
0 |
Enable VoiceOver (macOS) or NVDA/JAWS (Windows) and verify:
1. Tab handle announcement: When focus lands on the tab handle, the screen reader should announce "Open chat panel, button" (when collapsed) or "Close chat panel, button, expanded" (when open).
2. State change: When the panel opens or closes via keyboard, the screen reader should announce the state change due to aria-expanded updating.
3. Focus return: After pressing Escape, focus should return to the tab handle and the screen reader should confirm the focus position.
This section provides vertical height for scroll testing. The tab handle should remain reachable via keyboard at any scroll position since it uses position: fixed.
↓ Keep scrolling ↓
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Donec velit neque, auctor sit amet aliquam vel.
Pellentesque in ipsum id orci porta dapibus. Curabitur non nulla sit amet nisl tempus convallis quis ac lectus. Nulla porttitor accumsan tincidunt. Proin eget tortor risus. Cras ultricies ligula sed magna dictum porta.
Mauris blandit aliquet elit, eget tincidunt nibh pulvinar a. Cras ultricies ligula sed magna dictum porta. Vivamus magna justo, lacinia eget consectetur sed, convallis at tellus. Donec sollicitudin molestie malesuada.
Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet.