Skip to content

Commit c8ada78

Browse files
committedDec 1, 2022
Keep focus ring styling in a single place to fix missing focus outline in some situations
·
v0.59.3v0.50.1
1 parent 5ba1d79 commit c8ada78

File tree

5 files changed

+12
-17
lines changed

5 files changed

+12
-17
lines changed
 

‎src/lib/components/Button/_tools.scss

Lines changed: 0 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -105,10 +105,6 @@
105105
opacity: theme.$disabled-opacity;
106106
cursor: theme.$disabled-cursor;
107107
}
108-
109-
&:-moz-focusring {
110-
outline: 0;
111-
}
112108
}
113109

114110
@mixin button-size($size) {

‎src/lib/foundation.scss

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@
99

1010
@use "styles/generic/box-sizing";
1111
@use "normalize.css/normalize.css";
12+
@use "styles/generic/focus";
1213
@use "styles/generic/forms";
1314
@use "styles/generic/reset";
1415
@use "styles/generic/shared";

‎src/lib/styles/generic/_focus.scss

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
@use "../tools/accessibility";
2+
3+
// Remove focus outline as we implement custom appearance of focus state. Increase specificity where necessary to
4+
// override normalize.css.
5+
:where(button, input, select, textarea):focus {
6+
outline: none;
7+
}
8+
9+
:is(a, button, input, select, textarea, [type="button"], [type="submit"]) {
10+
@include accessibility.focus-ring();
11+
}

‎src/lib/styles/generic/_forms.scss

Lines changed: 0 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,3 @@
1-
@use "../tools/accessibility";
2-
3-
// Remove focus outline as we implement custom appearance of focus state. Increase specificity where necessary to
4-
// override normalize.css.
5-
:where(button, input, select, textarea):focus {
6-
outline: none;
7-
}
8-
9-
:is(a, button, input, select, textarea, [type="button"], [type="submit"]) {
10-
@include accessibility.focus-ring();
11-
}
12-
131
// Reset Chrome and Firefox behaviour which sets a `min-width: min-content;` on fieldsets.
142
fieldset {
153
min-width: 0;

‎src/lib/styles/tools/_reset.scss

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,6 @@
1919
&:hover,
2020
&:focus {
2121
text-decoration: none;
22-
outline: none;
2322
}
2423
}
2524

0 commit comments

Comments
 (0)
Please sign in to comment.