Skip to content

Commit b4408fa

Browse files
committed
Use focus-visible pseudo-class for focus states
This improves accessibility and user experience by displaying the focus borders only when the browser determines it is necessary (such as during keyboard navigation) while hiding them during mouse clicks.
1 parent be6c57f commit b4408fa

File tree

4 files changed

+5
-5
lines changed

4 files changed

+5
-5
lines changed

src/Buttercup.Web/styles/buttons.less

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,7 @@
2626
outline: 0;
2727
}
2828

29-
&:focus {
29+
&:focus-visible {
3030
background-color: oklch(
3131
from var(--push-button-background-color) calc(l - 0.05) c h
3232
);
@@ -39,7 +39,7 @@
3939

4040
&,
4141
&:active,
42-
&:focus,
42+
&:focus-visible,
4343
&:hover {
4444
background-color: var(--push-button-background-color);
4545
border-color: var(--push-button-border-color);

src/Buttercup.Web/styles/input-box.less

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@
1414
border-color: var(--color-red);
1515
}
1616

17-
&:focus {
17+
&:focus-visible {
1818
border-color: var(--color-blue);
1919
outline: 0;
2020
}

src/Buttercup.Web/styles/popover-menu.less

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -36,7 +36,7 @@
3636
outline: 0;
3737
}
3838

39-
&:focus {
39+
&:focus-visible {
4040
border-color: var(--color-orange);
4141
outline: 0;
4242
}

src/Buttercup.Web/styles/top-bar.less

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -116,7 +116,7 @@
116116
border: var(--top-bar-focus-border-width) solid transparent;
117117
text-align: center;
118118

119-
&:focus {
119+
&:focus-visible {
120120
border-color: var(--color-orange);
121121
outline: 0;
122122
}

0 commit comments

Comments
 (0)