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:
@ -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;
|
||||
}
|
||||
}
|
||||
|
Reference in New Issue
Block a user