fix: add consistent visible focus for interactive components (a11y) - backport v19

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}`,

packages/volto/news/8381.bugfix

@@ -0,0 +1 @@
+Added consistent visible focus for interactive components to improve accessibility. @Wagner3UB

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;
+}

packages/volto/theme/themes/pastanaga/extras/main.less

@@ -698,4 +698,5 @@ img.responsive {
 @import 'views';
 @import 'toc';
 @import 'grid.less';
+@import 'focus.less';
 .loadUIOverrides();

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 {

packages/volto/theme/themes/pastanaga/globals/site.variables

@@ -363,3 +363,10 @@
 /*---  Dark Tones  ---*/
 
 /*---  Light Tones  ---*/
+
+/*-------------------
+    Focused Input
+--------------------*/
+
+@innerFocusShadow: #fff;
+@outerFocusOutline: #000;