diff --git a/src/themes/OLH/assets/js/app.js b/src/themes/OLH/assets/js/app.js index 565474e7fd..33a7ac5c77 100755 --- a/src/themes/OLH/assets/js/app.js +++ b/src/themes/OLH/assets/js/app.js @@ -23,6 +23,40 @@ $(document).on('click', '[data-toggle]', function() { $button.attr('aria-expanded', !currentExpanded); }); +// Accessibility: Handle Nav aria-expanded on keyboard navigation +$(document).on('click', '[aria-expanded]', function() { + var $button = $(this); + var currentExpanded = $button.attr('aria-expanded') === 'true'; + $button.attr('aria-expanded', !currentExpanded); +}); + +function toggleAriaExpanded(submenu, expanded) { + var $parent = submenu.parent('li.is-dropdown-submenu-parent'); + var $button = $parent.find('a[aria-expanded]'); + $button.attr('aria-expanded', expanded); +} + +// Accessibility: Listen for Foundation menu events to update aria-expanded +$(document).ready(function() { + // dropdown menu (wide screen) + $(document).on('show.zf.dropdownmenu', function(event, $sub) { + toggleAriaExpanded($sub, true); + }); + + $(document).on('hide.zf.dropdownmenu', function(event, $sub) { + $('a[aria-expanded="true"]').attr('aria-expanded', 'false'); + }); + + // drilldown menu (narrow screen) + $(document).on('open.zf.drilldown', function(event, $elem) { + toggleAriaExpanded($elem, true); + }); + + $(document).on('hide.zf.drilldown', function(event, $elem) { + $('a[aria-expanded="true"]').attr('aria-expanded', 'false'); + }); +}); + $(".search-toggle").click(function() { var $searchMenu = $("#search-menu"); if ($searchMenu.is(':visible')) { diff --git a/src/themes/OLH/assets/scss/app.scss b/src/themes/OLH/assets/scss/app.scss index dab591b7cd..af3ad5487a 100755 --- a/src/themes/OLH/assets/scss/app.scss +++ b/src/themes/OLH/assets/scss/app.scss @@ -614,12 +614,42 @@ div.caption span.label { li { a { color: $dark-gray; + padding: 0.5rem 0; + display: block; + text-decoration: none; + + @include breakpoint(medium) { + padding: 0.5rem 1rem; + } + } + button { + color: $dark-gray; + background: none; + border: none; + padding: 0.5rem 0; + font: inherit; + cursor: pointer; + text-decoration: none; + text-align: left; + display: block; + width: 100%; + + @include breakpoint(medium) { + padding: 0.5rem 1rem; + } } &:hover { background: $medium-gray; } i { margin-top: rem-calc(-5px); + margin-right: 0.5rem; + vertical-align: middle; + } + + // Dropdown menu items should stay on single line + .menu.vertical li { + white-space: nowrap; } } } @@ -1483,3 +1513,74 @@ span + .btn-background { -o-transition: all 1s ease; -ms-transition: all 1s ease; } + + +// carousel style overrides +.orbit-bullets button{ + min-width: 24px; + min-height: 24px; +} + +.orbit-caption{ + color: var(--primary-light-color); + background-color: color-mix(in srgb, var(--primary-dark-color) 90%, transparent); +} + +/* + * WCAG 2.4.7 Focus Visible - Two-Color Focus Indicator (Technique C40) + * Requires at least 1:9 contrast ratio between the two focus colours. + */ +:root { + --focus-light: #F9F9F9; + --focus-dark: #193146; + --focus-ring-size: 4px; +} + +/* Prevent layout shifts */ + /* Inline links override to prevent layout shifts without affecting typography */ + p a, + span a, + li a { + margin: calc(-1 * var(--focus-ring-size)); + padding: var(--focus-ring-size); + box-sizing: border-box; + } + + p a, + span a { + display: inline-block; + } + + +/* General */ +*:focus-visible { + outline: 2px var(--focus-light) solid; + outline-offset: 0; + box-shadow: 0 0 0 var(--focus-ring-size) var(--focus-dark); +} + +/* focus bounding boxes */ +a:focus-visible { + outline: 2px var(--focus-light) solid; + outline-offset: 0; + box-shadow: 0 0 0 var(--focus-ring-size) var(--focus-dark); + display: inline-block; + white-space: normal; +} + +input[type="text"]:focus-visible , +input[type="textarea"].tinymce:focus-visible , +input[type="email"]:focus-visible , +input[type="password"]:focus-visible , +input[type="search"]:focus-visible , +input[type="number"]:focus-visible , +input[type="date"]:focus-visible , +input[type="datetime-local"]:focus-visible , +input[type="file"]:focus-visible , +input[type="submit"]:focus-visible { + outline: 2px var(--focus-light) solid; + outline-offset: 0; + box-shadow: 0 0 0 var(--focus-ring-size) var(--focus-dark); +} + +/* end of WCAG 2.4.7 Focus Visible - Two-Color Focus Indicator (Technique C40) */ \ No newline at end of file diff --git a/src/themes/OLH/templates/core/nav.html b/src/themes/OLH/templates/core/nav.html index 89a4ae38eb..97a42671a9 100644 --- a/src/themes/OLH/templates/core/nav.html +++ b/src/themes/OLH/templates/core/nav.html @@ -6,96 +6,186 @@