Unverified Commit bc8ea2e8 authored by Lauri Timmanee's avatar Lauri Timmanee
Browse files

Issue #3186349 by mherchel, anmolgoyal74, bnjmnm, andrewmacpherson,... 

Issue #3186349 by mherchel, anmolgoyal74, bnjmnm, andrewmacpherson, jwitkowski79, rainbreaw, proeung, benjifisher, lauriii: Major accessibility problems with Olivero header show/hide feature
parent c2241ab6

core/tests/Drupal/Nightwatch/Tests/oliveroWideNavExpandTest.js→core/tests/Drupal/Nightwatch/Tests/oliveroStickyHeaderToggleTest.js

+14 −6
Changes for core/tests/Drupal/Nightwatch/Tests/oliveroStickyHeaderToggleTest.js: 14 added lines, 6 removed lines.
Original line number Diff line number Diff line 
const buttonSelector = 'button.sticky-header-toggle';

const mainMenuSelector = '#block-olivero-main-menu';



module.exports = {

  '@tags': ['core', 'olivero'],

  before(browser) {
@@ -18,14 +21,19 @@ module.exports = { 
        '#block-olivero-content h2',

        'Congratulations and welcome to the Drupal community!',

      )

      .assert.not.visible('button.wide-nav-expand')

      .assert.not.visible(buttonSelector)

      .getLocationInView('footer.site-footer', () => {

        browser.assert.visible('button.wide-nav-expand');

        browser.assert.visible(buttonSelector);

        browser.assert.not.visible('#site-header__inner');

      })

      .assert.not.visible('#block-olivero-main-menu')

      .click('button.wide-nav-expand', () => {

        browser.assert.visible('#block-olivero-main-menu');

      });

      .assert.not.visible(mainMenuSelector)

      .click(buttonSelector)

      .assert.visible(mainMenuSelector)

      .assert.attributeEquals(buttonSelector, 'aria-checked', 'true')



      // Sticky header should remain open after page reload in open state.

      .drupalRelativeURL('/node')

      .assert.visible(mainMenuSelector)

      .assert.attributeEquals(buttonSelector, 'aria-checked', 'true');

  },

};

core/themes/olivero/css/components/header-sticky-toggle.css

0 → 100644
+145 −0
Changes for core/themes/olivero/css/components/header-sticky-toggle.css: 145 added lines, 0 removed lines.
Original line number Diff line number Diff line 
/*

 * DO NOT EDIT THIS FILE.

 * See the following change record for more information,

 * https://www.drupal.org/node/3084859

 * @preserve

 */



/**

 * @file

 * Sticky Header Toggle Button.

 *

 * This button shows on the left hand side of the header (in LTR layouts), and

 * toggles fixing the header to the top of the viewport.

 */



.sticky-header-toggle {

  display: none

}



@media (min-width: 75rem) {



.sticky-header-toggle {

    display: flex;

    flex-shrink: 0;

    align-items: center;

    justify-content: center;

    width: 5.625rem;

    height: 6.75rem;

    pointer-events: none;

    opacity: 0;

    border: 0;

    outline: 0;

    background-color: #2494db

}



    .sticky-header-toggle:focus {

      cursor: pointer;

      pointer-events: auto;

      opacity: 1;

      outline: solid 2px #fff;

      outline-offset: -4px;

    }

  }



@media (min-width: 75rem) {



body:not(.is-always-mobile-nav) .js-fixed .sticky-header-toggle {

    visibility: visible

}

  }



@media (min-width: 75rem) {



body.is-always-mobile-nav .sticky-header-toggle {

    visibility: hidden

}

  }



.sticky-header-toggle__icon {

  position: relative;

  width: 2.25rem;

  height: 1.3125rem;

  transition: opacity 0.2s;

  pointer-events: none;

  transform-style: preserve-3d

}



.sticky-header-toggle__icon > span {

    display: block;

    height: 0;

    /* Intentionally not using CSS logical properties. */

    border-top: solid 3px #fff

  }



[dir="ltr"] .sticky-header-toggle__icon > span:nth-child(1) {

      left: 0

}



[dir="rtl"] .sticky-header-toggle__icon > span:nth-child(1) {

      right: 0

}



.sticky-header-toggle__icon > span:nth-child(1) {

      position: absolute;

      top: 0;

      width: 100%;

      height: 0;

      transition: transform 0.2s;

      background-color: #fff;

    }



[dir="ltr"] .sticky-header-toggle__icon > span:nth-child(2) {

      left: 0

}



[dir="rtl"] .sticky-header-toggle__icon > span:nth-child(2) {

      right: 0

}



.sticky-header-toggle__icon > span:nth-child(2) {

      position: absolute;

      top: 0.5625rem;

      width: 100%;

      height: 0;

      transition: opacity 0.2s;

      background-color: #fff;

    }



[dir="ltr"] .sticky-header-toggle__icon > span:nth-child(3) {

      left: 0

}



[dir="rtl"] .sticky-header-toggle__icon > span:nth-child(3) {

      right: 0

}



.sticky-header-toggle__icon > span:nth-child(3) {

      position: absolute;

      top: auto;

      bottom: 0;

      width: 100%;

      height: 0;

      transition: transform 0.2s;

      background-color: #fff;

    }



.js-fixed .sticky-header-toggle {

  cursor: pointer;

  pointer-events: auto;

  opacity: 1;

}



