Skip to content

Components: Ensure Consistent Button Focus Styling Across ItemGroup Button and Button #69289

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
im3dabasia wants to merge 9 commits into
base: trunk
Choose a base branch
from
Open

Components: Ensure Consistent Button Focus Styling Across ItemGroup Button and Button #69289

Changes from 1 commit
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
03cf1a5
fix: Add consistency in button and item button component
im3dabasia Feb 24, 2025
0fb2eba
fix: Add focus styles only when item is button
im3dabasia Mar 6, 2025
9cbfe6d
style: Fix indenting
im3dabasia Mar 6, 2025
348c5be
doc: Add changelog entry
im3dabasia Mar 6, 2025
4c5587a
revert: Changelog
im3dabasia Mar 6, 2025
4b850db
doc: Add Changelog in Bug Fixes
im3dabasia Mar 6, 2025
067e92f
doc: Add PR link
im3dabasia Mar 6, 2025
da85dee
Merge branch 'trunk' into fix/add-consistency-in-button-components
afercia Mar 6, 2025
f992058
Fix indentation
afercia Mar 6, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Next Next commit
fix: Add consistency in button and item button component
  • Loading branch information
@im3dabasia
im3dabasia committed Mar 6, 2025
commit 03cf1a594a63bd246eb057588175a8de10b70d70
12 changes: 3 additions & 9 deletions packages/components/src/item-group/styles.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,17 +28,11 @@ export const unstyledButton = ( as: 'a' | 'button' ) => {
color: ${ COLORS.theme.accent };
}

&:focus {
box-shadow: none;
outline: none;
}

&:focus-visible {
&:focus:not( :disabled ) {
box-shadow: 0 0 0 var( --wp-admin-border-width-focus )
${ COLORS.theme.accent };
// Windows high contrast mode.
outline: 2px solid transparent;
outline-offset: 0;
// Windows High Contrast mode will show this outline, but not the box-shadow.
outline: 3px solid transparent;
}
Copy link
Contributor

@afercia afercia Mar 5, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Sorry I wasn't clear. What I meant in #67747 is that the focus should be consistent only when the Item is rendered as a Button components, that is for example: <Item as="button" { ...toggleProps }>. The as prop is passed here so that it could be used to distinguish the focus style.

Copy link
Contributor Author

@im3dabasia im3dabasia Mar 6, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I have corrected it. Previously, the style was applied to Items as 'button' or as 'a'.

After 0355271 the focus styles will be applied only on the button and otherwise it would default to the old style ie focus-visible for the other ItemGroup.

`;
};
Expand Down