1
0
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:
David Wheatley
2021-09-20 16:06:15 +01:00
committed by GitHub
parent c1a8c6c190
commit 5dd48e1b86
4 changed files with 71 additions and 13 deletions

View File

@@ -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();
}
}
}