From 973276108ddac31d6996cdf19d1a9b2839269da6 Mon Sep 17 00:00:00 2001 From: Hans Hillen Date: Tue, 7 Jan 2025 19:23:43 +1300 Subject: [PATCH 1/4] Fix: aria-label class not properly hidden (fixes #606) --- less/core/accessibility.less | 37 ++++++++++++++++-------------------- 1 file changed, 16 insertions(+), 21 deletions(-) diff --git a/less/core/accessibility.less b/less/core/accessibility.less index 7506ce97..ac151951 100644 --- a/less/core/accessibility.less +++ b/less/core/accessibility.less @@ -3,33 +3,28 @@ .component { position: relative; } .block { position: relative; } -// jquery.a11y start -// Invisible aria-labels -// -------------------------------------------------- -.aria-label { +.aria-label, .visually-hidden { + display: block; position: absolute !important; - &.relative { - position: relative !important; - } - left: 0 !important; - width: auto !important; - height: auto !important; - overflow: auto !important; - color: rgba(0,0,0,0) !important; - background: rgba(0,0,0,0) !important; - font-size: 1px !important; + width: 1px !important; + height: 1px !important; padding: 0 !important; - margin: 0 !important; - line-height: normal !important; - z-index: 1; + margin: -1px !important; + overflow: hidden !important; + clip: rect(0, 0, 0, 0) !important; + white-space: nowrap !important; + border: 0 !important; + display: none !important; } -// Force aria-labels to hide on hidden -// -------------------------------------------------- -.aria-label.aria-hidden { - display: none !important; +.aria-label-focusable, .visually-hidden-focusable { + &:not(:focus):not(:focus-within) { + .visually-hidden + } } +// jquery.a11y start + // Hidden focus guard // -------------------------------------------------- .a11y-focusguard { From 06edfaf701465d172445cb2b3eeecc33c064f3a4 Mon Sep 17 00:00:00 2001 From: Hans Hillen Date: Tue, 7 Jan 2025 23:04:07 +1300 Subject: [PATCH 2/4] Remove redundant display, add pointer-events --- less/core/accessibility.less | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/less/core/accessibility.less b/less/core/accessibility.less index ac151951..144b5d0b 100644 --- a/less/core/accessibility.less +++ b/less/core/accessibility.less @@ -14,7 +14,7 @@ clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important; - display: none !important; + pointer-events: none; } .aria-label-focusable, .visually-hidden-focusable { From 7818c982ea4b0f64c74cecbe9b3727af5567eb73 Mon Sep 17 00:00:00 2001 From: Hans Hillen Date: Fri, 17 Jan 2025 14:45:11 +1300 Subject: [PATCH 3/4] Addressed feedback --- less/core/accessibility.less | 40 +++++++++++++++++++++--------------- 1 file changed, 23 insertions(+), 17 deletions(-) diff --git a/less/core/accessibility.less b/less/core/accessibility.less index 144b5d0b..527d9624 100644 --- a/less/core/accessibility.less +++ b/less/core/accessibility.less @@ -3,25 +3,31 @@ .component { position: relative; } .block { position: relative; } -.aria-label, .visually-hidden { - display: block; - position: absolute !important; - width: 1px !important; - height: 1px !important; - padding: 0 !important; - margin: -1px !important; - overflow: hidden !important; - clip: rect(0, 0, 0, 0) !important; - white-space: nowrap !important; - border: 0 !important; - pointer-events: none; +// Use to hide content visually while keeping it accessible to assistive technologies +.visually-hidden() { + display: block; + position: absolute !important; + width: 1px !important; + height: 1px !important; + padding: 0 !important; + margin: -1px !important; + overflow: hidden !important; + clip: rect(0, 0, 0, 0) !important; + white-space: nowrap !important; + border: 0 !important; } -.aria-label-focusable, .visually-hidden-focusable { - &:not(:focus):not(:focus-within) { - .visually-hidden - } -} +.aria-label { + .visually-hidden(); + pointer-events: none; +} + +// Use to only display content when it's focused +.aria-label-focusable, .visually-hidden-focusable { + &:not(:focus):not(:focus-within) { + .visually-hidden; + } + } // jquery.a11y start From 21ed4f0d33a2707c014e3f9ac866182e2f843c30 Mon Sep 17 00:00:00 2001 From: Hans Hillen Date: Mon, 20 Jan 2025 14:40:59 +1300 Subject: [PATCH 4/4] Update less/core/accessibility.less --- less/core/accessibility.less | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/less/core/accessibility.less b/less/core/accessibility.less index 527d9624..d0a32746 100644 --- a/less/core/accessibility.less +++ b/less/core/accessibility.less @@ -4,7 +4,7 @@ .block { position: relative; } // Use to hide content visually while keeping it accessible to assistive technologies -.visually-hidden() { +.visually-hidden { display: block; position: absolute !important; width: 1px !important;