massgov · ygannett · Nov 8, 2023 · Nov 8, 2023 · Nov 8, 2023 · Nov 8, 2023
diff --git a/changelogs/DP-30306.yml b/changelogs/DP-30306.yml
@@ -0,0 +1,6 @@
+Changed:
+  - project: Pattenlab
+    component: Interactive elements
+    description: Update focus state style for the interactive elements to meet WCAG 2.2. (#1846)
+    issue: DP-130306
+    impact: Patch
diff --git a/packages/assets/scss/00-base/_elements.scss b/packages/assets/scss/00-base/_elements.scss
@@ -49,6 +49,8 @@ a {
   @include ma-link-transition;
   font-weight: $fonts-bold;
   color: $c-font-link;
+
+  @include ma-state-focus;
 }
 
 address {
@@ -169,4 +171,11 @@ div {
 
 b, strong {
   font-weight: $fonts-bold;
-}
+}
+
+
+// WCAG 2.2 TEST
+button, input, select, textarea {
+
+  @include ma-state-focus;
+}
diff --git a/packages/assets/scss/00-base/_mixins.scss b/packages/assets/scss/00-base/_mixins.scss
@@ -66,3 +66,6 @@
 @forward "mixins/ma-background-colors";
 
 @forward "mixins/ma-layout";
+
+// WCAG 2.2 TEST
+@forward "mixins/ma-state-focus";
diff --git a/packages/assets/scss/00-base/mixins/_ma-state-focus.scss b/packages/assets/scss/00-base/mixins/_ma-state-focus.scss
@@ -0,0 +1,167 @@
+@use 'color-tokens' as *;
+
+@use "00-base/colors" as *;
+
+@mixin ma-state-focus {
+
+  // Base
+  &:focus {
+    outline-offset: 3px;
+    outline: 3px solid;
+    border-bottom-color: $c-primary;
+
+    // TEST ELEMENT IDENTIFIER
+    // outline-color: orange;
+    outline-color: $c-primary;
+
+    // BRAND BANNER
+    &.ma__brand-banner-container {
+      // outline-offset: 0;
+      // outline-color: $c-white;
+
+      border: 3px solid $c-white;
+    }
+
+    // HEADER BLUE BAR
+    &.ma__header__hamburger__menu-button,
+    .ma__utility-nav__translate &,
+    &.ma__utility-nav__link,
+    &.ma__breadcrumbs__item,
+    .ma__header__hamburger__utility-nav--wide .ma__utility-nav__content & {
+      outline-color: $c-white;
+    }
+
+    // HOME - HORIZONTAL NAV
+    &.ma__main-nav__top-link,
+    &.ma__main-nav__link {
+      outline-width: 3px;
+      outline-color: $c-gray-dark;
+    }
+
+    // MAIN MANU FLYOUT
+    // See:
+    // - 02-molecules/_main-nav-hamburger.scss
+    // - 03-organisms/_header-hamburger.scss
+    .ma__header__hamburger__nav-container .ma__utility-nav__translate & {
+      outline-color: $c-primary;
+    }
+
+
+    // HOME - SEARCH BANNER
+    .ma__search-banner__container & {
+        outline-color: $c-white;
+    }
+
+    .ma__search-banner__links .ma__decorative-link & {
+      outline-width: 2px;
+      border-bottom-color: rgba($c-white,.5) !important;
+    }
+
+
+
+    // SAMPLE:  http://localhost:3000/patterns/05-pages-organization/05-pages-organization.html
+    // BREADCRUMBS
+    .ma__breadcrumbs__item & {
+      outline-color: $c-primary;
+      border-bottom: 3px solid rgba($c-font-link,.5);
+    }
+
+    // RELATIONSHIP INDICATOR
+    .ma__relationship-indicators--term &,
+    .ma__relationship-indicators__expand-indicators & {
+      outline-color: $c-primary-alt;
+      box-shadow: inset 0 0 $c-white, inset 0px -2px $c-primary-alt;
+    }
+
+
+    // PAGE BANNER
+    .ma__page-banner__content-wrapper .ma__decorative-link &, // ORG ELECTIVE OFFICIAL
+    .ma__page-banner__button & {
+      outline-color: $c-white;
+      // border-bottom-color: rgba($c-white,.5) !important;
+    }
+
+
+    .ma__section-links &.ma__decorative-link,
+    &.ma__callout-link {
+      // outline-offset: 2px;
+      outline: none;
+      outline-color: $c-font-link;
+      border: 3px solid $c-font-link;
+    }
+
+    .ma__callout-message &.ma__callout-link {
+      padding: 2px 2px 8px 2px;
+    }
+
+    // FEATURED ITEM MOSAIC
+    &.ma__featured-item {
+      outline-offset: 0;
+      outline-width: 3px;
+      outline-color: $c-gray-dark;
+
+      & .ma__featured-item__title-container span {
+        border-bottom-color: $c-white;
+      }
+    }
+
+    // SAMPLE: http://localhost:3000/patterns/05-pages-guide/05-pages-guide.html
+    .ma__key-actions__items &.ma__callout-link {
+      outline-offset: 2px;
+      outline: none;
+      border: 4px solid $c-font-link;
+    }
+
+    .ma__rich-text & {
+      border-bottom-width: 3px;
+    }
+
+    // SAMPLE:  http://localhost:3000/patterns/05-pages-organization/05-pages-organization.html
+    &.ma__contact-us__header,
+    .ma__organization-navigation &,
+    &.ma__image-link--block  {
+      outline-offset: 0;
+      outline-color: $c-gray-dark;
+    }
+
+    &.ma__organization-navigation__mobile-toggle {
+      outline-offset: -3px;
+      outline-width: 3px;
+      border-color: $c-gray-dark;
+    }
+
+    // SAMPLE:  http://localhost:3000/patterns/05-pages-board-decision/05-pages-board-decision.html
+    .ma__header-tags__terms & {
+      outline-offset: 0;
+    }
+
+    // LOCATION PAGE MAP BANNER LINK
+    .ma__leaflet-map__link & {
+      border-color: $c-primary;
+    }
+
+    // ALERTS BLOCK
+    &.ma__header-alerts__header__button {
+      outline-offset: 0;
+    }
+
+    // PROMOTION
+    //ma__button  ma__button--c-primary
+
+    .ma__key-message__cta &.ma__button--c-white {
+      outline-color: $c-white;
+    }
+
+    // FORM ELEMENTS
+    //  See:
+    //  - 01-atoms/_input-checkbox.scss
+    //  - 01-atoms/_input-radio.scss
+    // - 01-atoms/_select-box.scss
+
+  }
+}
+
+// ERROR PAGE -- adjust the cutoff on the right
+:not(.ma__header__container) .ma__site-logo a {
+  padding-right: 8px;
+}
diff --git a/packages/assets/scss/01-atoms/_input-checkbox.scss b/packages/assets/scss/01-atoms/_input-checkbox.scss
@@ -99,13 +99,16 @@
   }
 
   input:focus ~ label:before {
-    border-color: Highlight !important;
+    // border-color: Highlight !important;// COMMENTED OUT FOR WCAG 2.2 UPDATE TEST
 
     /* WebKit gets its native focus styles.
      */
 
-    @media (-webkit-min-device-pixel-ratio:0) {
-      outline: -webkit-focus-ring-color auto 5px;
-    }
+    // @media (-webkit-min-device-pixel-ratio:0) {// COMMENTED OUT FOR WCAG 2.2 UPDATE TEST
+    //   outline: -webkit-focus-ring-color auto 5px;
+    // }
+
+    outline-offset: 2px;// WCAG 2.2 UPDATE
+    outline: 4px solid $c-primary;// WCAG 2.2 UPDATE
   }
 }