[aria-checked="true"] .sticky-header-toggle__icon > span:nth-child(1) {

    top: 0.5625rem;

    transform: rotate(-45deg);

  }



[aria-checked="true"] .sticky-header-toggle__icon > span:nth-child(2) {

    opacity: 0;

  }



[aria-checked="true"] .sticky-header-toggle__icon > span:nth-child(3) {

    top: 0.5625rem;

    transform: rotate(45deg);

  }

core/themes/olivero/css/components/header-sticky-toggle.pcss.css

0 → 100644
+115 −0
Changes for core/themes/olivero/css/components/header-sticky-toggle.pcss.css: 115 added lines, 0 removed lines.
Original line number Diff line number Diff line 
/**

 * @file

 * Sticky Header Toggle Button.

 *

 * This button shows on the left hand side of the header (in LTR layouts), and

 * toggles fixing the header to the top of the viewport.

 */



@import "../base/variables.pcss.css";



.sticky-header-toggle {

  display: none;



  @media (--nav) {

    display: flex;

    flex-shrink: 0;

    align-items: center;

    justify-content: center;

    width: var(--content-left);

    height: var(--sp6);

    pointer-events: none;

    opacity: 0;

    border: 0;

    outline: 0;

    background-color: var(--color--blue-50);



    &:focus {

      cursor: pointer;

      pointer-events: auto;

      opacity: 1;

      outline: solid 2px var(--color--white);

      outline-offset: -4px;

    }

  }

}



body:not(.is-always-mobile-nav) .js-fixed .sticky-header-toggle {

  @media (--nav) {

    visibility: visible;

  }

}



body.is-always-mobile-nav .sticky-header-toggle {

  @media (--nav) {

    visibility: hidden;

  }

}



.sticky-header-toggle__icon {

  position: relative;

  width: var(--sp2);

  height: 21px;

  transition: opacity 0.2s;

  pointer-events: none;

  transform-style: preserve-3d;



  & > span {

    display: block;

    height: 0;

    /* Intentionally not using CSS logical properties. */

    border-top: solid 3px var(--color--white);



    &:nth-child(1) {

      position: absolute;

      inset-block-start: 0;

      inset-inline-start: 0;

      width: 100%;

      height: 0;

      transition: transform 0.2s;

      background-color: var(--color--white);

    }



    &:nth-child(2) {

      position: absolute;

      inset-block-start: 9px;

      inset-inline-start: 0;

      width: 100%;

      height: 0;

      transition: opacity 0.2s;

      background-color: var(--color--white);

    }



    &:nth-child(3) {

      position: absolute;

      inset-block: auto 0;

      inset-inline-start: 0;

      width: 100%;

      height: 0;

      transition: transform 0.2s;

      background-color: var(--color--white);

    }

  }

}



.js-fixed .sticky-header-toggle {

  cursor: pointer;

  pointer-events: auto;

  opacity: 1;

}



[aria-checked="true"] .sticky-header-toggle__icon {

  & > span:nth-child(1) {

    inset-block-start: 9px;

    transform: rotate(-45deg);

  }



  & > span:nth-child(2) {

    opacity: 0;

  }



  & > span:nth-child(3) {

    inset-block-start: 9px;

    transform: rotate(45deg);

  }

}

core/themes/olivero/css/components/site-header.css

+3 −3
Changes for core/themes/olivero/css/components/site-header.css: 3 added lines, 3 removed lines.
Original line number Diff line number Diff line
@@ -81,20 +81,20 @@ 
@media (min-width: 75rem) {



html.js body:not(.is-always-mobile-nav) .site-header__inner {

    transition: opacity 0.3s, transform 0.3s

    transition: opacity 0.3s, transform 0.3s, box-shadow 0.3s

}

  }



@media (min-width: 75rem) {



.site-header__fixable.js-fixed .site-header__inner {

.site-header__fixable.is-expanded .site-header__inner {

    box-shadow: -36px 1px 36px rgba(0, 0, 0, 0.08) /* LTR */

}

  }



@media (min-width: 75rem) {



[dir="rtl"] .site-header__fixable.js-fixed .site-header__inner {

[dir="rtl"] .site-header__fixable.is-expanded .site-header__inner {

    box-shadow: 36px 1px 36px rgba(0, 0, 0, 0.08)

}

  }

core/themes/olivero/css/components/site-header.pcss.css

+3 −3
Changes for core/themes/olivero/css/components/site-header.pcss.css: 3 added lines, 3 removed lines.
Original line number Diff line number Diff line
@@ -73,17 +73,17 @@ 
 */

html.js body:not(.is-always-mobile-nav) .site-header__inner {

  @media (--nav) {

    transition: opacity 0.3s, transform 0.3s;

    transition: opacity 0.3s, transform 0.3s, box-shadow 0.3s;

  }

}



.site-header__fixable.js-fixed .site-header__inner {

.site-header__fixable.is-expanded .site-header__inner {

  @media (--nav) {

    box-shadow: -36px 1px 36px rgba(0, 0, 0, 0.08); /* LTR */

  }

}



[dir="rtl"] .site-header__fixable.js-fixed .site-header__inner {

[dir="rtl"] .site-header__fixable.is-expanded .site-header__inner {

  @media (--nav) {

    box-shadow: 36px 1px 36px rgba(0, 0, 0, 0.08);

  }