[epic][docs] Enhanced Accessibility Information on Component Pages

[bennypowers]

This is a meta-issue to track updating a11y-related info on component pages. This was instigated by a discussion about the behaviour of search bars in <pfe-nav> that came up in our internal chats. The aim of this issue is to 'catch-up'documentation of existing components.

This issue may be expanded in the future to include non-a11y-related things like live demos / code playgrounds

This issue tries to distinguish between navigation in a "web page" context and navigation in a "web app" context. We may determine that this is out of scope for the time being.

This list is a work-in-progress

Accordion

• [x] Keyboard behaviour
• [ ] Live Demo
• [ ] WCAG & MDN links

Alert

• [x] Keyboard behaviour
• [ ] Live Demo

Notes: should clarify whether toasts trap focus

Announcement

• [ ] Keyboard behaviour
• [ ] Live Demo
• [ ] WCAG & MDN links

Notes: should clarify whether announcements precede 'skip to content' in taborder

Audio Player

• [x] Keyboard behaviour
• [x] Focus behaviour
• [ ] Live Demo
• [ ] WCAG & MDN links

Avatar

• [x] Keyboard behaviour (n/a)
• [ ] Contrast, alt text or presentation role
• [ ] Live Demo
• [ ] WCAG & MDN links if applicable

Button

• [x] Keyboard behaviour
• [ ] Interaction states specification
• [ ] Live Demo
• [ ] WCAG & MDN links

Notes: we should elaborate on action vs. navigation in SPA context, Perhaps combine "Action vs navigation" and "Button vs call to action" sections of prose, and elaborate on cases like tabbed UI in SPA contexts

Call to Action

• [x] Interaction states specification
• [x] Keyboard behaviour
• [ ] Live Demo
• [ ] WCAG & MDN links

Card

Disclosure

Filter

Form

Jump links

Link

Link with icon

Notes: should this be collapsed into the Link page?

Modal

Navigation

• [x] Keyboard behaviour
• [ ] Clarify: does expanding a hidden control auto focus the control?
• [ ] WCAG & MDN links

Progress steps

Promo

Quote

Search bar

Skip navigation

Sticky banner

Sticky card

Tabs

Tooltip

Video thumbnail

[markcaron]

@bennypowers @methomps are you opposed to making this an [epic]?

[bennypowers]

@markcaron sounds good https://github.com/RedHat-UX/red-hat-design-system/milestone/1