Fix: aria-label class not properly hidden (fixes #606) #611
Conversation
| @@ -3,33 +3,28 @@ | |||
| .component { position: relative; } | |||
| .block { position: relative; } | |||
|
|
|||
There was a problem hiding this comment.
Similar to the bootstrap example, is it worth adding a comment to instruct developers on its usage.
// Use to hide content visually while keeping it accessible to assistive technologies
less/core/accessibility.less
Outdated
| display: none !important; | ||
| .aria-label-focusable, .visually-hidden-focusable { | ||
| &:not(:focus):not(:focus-within) { | ||
| .visually-hidden |
There was a problem hiding this comment.
.visually-hidden includes pointer-events: none; which we probably want to exclude if we intend to use this for clickable buttons e.g. "skip navigation". In which case we could utilise a mixin here. Please see suggestion below.
.visually-hidden() {
display: block;
position: absolute !important;
width: 1px !important;
height: 1px !important;
padding: 0 !important;
margin: -1px !important;
overflow: hidden !important;
clip: rect(0, 0, 0, 0) !important;
white-space: nowrap !important;
border: 0 !important;
}
.aria-label {
.visually-hidden();
pointer-events: none;
}
.aria-label-focusable, .visually-hidden-focusable {
&:not(:focus):not(:focus-within) {
.visually-hidden;
}
}
| clip: rect(0, 0, 0, 0) !important; | ||
| white-space: nowrap !important; | ||
| border: 0 !important; | ||
| pointer-events: none; | ||
| } | ||
|
|
There was a problem hiding this comment.
Similar to the bootstrap example, is it worth adding a comment to instruct developers on its usage.
// Use to only display content when it's focused
There was a problem hiding this comment.
This works as expected thanks @hanshillen but I've added some comments for your input please.
|
I've addressed the requested changes. |
fixes #606
Fix
.aria-labelper discussion in aria-label class not properly hidden #606