Focus first input when navigating to next step

[jorisleker]

Right now, we focus the header of section. Usertesting has shown this is confusing / leads people to use the mouse instead of the keyboard to navigate between inputs.

• [ ] Add aria-live="polite" attribute to the h2 that contains the name of the political group, so screen readers announce the element's content.
• [ ] Remove tabindex="-1" from the h2 element
• [ ] Focus on first input on the page, unless there is an error / warning. In that case, retain current behavior
• [ ] On the 'recounted' page, focus on the fieldset containing the radio's. Make sure they are labeled in an accessible way.
• [ ] On the 'controleren en opslaan' step, don't set a focus (or set on the page body), so screenreaders will read out all relevant content, even when there is no 'opslaan' button because of blocking errors.

in scope: all steps in the data-entry form. out of scope: modals, warning/errors (and rest of the application)

[oliver3]

It seems that the consensus on the internet is that for a SPA with routing, you need to change the title and announce the change. Announcing can be done either by moving focus to the new content or header (as we do now), or use an ARIA live region if you cannot do that, e.g. when you want the first input to have the focus (as we would like to).

Also summarized on https://hidde.blog/accessible-page-titles-in-a-single-page-app/

Note that role status also turns something into a live region

Possible implementations:

• Maybe it is okay to turn our heading into a status, but it will loose role heading? Or add aria-live polite to the heading?
• Add a visually hidden element with role status on every page, maybe using out PageTitle component
• Implement an application wide aria live announcement system, possibly coupled to our PageTitle component, similar to https://github.com/Heydon/on-demand-live-region or https://github.com/adobe/react-spectrum/blob/main/packages/@react-aria/live-announcer/src/LiveAnnouncer.tsx