diff --git a/assets/css/globals.css b/assets/css/globals.css index b493cd35c4..5b240269df 100644 --- a/assets/css/globals.css +++ b/assets/css/globals.css @@ -30,3 +30,19 @@ src: url(../fonts/Lato-Bold.ttf); font-weight: 700; } + +/* + * Global focus-visible indicator for keyboard accessibility (WCAG 2.4.7). + * Shows a consistent 2px outline on keyboard focus, hidden on mouse clicks. + * Uses --pimcore-brand-color (set by base-layout-view.tsx from admin branding + * settings) with the Pimcore default purple as fallback. Ant Design's CSS + * variable mode is not enabled, so --ant-color-primary is unavailable here. + */ +:focus-visible { + outline: 2px solid var(--pimcore-brand-color, #722ed1); + outline-offset: 2px; +} + +:focus:not(:focus-visible) { + outline: none; +} diff --git a/assets/js/src/core/components/icon-button/icon-button.styles.ts b/assets/js/src/core/components/icon-button/icon-button.styles.ts index 96ed730452..8d7b989a01 100644 --- a/assets/js/src/core/components/icon-button/icon-button.styles.ts +++ b/assets/js/src/core/components/icon-button/icon-button.styles.ts @@ -51,8 +51,8 @@ export const useStyles = createStyles(({ token, css }) => { } &:focus-visible { - outline: none !important; - outline-offset: 0 !important; + outline: 2px solid var(--pimcore-brand-color, #722ed1) !important; + outline-offset: 2px !important; } } ` diff --git a/build-dist/build-9cec5923e287.zip b/build-dist/build-fcde33e09a7d.zip similarity index 88% rename from build-dist/build-9cec5923e287.zip rename to build-dist/build-fcde33e09a7d.zip index 6f606083f2..8f5a179bf7 100644 Binary files a/build-dist/build-9cec5923e287.zip and b/build-dist/build-fcde33e09a7d.zip differ