diff --git a/packages/volto/cypress/tests/core/blocks/blocks-image.js b/packages/volto/cypress/tests/core/blocks/blocks-image.js index 092aebbef54..67e65a3ce84 100644 --- a/packages/volto/cypress/tests/core/blocks/blocks-image.js +++ b/packages/volto/cypress/tests/core/blocks/blocks-image.js @@ -29,7 +29,7 @@ describe('Blocks Tests', () => { cy.get('.block-editor-image [tabindex="0"]') .last() .focus() - .should('have.css', 'outline', 'rgb(16, 16, 16) auto 1px'); + .should('have.css', 'outline', 'rgb(0, 0, 0) solid 2px'); cy.findByLabelText('Enter a URL to an image').click(); cy.get('.ui.input.editor-link.input-anchorlink-theme input').type( `https://github.com/plone/volto/raw/main/logos/volto-colorful.png{enter}`, diff --git a/packages/volto/news/8381.bugfix b/packages/volto/news/8381.bugfix new file mode 100644 index 00000000000..3389945e470 --- /dev/null +++ b/packages/volto/news/8381.bugfix @@ -0,0 +1 @@ +Added consistent visible focus for interactive components to improve accessibility. @Wagner3UB diff --git a/packages/volto/theme/themes/pastanaga/extras/focus.less b/packages/volto/theme/themes/pastanaga/extras/focus.less new file mode 100644 index 00000000000..51a9dcb72fe --- /dev/null +++ b/packages/volto/theme/themes/pastanaga/extras/focus.less @@ -0,0 +1,33 @@ +.universal-focus-style() { + box-shadow: 0 0 0 2px @innerFocusShadow !important; + outline: 2px solid @outerFocusOutline !important; + outline-offset: 2px; +} + +// Global focus styles for all elements that support :focus-visible +// Exclude contenteditable elements (slate editors, rich text inputs) — focus is +// already implied by the text cursor; an outline ring is noisy and confusing. +:focus-visible:not([contenteditable]):not([data-slate-editor]) { + .universal-focus-style(); +} + +//inputs modifications +input:focus-visible { + border-color: @outerFocusOutline !important; +} + +// Semantic UI checkbox focus styles +.ui.checkbox input:focus-visible ~ label::before { + .universal-focus-style(); + outline-offset: 4px; +} + +.ui.checkbox input:focus-visible ~ label::before { + transition: none !important; +} + +// Skiplinks focus styles +.skiplinks-wrapper a:focus-visible { + border: 2px solid @linkColor; + outline: 3px solid @linkColor; +} diff --git a/packages/volto/theme/themes/pastanaga/extras/main.less b/packages/volto/theme/themes/pastanaga/extras/main.less index 2d5c7de1967..2e6f0164eb0 100644 --- a/packages/volto/theme/themes/pastanaga/extras/main.less +++ b/packages/volto/theme/themes/pastanaga/extras/main.less @@ -699,4 +699,5 @@ img.responsive { @import 'views'; @import 'toc'; @import 'grid.less'; +@import 'focus.less'; .loadUIOverrides(); diff --git a/packages/volto/theme/themes/pastanaga/extras/skiplinks.less b/packages/volto/theme/themes/pastanaga/extras/skiplinks.less index 8e1bec42572..f2207645b82 100644 --- a/packages/volto/theme/themes/pastanaga/extras/skiplinks.less +++ b/packages/volto/theme/themes/pastanaga/extras/skiplinks.less @@ -12,9 +12,7 @@ top: 10px; left: 10px; padding: 10px; - border: 2px solid @linkColor; background: #fff; - outline: 3px solid @linkColor; } &:hover { diff --git a/packages/volto/theme/themes/pastanaga/globals/site.variables b/packages/volto/theme/themes/pastanaga/globals/site.variables index c529f8df29d..d0b787bc445 100755 --- a/packages/volto/theme/themes/pastanaga/globals/site.variables +++ b/packages/volto/theme/themes/pastanaga/globals/site.variables @@ -363,3 +363,10 @@ /*--- Dark Tones ---*/ /*--- Light Tones ---*/ + +/*------------------- + Focused Input +--------------------*/ + +@innerFocusShadow: #fff; +@outerFocusOutline: #000;