opensource-joe opened a new pull request, #824:
URL: https://github.com/apache/fineract-backoffice-ui/pull/824
## What and why
Closes #746
Two parts, one commit each, both from the fix suggested in the issue.
**1. A skip link.** "Skip to main content" is now the first stop in the tab
order on every
authenticated page. It stays off screen until it takes focus. Enter moves
focus to `<main>`, which
now has `id="main-content"` and `tabindex="-1"`. From there the next Tab is
the first control in the
page content, so it takes 2 key presses instead of 105.
The link handles its own click rather than leaving it to the browser. With
`<base href="/">`, a bare
`#main-content` resolves to `/#main-content`, so a plain anchor would leave
the page instead of
moving within it.
**2. Focus moves to `<main>` when the page changes.** Without this, after
picking a sidebar link
focus stays on that link (or drops to the top of the document if the control
was destroyed), and the
next Tab goes back through the navigation. Three cases are left alone on
purpose:
- the first navigation, so on a fresh load focus is still at the top and Tab
reaches the skip link
- a change to the query string only, such as a paginator or a filter
updating the URL, so focus is
not taken from the control the user just pressed
- focus that is already inside `<main>`, such as `NotFoundComponent`
focusing its own heading
`main` gets no focus ring when it takes focus as a target, because it is not
a control.
The string is in `en`, `fr`, `hi` and `ko`.
## Testing
- Unit: 5 new tests in `main-layout.component.test.ts` (first focusable
element, click handling,
path change, query-only change, focus already in `main`).
- e2e: new `e2e/skip-link.spec.ts` in the mocked project. First Tab on a
fresh load lands on the
skip link and it is in the viewport, Enter puts focus on `main` and the
URL does not change, and
Alt+C to Create Client leaves focus inside `main`.
- Both new e2e tests fail on `main` and pass with the change.
- Giving `main` an id changes how axe names the existing
`scrollable-region-focusable` finding in
`accessibility.spec.ts`'s shell baseline, so that key moves from `main` to
`#main-content`. Same
finding, new selector. (A keyboard user can now reach `main` through the
skip link and scroll it
with the arrow keys, but axe only counts elements in the tab order, so it
still reports it.)
- Full unit suite: 314 files, 2594 tests passed. `npm run build` clean.
- Also run: `keyboard-shortcuts`, `accessibility`, `breadcrumb`,
`global-search-navigation` and
`guidance-tour` specs, `npm run lint`, `format:check`, `check:a11y-names`,
`typecheck:e2e`.
`npm run i18n:check` fails on `main` already (`fr.json defines
ON_HOLD_TRANSACTIONS.REASON, which
en.json does not`, from the French catalogue in #819). I left that alone
since it is not part of this
change.
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: [email protected]
For queries about this service, please contact Infrastructure at:
[email protected]
