[Discussion/proposal] Places to address focus management

[rianrietveld]

• I've confirmed that this document is not already in the Docs Project

Discussion
Info about focus management (keyboard and visual) is needed handled in multiple places. How to address this without having to repeat info. And how to set this up that is easily linked to from other topics.

We need this info about focus in for example Web forms

• No positive tabindex of first form field
• In case of summary error messages
• In the case of no summary error messages
• In case of success
• When a dialog is used in a form
• When a tooltip is used (advise accordeon)
• Use of autofocus

I propose to write a main topic (with sub pages) in Frontend code named "Focus handling", with the how to and then refer to that in the topics that need that info. Addressing visual focus and keyboard focus and also what is announced by a screen reader when a target gets focus.

Proposed menu structure

Standards and Best practice > Frontend code:

• Focus handling (in random order)
  • Intro Section focus handling #286
  • Tabindex (no positive tabindex) Section focus handling #286
  • Tab order (logical and sequential) Section focus handling #286
  • Keyboard trap
  • Visual focus (do not hide keyboard focus) Section focus handling #286
  • Status messages (with and without close button)
  • Restore focus (after closing a component) Section focus handling #286
  • Sustain focus (keep focus in modal or menu) Section focus handling #286
  • Focus change with dynamic changes

Related WCAG SC:

• 1.3.1 Info and Relationships (Level A).
• 2.1.1 Keyboard (Level A).
• 2.1.2 No Keyboard Trap (Level A).
• 2.4.3 Focus Order (Level A).
• 2.4.7 Focus Visible (Level AA).
• 2.4.11 Focus Not Obscured (Minimum) (Level AA).
• Anything else?

Related issue:
#158