Skip to content

Commit 3ff5dc2

Browse files
committed
Apply focus halo suppression to all PrimeVue buttons
The :focus:not(:focus-visible) rule was previously scoped only to .icon-action-btn, so it only worked on the icon-only resend/trash buttons in the workspace Members and project Collaborators tables. Other invitation-related buttons (the labeled Resend pill on the dashboard, the X on the dashboard, the labeled buttons in the invitation sidebar) kept the lingering focus halo after a mouse click. Move the rule out of .icon-action-btn and apply it globally to .p-button. The :focus-visible exclusion still preserves the focus ring for keyboard navigation, so accessibility is unaffected.
1 parent cf44156 commit 3ff5dc2

1 file changed

Lines changed: 6 additions & 5 deletions

File tree

web-app/packages/lib/src/assets/sass/themes/mm-theme-light/_extensions.scss

Lines changed: 6 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -118,15 +118,16 @@ img {
118118
overflow-wrap: anywhere;
119119
}
120120

121+
// Suppress the focus halo after a mouse click on any PrimeVue button while
122+
// keeping the ring for keyboard navigation (accessibility).
123+
.p-button:focus:not(:focus-visible) {
124+
box-shadow: none;
125+
}
126+
121127
// Icon-only action button used in list rows (e.g. resend / trash on invitation rows)
122128
.p-button.icon-action-btn {
123129
color: map-get($colors, 'forest');
124130

125-
// Suppress the focus halo after a mouse click
126-
&:focus:not(:focus-visible) {
127-
box-shadow: none;
128-
}
129-
130131
&:not(:disabled):hover {
131132
background: map-get($colors, 'light-green');
132133
color: map-get($colors, 'forest');

0 commit comments

Comments
 (0)