DP-23086 A11y when org search is not shown, it should be fully hidden for all users

DP-23086.yml

@@ -0,0 +1,59 @@
+# Every PR must have a changelog. To create a changelog:
+# 1. Make a copy of this file and name it with the ticket number.
+# 2. Keep the original format of one of the examples at the bottom, and override each element of it using ___TEMPLATE___ for reference
+# 3. Remove all comments from the copied file
+
+#___CHANGE TYPES___
+# - Added for new features.
+# - Changed for changes in existing functionality.
+# - Deprecated for soon-to-be removed features.
+# - Removed for now removed features.
+# - Fixed for any bug fixes.
+# - Security in case of vulnerabilities.
+# e.g. Added
+
+#___PROJECT___
+# - Patternlab
+# - React
+# - Docs
+# e.g. React
+# e.g. React, Patternlab
+
+#___COMPONENT___
+# Component name(s) in `PascalCase`
+# e.g. Header
+# e.g. Form, InputSlider, InputTextTypeAhead
+
+#___DESCRIPTION___
+# PR description and PR number (append PR number with # to create a link to the PR in Github)
+# If you need multiple lines, start the first line with the following "|-" characters.
+# For any breaking changes, add a comment in the PR describing the necessary changes on the consumer side and link that comment in the description.
+#e.g. Adds apples to apple trees for admin apple pickers (#PR)
+
+#___ISSUE___
+# A Jira ticket or a Github issue number (append Github issue number with # to create a link to the issue in Github)
+# e.g. DP-12345 or #123
+
+#___IMPACT___
+# - Major impact when you make incompatible API changes,
+# - Minor impact when you add functionality in a backwards compatible manner, and
+# - Patch impact when you make backwards compatible bug fixes.
+# e.g. Minor
+# See https://semver.org/ for more info.
+
+
+#___TEMPLATE___
+# ChangeType [enter a valid option, see __CHANGE TYPES___ e.g. Added]:
+#  - project: Enter one or multiple (comma separated) valid project prefix(es) - see ___PROJECT___ e.g. React, Patternlab
+#    component: Enter one or multiple (comma separated) valid component name(s) - see ___COMPONENT___ e.g. Color
+#    description: Describe the change and add the PR number. see ___DESCRIPTION___ e.g. Adds apples to apple trees for admin apple pickers (#PR)
+#    issue: Add a Jira ticket or issue number, e.g. DP-12345 or 124
+#    impact: Enter a valid impact, e.g. Minor
+
+#___EXAMPLE___
+Fixed:
+  - project: Patternlab
+    component: OrganizationNavigation
+    description: Fixes keyboard navigation for organization search. (#1531)
+    issue: DP-23086
+    impact: patch

packages/assets/scss/03-organisms/_organization-navigation-item.scss

@@ -6,10 +6,8 @@
     position: relative;
     padding: 0 20px;
     margin-bottom: 0;
-    order: 2;
 
     @media ($bp-large-min) {
-      order: 1;
       display: flex;
       padding: 0;
       border-bottom: 0;
@@ -33,11 +31,11 @@
       box-shadow: 0;
       transition: 0.8s ease-out;
 
-      button {
+      .subnav-toggle {
 
         @include ma-chevron;
 
-        &::after {
+        &:after {
           float: right;
           border-color: $c-primary-alt;
           transition: 0.5s ease-out;
@@ -123,6 +121,7 @@
 
   &__subitems {
     -ms-overflow-style: none;
+    visibility: hidden;
 
     @media ($bp-large-max) {
       height: 200vh;
@@ -134,17 +133,19 @@
       transition: right 0.5s ease;
       z-index: $z-dropdown;
       background-color: $c-white;
+      // display: none;
 
       .item-open & {
         right: 0;
+        // display: block;
       }
     }
 
     @media ($bp-large-min) {
       position: absolute;
       left: 0;
       max-height: 0;
-      top: -100vh;
+      // top: -100vh;
       overflow-y: hidden;
       transition: 0.2s ease-in-out;
       width: auto;
@@ -181,37 +182,53 @@
 
   @media ($bp-large-min) {
     display: flex;
+
+    .ma__comp-heading {
+      display: block;
+
+      &--mobile {
+        display: none;
+      }
+
+    }
   }
 
-  .ma__comp-heading {
+  @media ($bp-large-max) {
+    .ma__comp-heading {
+      display: none;
 
-    @media ($bp-large-max) {
+
+    &--mobile {
+      display: block;
       font-size: $fonts-medium;
       font-weight: $fonts-normal;
       color: $c-primary;
       margin-bottom: 0;
       padding-bottom: 1rem;
 
-      &::after {
-        display: none;
-      }
 
-      &::before {
-        content: $close-icon;
-        font-size: $fonts-2xlarge;
-        font-weight: 200;
-        line-height: 0;
-        position: absolute;
-        top: 35%;
-        right: 0;
-        transform: translate(-50%, -50%) rotate(135deg);
-        transition: 0.2s ease-out;
+      & > button {
+        @include ma-button-reset;
+        color: $c-primary;
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        width: 100%;
+
+        &:after {
+          content: $close-icon;
+          font-size: $fonts-2xlarge;
+          line-height: 0;
+          transform: translate(-50%, -50%) rotate(135deg);
+          transition: 0.2s ease-out;
+        }
       }
-
-      &.item-open::before {
+      &.item-open >  button:after {
         transform: translate(-50%, -50%) rotate(90deg);
       }
     }
+    }
+
   }
 
   &-section {

packages/assets/scss/03-organisms/_organization-navigation.scss

@@ -20,7 +20,7 @@ $menu-transition-time: 0.3s;
     left: 0;
     width: 100%;
     margin-top: 0;
-    z-index: $z-dropdown;
+    z-index: $z-modal;
 
     .show-menu & {
       opacity: 0;
@@ -57,6 +57,7 @@ $menu-transition-time: 0.3s;
 
   &__mobile-toggle {
 
+    width: 100%;
     @include ma-container;
     padding-top: 1rem;
     padding-bottom: 1rem;
@@ -67,6 +68,7 @@ $menu-transition-time: 0.3s;
     font-weight: $fonts-bold;
     line-height: 1.2;
     color: $c-font-dark;
+    border: 0;// Reset default button borders.
     border-bottom: 1px solid $c-gray-light;
     background-color: $c-gray-lightest;
     z-index: $z-dropdown;
@@ -80,6 +82,7 @@ $menu-transition-time: 0.3s;
       max-width: 90%;
       margin-right: -1em;
       padding-right: 1em;
+      text-align: left;
 
       &::before {
         content: '...';
@@ -150,13 +153,11 @@ $menu-transition-time: 0.3s;
 
   &__search {
     border-bottom: 1px solid $c-gray-light;
-    order: 1;
     padding: 20px;
 
     @media ($bp-large-min) {
       display: flex;
       flex-direction: row-reverse;
-      order: 2;
       border-bottom: 0;
       padding: 0;
 
@@ -172,6 +173,11 @@ $menu-transition-time: 0.3s;
       }
     }
 
+    #org-search-note {
+      // Hide aria-describedby content
+      display: none;
+    }
+
     .ma__form {
       display: flex;
       width: 100%;
@@ -190,13 +196,15 @@ $menu-transition-time: 0.3s;
         max-width: 0;
         pointer-events: none;
         opacity: 0;
+        visibility: hidden;
         transition: 0s;
 
         .form-open & {
           max-width: $max-width;
           width: 100%;
           pointer-events: auto;
           opacity: 1;
+          visibility: visible;
           transition: $menu-transition-time;
           margin-right: 15px;
         }
@@ -262,22 +270,29 @@ $menu-transition-time: 0.3s;
         padding-left: 40px;
       }
 
+      :not(.form-open) &--icon {
+        display: none;
+      }
+
       .form-open & {
         font-size: $fonts-smaller;
         padding-right: 1.5rem;
         padding-left: 1rem;
         font-weight: $fonts-normal;
 
-        &::after {
+        // &::after {
+        &--icon {
+          display: block;
           color: $c-primary-alt;
-          content: $close-icon;
+          // content: $close-icon;
           font-size: $fonts-2xlarge;
           font-weight: 600;
           line-height: 0;
           position: absolute;
           right: 0;
           transform: translateY(-50%);
-          top: 50%;
+          top: 40%;
+          padding-top: 5px;
         }
 
         svg {

packages/patternlab/styleguide/source/_patterns/03-organisms/by-template/org-nav-i-want-to-menu.twig

@@ -4,6 +4,7 @@
   {% if findService  %}
   <div class="ma__org-nav-i-want-to-section ma__org-nav-i-want-to__findService">
     {% set linkList = findService.linkList %}
+    <h3 class="ma__comp-heading--mobile"><button>{{ linkList.compHeading.title}}</button></h3>
     {% include "@organisms/by-author/link-list.twig" %}
   </div>
   {% endif %}
@@ -13,6 +14,7 @@
   {% if learnAbout  %}
   <div class="ma__org-nav-i-want-to-section ma__org-nav-i-want-to__learnAbout">
     {% set linkList = learnAbout.linkList %}
+    <h3 class="ma__comp-heading--mobile"><button>{{ linkList.compHeading.title}}</button></h3>
     {% include "@organisms/by-author/link-list.twig" %}
   </div>
   {% endif %}
@@ -21,6 +23,7 @@
   {% block login %}
   {% if login.href %}
   <div class="ma__org-nav-i-want-to-section ma__org-nav-i-want-to__login">
+    <h3 class="ma__comp-heading--mobile"><button>Log in to...</button></h3>
     <h3 class="ma__comp-heading">Log in to...</h3>
     <a class="ma__link-list__container" href="{{ login.href }}">{{ login.text }}</a>
   </div>