diff --git a/assets/scss/_styles_project.scss b/assets/scss/_styles_project.scss index 0c983fb..4606605 100644 --- a/assets/scss/_styles_project.scss +++ b/assets/scss/_styles_project.scss @@ -29,6 +29,7 @@ @import "expand-content"; @import "docs-homepage"; @import "404"; +@import "skip-links"; #print { display: none; // Hide print functionality for now diff --git a/assets/scss/menu.scss b/assets/scss/menu.scss index 57c4318..a7756fc 100644 --- a/assets/scss/menu.scss +++ b/assets/scss/menu.scss @@ -47,43 +47,64 @@ opacity: 0; } - &__mobile-trigger { - display: none; - } - - &__mobile-icon { + &__mobile-btn { position: fixed; top: $header-first-nav-height-desktop; + left: 10px; + z-index: 34; display: flex; justify-content: center; align-items: center; width: 55px; height: $header-second-nav-height; - left: 10px; - z-index: 34; + padding: 0; + background: transparent; + border: none; transition: $transition; cursor: pointer; + &:focus { + outline: 2px solid $color-shocking-pink; + outline-offset: 2px; + } + + @include mq(large) { + display: none; + } + } + + &__mobile-icon { + position: relative; + display: flex; + justify-content: center; + align-items: center; + width: 26px; + height: 22px; + &::before { content: url("../img/burger.svg"); display: block; width: 26px; height: 22px; } + } - &::after { - content: ""; + &__mobile-btn[aria-expanded="true"] { + left: calc(100% - 55px); + + .gd-docs-menu__mobile-icon::before { display: none; + } + + .gd-docs-menu__mobile-icon::after { + content: ""; + display: block; width: 31px; height: 31px; background-image: url("../img/close.svg"); background-repeat: no-repeat; background-size: contain; } - - @include mq(large) { - display: none; - } } &__mobile-bg { @@ -101,23 +122,11 @@ } } - &__mobile-trigger:checked ~ &, - &__mobile-trigger:checked ~ &__mobile-bg { + &__mobile-btn[aria-expanded="true"] ~ &, + &__mobile-btn[aria-expanded="true"] ~ &__mobile-bg { left: 0; } - &__mobile-trigger:checked ~ &__mobile-icon { - left: calc(100% - 55px); - - &::before { - display: none; - } - - &::after { - display: block; - } - } - & > &-section { padding-left: 0; } @@ -141,6 +150,14 @@ } } + &-section-wrapper { + display: none; + + &.expanded { + display: block; + } + } + &-page__label ~ &-section { padding-left: 0; } @@ -193,25 +210,42 @@ } } - &__toggle { - display: none; - } - - &__chevron { + &__toggle-btn { + display: flex; + align-items: center; + justify-content: center; margin: 4px 0 0; + padding: 4px; + background: transparent; + border: none; cursor: pointer; - - svg { + + // Add focus styles for keyboard navigation + &:focus { + outline: 2px solid $color-shocking-pink; + outline-offset: 2px; + border-radius: 3px; + } + + // SVG rotation based on expanded state + &[aria-expanded="false"] .gd-docs-menu-page__chevron svg { transform: rotate(180deg); } - } - - &__toggle:checked ~ &__title &__chevron { - svg { + + &[aria-expanded="true"] .gd-docs-menu-page__chevron svg { transform: rotate(0deg); } } + &__chevron { + display: flex; + margin: 0; + } + + &__toggle { + display: none; + } + &__label { display: block; flex: 0 0 auto; @@ -223,14 +257,6 @@ } } - &-page__toggle ~ &-section { - display: none; - } - - &-page__toggle:checked ~ &-section { - display: block; - } - .dropdown-toggle { display: flex; justify-content: space-between; diff --git a/assets/scss/skip-links.scss b/assets/scss/skip-links.scss new file mode 100644 index 0000000..02efeac --- /dev/null +++ b/assets/scss/skip-links.scss @@ -0,0 +1,66 @@ +// Skip links for accessibility +.skip-links { + position: absolute; + top: 0; + left: 0; + z-index: 1050; // Higher than other elements +} + +.sidebar-skip-links { + display: flex; + flex-direction: column; + margin-bottom: 10px; +} + +.skip-link { + position: absolute; + left: -10000px; + top: auto; + width: 1px; + height: 1px; + overflow: hidden; + background-color: #fff; + color: #000; + padding: 10px 15px; + font-weight: 600; + text-decoration: none; + border: 2px solid #000; + border-radius: 4px; + z-index: 1050; + + &:focus { + position: static; + width: auto; + height: auto; + overflow: visible; + margin: 10px; + outline: 3px solid #2563eb; // Focus indicator + box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.5); + } + + // Variants + &--sidebar { + margin-bottom: 5px; + + &:focus { + position: static; + width: 100%; + height: auto; + overflow: visible; + margin: 0 0 5px 0; + text-align: center; + } + } + + &--footer { + &:focus { + position: static; + width: auto; + height: auto; + overflow: visible; + margin: 10px auto; + display: block; + text-align: center; + } + } +} \ No newline at end of file diff --git a/layouts/_default/baseof.html b/layouts/_default/baseof.html index 09a3188..80ea98f 100644 --- a/layouts/_default/baseof.html +++ b/layouts/_default/baseof.html @@ -7,8 +7,9 @@ {{ partial "head.html" . }} {{ partial "meta-version.html" . }} -
+ {{ partial "gtm-body.html" }} + {{ partial "skip-links.html" . }}