diff --git a/packages/assets/scss/01-atoms/_input-radio.scss b/packages/assets/scss/01-atoms/_input-radio.scss
@@ -24,7 +24,7 @@
       min-width: 1.4em;
       height: 1.4em;
       position: relative;
-      margin-right: 0.5em; 
+      margin-right: 0.5em;
       vertical-align: top;
       cursor: pointer;
       text-align: center;
@@ -46,9 +46,12 @@
 
     &:before {
       box-shadow: inset 0 0 0 4px $c-white, 0 0 2px 2px $c-focus-hightlight;
+
+      outline-offset: 2px;// WCAG 2.2 UPDATE
+      outline: 3px solid $c-primary;// WCAG 2.2 UPDATE
     }
   }
-  
+
 
 // patternlab
 
@@ -80,6 +83,9 @@
 
   input:focus ~ &__label:after {
     box-shadow: 0 0 2px 2px $c-focus-hightlight;
+
+    outline-offset: 2px;// WCAG 2.2 UPDATE
+    outline: 3px solid $c-primary;// WCAG 2.2 UPDATE
   }
 
   input:focus ~ &__label--error:before {

diff --git a/packages/assets/scss/01-atoms/_select-box.scss b/packages/assets/scss/01-atoms/_select-box.scss
@@ -68,15 +68,16 @@
   }
 
   &__select:focus + &__link {
-    outline-width: 2px;
+    outline-width: 3px;//2px; WCAG 2.2 UPDATE
     outline-style: solid;
+    outline-offset: 3px;// WCAG 2.2 UPDATE
 
     /* WebKit gets its native focus styles.
      */
 
-    @media (-webkit-min-device-pixel-ratio:0) {
-      outline-style: auto;
-    }
+    // @media (-webkit-min-device-pixel-ratio:0) {
+    //   outline-style: auto;
+    // }
   }
 }
 
