Fix toggling all checkboxes of failed imports:

- Rename classes and function to something more descriptive.
- Listen to the element checked status instead of a click on a non‑focusable element.
- Use specific DOM targets instead of relying on the DOM ancestor tree.
- Add a skip‑link to the end of the list and avoid tabbing through all failed items.
- Update related i18n strings in French.
- Avoid having the label on the whole width to prevent accidental click.
- Move `fieldset` out of `ul`.
This commit is contained in:
Fabien Basmaison
2021-03-05 15:41:21 +01:00
parent 71e3fbcebf
commit 097b8e5811
5 changed files with 98 additions and 27 deletions

View File

@ -156,3 +156,35 @@
content: "\e905";
right: 0;
}
/**
* Accessibility (a11y)
============================================================================ */
/**
* Skip links
*
* @see https://webaim.org/styles/main.css
---------------------------------------------------------------------------- */
.skip-link {
position: absolute;
opacity: 0;
z-index: 100;
padding: 6px;
border: 1px solid white;
color: white;
background: #BF1722;
transition: opacity 1s ease-out;
}
.skip-link:focus {
opacity: 1;
outline-color: transparent;
transition: opacity .1s ease-in;
}
@media (prefers-reduced-motion: reduce) {
.skip-link {
transition-duration: 0.001ms !important;
}
}