diff --git a/.changeset/purple-sheep-cough.md b/.changeset/purple-sheep-cough.md new file mode 100644 index 00000000000..8e5ce65797a --- /dev/null +++ b/.changeset/purple-sheep-cough.md @@ -0,0 +1,5 @@ +--- +'@shopify/polaris': patch +--- + +Fixed the focus states of actions within the Page Header component diff --git a/polaris-react/src/components/ActionMenu/components/SecondaryAction/SecondaryAction.scss b/polaris-react/src/components/ActionMenu/components/SecondaryAction/SecondaryAction.scss index 2bbbc803ef0..4f55b44b8e3 100644 --- a/polaris-react/src/components/ActionMenu/components/SecondaryAction/SecondaryAction.scss +++ b/polaris-react/src/components/ActionMenu/components/SecondaryAction/SecondaryAction.scss @@ -63,17 +63,16 @@ background-color: var(--p-color-bg-strong) !important; border-radius: var(--p-border-radius-2) !important; /* stylelint-disable-next-line selector-max-combinators -- se23 */ - &:hover { + &:is(:hover, :focus) { background-color: var(--p-color-bg-strong-hover) !important; } /* stylelint-disable-next-line selector-max-combinators -- se23 */ - &:focus, &:active { background-color: var(--p-color-bg-strong-active) !important; box-shadow: var(--p-shadow-inset-md) !important; } /* stylelint-disable-next-line selector-max-combinators -- se23 */ - &:focus:not(:active) { + &:focus-visible { /* stylelint-disable-next-line polaris/border/polaris/at-rule-disallowed-list -- se23 */ @include no-focus-ring; outline: var(--p-border-width-2) solid @@ -94,11 +93,10 @@ button { color: var(--p-color-text-critical) !important; /* stylelint-disable-next-line selector-max-combinators, max-nesting-depth -- se23 */ - &:hover { + &:is(:hover, :focus) { background-color: var(--p-color-bg-strong-hover) !important; } /* stylelint-disable-next-line selector-max-combinators, max-nesting-depth -- se23 */ - &:focus, &:active { background-color: var(--p-color-bg-strong-active) !important; } diff --git a/polaris-react/src/components/Page/components/Header/Header.scss b/polaris-react/src/components/Page/components/Header/Header.scss index a5d4ec19316..b86316e6fbb 100644 --- a/polaris-react/src/components/Page/components/Header/Header.scss +++ b/polaris-react/src/components/Page/components/Header/Header.scss @@ -25,13 +25,18 @@ $action-menu-rollup-computed-width: 40px; box-shadow: none; /* stylelint-disable-next-line selector-max-combinators -- SE23 match button group */ - &:hover { - box-shadow: none; + &:is(:hover, :focus, :focus-visible) { + /* stylelint-disable-next-line declaration-no-important -- SE23 match button group */ + box-shadow: none !important; + } + + /* stylelint-disable-next-line selector-max-combinators -- SE23 match button group */ + &:is(:hover, :focus-visible) { background-color: var(--p-color-bg-strong-hover); } /* stylelint-disable-next-line selector-max-combinators -- SE23 match button group */ - &:focus { + &:active { background-color: var(--p-color-bg-strong-active); /* stylelint-disable-next-line declaration-no-important -- SE23 match button group */ box-shadow: var(--p-shadow-inset-md) !important;