@@ -125,9 +126,13 @@
     /* WebKit gets its native focus styles.
      */
 
-    @media (-webkit-min-device-pixel-ratio:0) {
-      outline-color: -webkit-focus-ring-color;
-    }
+    // @media (-webkit-min-device-pixel-ratio:0) {// COMMENTED OUT FOR WCAG 2.2 TEST
+    //   outline-color: -webkit-focus-ring-color;
+    // }
+
+    outline-width: 3px;// WCAG 2.2 UPDATE
+    outline-style: solid;// WCAG 2.2 UPDATE
+    outline-offset: 3px;// WCAG 2.2 UPDATE
   }
 
   &__disabled {

diff --git a/packages/assets/scss/02-molecules/_main-nav-hamburger.scss b/packages/assets/scss/02-molecules/_main-nav-hamburger.scss
@@ -49,7 +49,8 @@
 
     &:focus {
       background-color: $c-bd-divider;
-      outline: 2px solid $c-black;
+      outline: 3px solid $c-black;// WCAG 2.2 UPDATE
+      outline-offset: 0;// WCAG 2.2 UPDATE
     }
 
     &.cv-alternate-style {
@@ -119,6 +120,13 @@
       text-decoration: underline;
     }
 
+    &:focus { // WCAG 2.2 UPDATE
+      outline: 2px solid $c-primary;
+      outline-offset: 0;
+      background-color: $c-gray-light; // OPTIONAL
+      color: $c-black; // OPTIONAL
+    }
+
     &>svg,
     &>span {
       display: inline-block;

diff --git a/packages/assets/scss/03-organisms/_header-hamburger.scss b/packages/assets/scss/03-organisms/_header-hamburger.scss
@@ -433,6 +433,11 @@ body.show-menu {
     border: 0;
     background-color: $c-primary;
 
+    &:focus {
+      outline-color: $c-white;
+      outline-offset: 0;
+    }
+
     @media ($bp-small-min) {
       display: none;
     }
@@ -533,7 +538,9 @@ body.show-menu {
 
             &:focus {
               background-color: $c-bd-divider;
-              outline: 2px solid $c-black;
+              outline: 3px solid $c-black;// WCAG 2.2 UPDATE
+              outline-offset: 0;// WCAG 2.2 UPDATE
+              text-decoration: underline;// WCAG 2.2 UPDATE
             }
 
             .toggle-indicator {
@@ -693,6 +700,11 @@ body.show-menu {
                 text-decoration: underline;
               }
 
+              &:focus {// WCAG 2.2 UPDATE
+                text-decoration: underline;
+                outline: 2px solid $c-primary;
+              }
+
               & svg {
                 display: none;
               }
@@ -719,6 +731,9 @@ body.show-menu {
 
         display: none;
       }
+
+
+
     }
   }