mirror of
https://github.com/flarum/core.git
synced 2025-07-30 21:20:24 +02:00
[A11Y] Accessibility improvements for the Search component (#3017)
* Remove deprecated code * Accessibility improvements for Search component
This commit is contained in:
@@ -130,3 +130,39 @@
|
||||
.offset();
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* This mixin allows support for a custom element nearby the focused one
|
||||
* to have a focus style applied to it
|
||||
*
|
||||
* For example...
|
||||
*
|
||||
*? button { .add-keyboard-focus-ring-nearby("+ .myOtherElement") }
|
||||
* becomes
|
||||
*? button:-moz-focusring + .myOtherElement { <styles> }
|
||||
*? button:focus-within + .myOtherElement { <styles> }
|
||||
*/
|
||||
.add-keyboard-focus-ring-nearby-offset(@nearbySelector, @offset) {
|
||||
@realNearbySelector: ~"@{nearbySelector}";
|
||||
|
||||
.offset() {
|
||||
outline-offset: @offset;
|
||||
}
|
||||
|
||||
// We need to declare these separately, otherwise
|
||||
// browsers will ignore `:focus-visible` as they
|
||||
// don't understand `:-moz-focusring`
|
||||
|
||||
// These are the keyboard-only versions of :focus
|
||||
&:-moz-focusring {
|
||||
@{realNearbySelector} {
|
||||
.offset();
|
||||
}
|
||||
}
|
||||
|
||||
&:focus-visible {
|
||||
@{realNearbySelector} {
|
||||
.offset();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
Reference in New Issue
Block a user