github-mirror/discourse
2
0
Fork 0
mirror of https://github.com/discourse/discourse.git synced 2025-02-02 21:26:32 +08:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

UX: Switch button focus state to focus-visible (#30744)

Browse Source 
From https://developer.mozilla.org/en-US/docs/Web/CSS/:focus-visible:

> The :focus-visible pseudo-class applies while an element matches the
[:focus](https://developer.mozilla.org/en-US/docs/Web/CSS/:focus)
pseudo-class and the UA ([User
Agent](https://developer.mozilla.org/en-US/docs/Glossary/User_agent))
determines via heuristics that the focus should be made evident on the
element. (Many browsers show a "focus ring" by default in this case.)

This change switches buttons over to `:focus-visible` which shouldn't
change much, except for situations where focus state may linger in cases
when it's not desired, like the tracking button here for example:


![image](https://github.com/user-attachments/assets/57aaa193-0960-4757-a461-47fdcca7de2a)


When using `focus-visible` the `focus` state is no longer visible after
a tap, but the focus state will still appear when using keyboard
navigation or assistive technology like VoiceOver, as seen here:


<img
src="https://github.com/user-attachments/assets/62398532-3e05-4979-91a4-d3ddeb4758cb"
width="300" />
This commit is contained in:
Kris 2025-01-13 14:05:51 -05:00 committed by GitHub
parent 828c646aab
commit f23e196b4f
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 14 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
app/assets/stylesheets/common/base/modal.scss
View File

@ -41,6 +41,11 @@
font-size: var(--font-up-2); font-size: var(--font-up-2);
color: var(--primary-high); color: var(--primary-high);
} }
&:focus-visible {
.d-icon {
color: var(--primary);
}
}
} }
} }

28
app/assets/stylesheets/common/components/buttons.scss
View File

@ -62,7 +62,7 @@
} }
} }
} }
&:focus { &:focus-visible {
outline: none; outline: none;
background-color: $hover-bg-color; background-color: $hover-bg-color;
color: $hover-text-color; color: $hover-text-color;
@ -72,10 +72,6 @@
color: Highlight; color: Highlight;
} }
} }
&:focus-visible {
@include darken-background($hover-bg-color, 0.1);
}
} }
.discourse-no-touch &:active:not(:hover):not(:focus), .discourse-no-touch &:active:not(:hover):not(:focus),
@ -201,7 +197,7 @@
color: #000; color: #000;
background: #fff; background: #fff;
border-radius: var(--d-border-radius); border-radius: var(--d-border-radius);
&:focus { &:focus-visible {
outline: 1px solid #000; outline: 1px solid #000;
} }
&[href] { &[href] {
@ -289,7 +285,7 @@
} }
.discourse-no-touch & { .discourse-no-touch & {
&:hover, &:hover,
&:focus { &:focus-visible {
color: var(--primary); color: var(--primary);
.d-icon { .d-icon {
color: var(--primary); color: var(--primary);
@ -298,7 +294,7 @@
&:hover { &:hover {
background: transparent; background: transparent;
} }
&:focus { &:focus-visible {
background: var(--primary-low); background: var(--primary-low);
} }
} }
@ -310,14 +306,14 @@
} }
.discourse-no-touch & { .discourse-no-touch & {
&:hover, &:hover,
&:focus { &:focus-visible {
background: transparent; background: transparent;
.d-icon { .d-icon {
color: var(--primary); color: var(--primary);
} }
} }
} }
&:focus { &:focus-visible {
background: transparent; background: transparent;
.d-icon { .d-icon {
color: var(--primary); color: var(--primary);
@ -330,14 +326,14 @@
&, &,
&:hover, &:hover,
&.btn-hover, &.btn-hover,
&:focus { &:focus-visible {
color: var(--primary); color: var(--primary);
} }
} }
&:not([disabled]) { &:not([disabled]) {
&:hover, &:hover,
&.btn-hover, &.btn-hover,
&:focus { &:focus-visible {
color: var(--tertiary-hover); color: var(--tertiary-hover);
} }
@ -347,7 +343,7 @@
} }
} }
} }
&:focus { &:focus-visible {
outline: none; outline: none;
background: var(--primary-low); background: var(--primary-low);
.d-icon { .d-icon {
@ -370,10 +366,6 @@
background: transparent; background: transparent;
} }
} }
&:focus {
color: var(--tertiary);
background: transparent;
}
&:focus-visible { &:focus-visible {
color: var(--tertiary); color: var(--tertiary);
background: transparent; background: transparent;
@ -386,7 +378,6 @@
.d-icon { .d-icon {
color: inherit; color: inherit;
} }
&:focus,
&:focus-visible { &:focus-visible {
color: var(--#{$btn-color}-hover); color: var(--#{$btn-color}-hover);
} }
@ -406,7 +397,6 @@
.d-icon { .d-icon {
color: var(--primary-high); color: var(--primary-high);
} }
&:focus,
&:focus-visible { &:focus-visible {
background: transparent; background: transparent;
color: var(--tertiary-hover); color: var(--tertiary-hover);