From aa246312c626be9d2eee28bce1357ecbaa43192b Mon Sep 17 00:00:00 2001 From: Yakir Sitbon Date: Mon, 24 Aug 2026 13:32:04 +0300 Subject: [PATCH 1/2] Fix: Improve keyboard navigation for Accessibility Ready compliance --- dev/scss/reset.scss | 1 + dev/scss/reset/_focus.scss | 23 +++++++++++++++ dev/scss/reset/_forms.scss | 4 --- dev/scss/reset/_reset.scss | 1 + dev/scss/theme/_general.scss | 3 +- dev/scss/theme/_navigation.scss | 40 +++++++++++++++++++-------- includes/settings/settings-header.php | 3 +- template-parts/dynamic-header.php | 2 +- 8 files changed, 58 insertions(+), 19 deletions(-) create mode 100644 dev/scss/reset/_focus.scss diff --git a/dev/scss/reset.scss b/dev/scss/reset.scss index dae67e8d..6e763824 100644 --- a/dev/scss/reset.scss +++ b/dev/scss/reset.scss @@ -3,3 +3,4 @@ @forward "reset/forms"; @forward "reset/table"; @forward "reset/list"; +@forward "reset/focus"; diff --git a/dev/scss/reset/_focus.scss b/dev/scss/reset/_focus.scss new file mode 100644 index 00000000..7b271c0b --- /dev/null +++ b/dev/scss/reset/_focus.scss @@ -0,0 +1,23 @@ +/** + * Global :focus-visible — two-tone outline visible on any background. + * Black inner ring + white outer glow gives >=3:1 contrast on both + * light and dark surfaces without relying on browser defaults. + */ + +a, +button, +input, +select, +textarea, +[tabindex]:not([tabindex="-1"]) { + &:focus-visible { + outline: 2px solid #000; + outline-offset: 2px; + box-shadow: 0 0 0 4px #fff; + } + + &:focus:not(:focus-visible) { + outline: none; + box-shadow: none; + } +} diff --git a/dev/scss/reset/_forms.scss b/dev/scss/reset/_forms.scss index e01e67d1..dc874101 100755 --- a/dev/scss/reset/_forms.scss +++ b/dev/scss/reset/_forms.scss @@ -101,10 +101,6 @@ button, border-radius: variables.$border-radius; transition: all .3s; - &:focus:not(:focus-visible) { - outline: none; - } - &:hover, &:focus { color: #fff; diff --git a/dev/scss/reset/_reset.scss b/dev/scss/reset/_reset.scss index 1e9a28c8..6f22470f 100755 --- a/dev/scss/reset/_reset.scss +++ b/dev/scss/reset/_reset.scss @@ -35,6 +35,7 @@ body { background-color: #fff; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; + overflow-x: clip; } /** diff --git a/dev/scss/theme/_general.scss b/dev/scss/theme/_general.scss index aa88d122..058c8789 100644 --- a/dev/scss/theme/_general.scss +++ b/dev/scss/theme/_general.scss @@ -38,9 +38,10 @@ margin-inline: calc(50% - 50vw); max-width: 100vw; width: 100vw; + overflow-x: hidden; img { - width: 100vw; + width: 100%; } } diff --git a/dev/scss/theme/_navigation.scss b/dev/scss/theme/_navigation.scss index 2f62e682..3f3740eb 100644 --- a/dev/scss/theme/_navigation.scss +++ b/dev/scss/theme/_navigation.scss @@ -95,6 +95,15 @@ padding: 8px 15px; } + ul a { + color: variables.$gray-dark; + + &:hover, + &:focus { + color: variables.$gray-darker; + } + } + &.menu-item-has-children { padding-inline-end: 15px; @@ -116,14 +125,15 @@ } } - ul { - background: #fff; - display: none; - min-width: 150px; - position: absolute; - z-index: 2; - left: 0; - top: 100%; + ul { + background: #fff; + display: none; + min-width: 150px; + max-width: calc(100vw - 2rem); + position: absolute; + z-index: 2; + left: 0; + top: 100%; li { border-block-end: variables.$gray-lighter 1px solid; @@ -150,15 +160,21 @@ } } - &:hover { + &:last-child > ul, + &:nth-last-child(2) > ul { + left: auto; + inset-inline-end: 0; + } - & > ul { - display: block; - } + &:hover { + + & > ul { + display: block; } } } } +} footer { diff --git a/includes/settings/settings-header.php b/includes/settings/settings-header.php index bf2ed037..aa345a8e 100644 --- a/includes/settings/settings-header.php +++ b/includes/settings/settings-header.php @@ -686,7 +686,8 @@ protected function register_tab_controls() { 'hello_header_menu_display' => 'yes', ], 'selectors' => [ - '.site-header .site-navigation ul.menu li a' => 'color: {{VALUE}};', + '.site-header .site-navigation ul.menu > li > a' => 'color: {{VALUE}};', + '.site-header .site-navigation ul.menu > li.menu-item-has-children::after' => 'color: {{VALUE}};', ], ] ); diff --git a/template-parts/dynamic-header.php b/template-parts/dynamic-header.php index d7576aea..13e1c114 100644 --- a/template-parts/dynamic-header.php +++ b/template-parts/dynamic-header.php @@ -59,7 +59,7 @@
-
From de88addf905cadf8b6e09331ac13dae946ba5ebc Mon Sep 17 00:00:00 2001 From: Yakir Sitbon Date: Mon, 24 Aug 2026 18:59:05 +0300 Subject: [PATCH 2/2] add rtl/ltr support --- dev/scss/theme/_navigation.scss | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/dev/scss/theme/_navigation.scss b/dev/scss/theme/_navigation.scss index 3f3740eb..f3187483 100644 --- a/dev/scss/theme/_navigation.scss +++ b/dev/scss/theme/_navigation.scss @@ -132,8 +132,8 @@ max-width: calc(100vw - 2rem); position: absolute; z-index: 2; - left: 0; - top: 100%; + inset-inline-start: 0; + inset-block-start: 100%; li { border-block-end: variables.$gray-lighter 1px solid; @@ -155,14 +155,14 @@ } ul { - left: 100%; - top: 0; + inset-inline-start: 100%; + inset-block-start: 0; } } &:last-child > ul, &:nth-last-child(2) > ul { - left: auto; + inset-inline-start: auto; inset-inline-end: 0; }