department-of-veterans-affairs · Mottie · Nov 22, 2024 · Nov 22, 2024
@@ -7,6 +7,8 @@ $formation-asset-path: '~@department-of-veterans-affairs/formation/assets';
 @import '@department-of-veterans-affairs/formation/sass/base/_b-breakpoints.scss';
 @import '@department-of-veterans-affairs/formation/sass/site/_m-crisis-line.scss';
 
+@import '../../web-components/src/mixins/focusable.css';
+
 // Remove Negative Margin via Default Storybook CSS
 // This is causing the show code button to overlap with components
 // Height Auto fixes Firefox Bug with height being set to a fixed 70px value

@@ -432,6 +432,7 @@ const defaultArgs = {
 
 export const Default = Template.bind(null);
 Default.args = {
+  name: 'group0',
   ...defaultArgs,
 };
 Default.argTypes = propStructure(radioDocs);

@@ -1,5 +1,6 @@
 @import "~@department-of-veterans-affairs/css-library/dist/stylesheets/uswds-typography.css";
 @import '../../mixins/links.css';
+@import '../../mixins/focusable.css';
 
 :host {
   display: block;

@@ -1,3 +1,4 @@
+@import '../../mixins/focusable.css';
 
 /* .usa-alert__heading */
 :is(va-alert) > :is(h1, h2, h3, h4, h5, h6) {

@@ -2,6 +2,7 @@
 @use 'usa-alert/src/styles/usa-alert';
 
 @import "~@department-of-veterans-affairs/css-library/dist/stylesheets/uswds-typography.css";
+@import '../../mixins/focusable.css';
 
 :host {
   display: block;
@@ -13,7 +14,7 @@
   font-size: 21.28px; /* 1.33rem */
   margin-top: 0;
   margin-bottom: 8px; /* 0.5rem */
-  font-family: var(--font-serif); 
+  font-family: var(--font-serif);
 }
 
 .va-alert-close:hover {

@@ -46,11 +46,11 @@ a {
   position: absolute;
   transition: background-color 0.25s ease-in;
 }
-a:not([disabled]):active, a:not([disabled]):focus {
+/* a:not([disabled]):active, a:not([disabled]):focus {
   border-radius: 5px;
   outline: 2px solid var(--vads-color-action-focus-on-light);
   outline-offset: 2px;
-}
+} */
 a:not([disabled]):hover {
   border-radius: 5px;
   background-color: var(--vads-color-gray-cool-light);
@@ -60,7 +60,7 @@ a:not([disabled]):hover {
 div a {
   display: none;
 }
-  
+
 div.reveal a {
   display: inherit;
   border-bottom-left-radius: 5px;

@@ -1,3 +1,5 @@
+@import '../../mixins/focusable.css';
+
 va-breadcrumbs .va-breadcrumbs-li {
   display: inline-block;
   line-height: 1.5;
@@ -53,10 +55,10 @@ va-breadcrumbs li > a:hover {
 }
 
 
-va-breadcrumbs li > a:focus {
+/* va-breadcrumbs li > a:focus {
   outline: 2px solid var(--vads-color-action-focus-on-light);
   outline-offset: 2px;
-}
+} */
 
 va-breadcrumbs li > a[aria-current='page'] {
   color: var(--vads-color-base-darker);

@@ -1,6 +1,7 @@
 @forward 'settings';
 
 @use 'usa-button-group/src/styles/usa-button-group';
+@import '../../mixins/focusable.css';
 
 :host {
   display: flex;

@@ -9,6 +9,7 @@
 @use 'usa-error-message/src/styles/usa-error-message';
 
 @import '../../mixins/uswds-error-border.scss';
+@import '../../mixins/focusable.css';
 
 :host {
   display: block;
@@ -20,6 +21,6 @@
 }
 
 .usa-checkbox__input:focus + [class*='__label']::before {
-  outline: 2px solid var(--vads-color-action-focus-on-light);
+  // outline: 2px solid var(--vads-color-action-focus-on-light);
   outline-offset: 4px;
 }
@@ -1,3 +1,5 @@
+@import '../../mixins/focusable.css';
+
 .va-header {
   display: flex;
   margin-left: auto;
@@ -15,7 +17,7 @@
 }
 
 .va-logo-link:focus {
-  outline: 2px solid var(--vads-color-action-focus-on-light);
+  // outline: 2px solid var(--vads-color-action-focus-on-light);
 }
 
 .va-logo {

@@ -1,5 +1,6 @@
 @import '../../mixins/links.css';
 @import '../../mixins/accessibility.css';
+@import '../../mixins/focusable.css';
 
 :host {
   display: inline-flex;
@@ -13,10 +14,10 @@
   font-weight: 700;
   font-size: 1.06rem;
   padding: 0.5rem 0;
-  &:active {
+  /* &:active {
     outline: 2px solid var(--vads-color-action-focus-on-light);
     outline-offset: 2px;
-  }
+  } */
 }
 
 :host a.va-link--primary,
@@ -29,7 +30,7 @@
 :host a.va-link--reverse {
   color: var(--vads-color-white);
 
-  &:hover, &:active {
+  &:hover, &:active, &:focus {
     color: var(--vads-color-action-focus-on-light);
     background-color: transparent;
   }
@@ -75,8 +76,9 @@
   color: var(--vads-color-black);
 }
 
-:host a.va-link--reverse:hover va-icon,
-:host a.va-link--reverse:active va-icon {
+:host a.va-link--reverse:not(:focus):hover va-icon,
+:host a.va-link--reverse:not(:focus):active va-icon {
+  color: var(--uswds-system-color-gray-90);
   background-color: var(--vads-color-action-focus-on-light) !important;
 }
 

@@ -1,32 +1,40 @@
 @use 'uswds-helpers/src/styles/usa-sr-only';
 @import '~@department-of-veterans-affairs/css-library/dist/stylesheets/uswds-typography.css';
 @import '../../mixins/links.css';
+@import '../../mixins/focusable.css';
 
 :host {
   display: inline;
 }
 
 // override formation [href]:focus style that added an outline to the host resulting in a double outline for the link
-:host([href]:focus) {
-  outline: none !important;
-}
+// :host([href]:focus) {
+//   outline: none !important;
+// }
 
 :host a {
   cursor: pointer;
   text-decoration: underline;
   font: inherit;
+
+    &:focus,
+    &:active {
+      color: var(--vads-color-gray-90) !important;
+    }
 }
 
 :host a.va-link--reverse,
 :host a.va-link--reverse .link-icon--back {
   color: var(--vads-color-white);
 
-  &:hover,
-  &:active,
+  &:not(:focus):hover,
+  &:not(:focus):active,
   &:hover .link-icon--back,
   &:active .link-icon--back {
-    color: var(--vads-color-action-focus-on-light);
-    background-color: transparent;
+    color: var(--vads-color-gray-90);
+    background-color: var(--vads-color-action-focus-on-light);
+    // color: var(--vads-color-action-focus-on-light);
+    // background-color: transparent;
   }
 }
 

@@ -1,5 +1,6 @@
 @import "~@department-of-veterans-affairs/css-library/dist/stylesheets/uswds-typography.css";
 @import '../../mixins/buttons.css';
+@import '../../mixins/focusable.css';
 
 .maintenance-banner {
   border-top: 8px solid;

@@ -1,3 +1,5 @@
+@import '../../mixins/focusable.css';
+
 :host {
     display: block;
     position: relative;
@@ -30,7 +32,7 @@ va-link {
 i.fa-times-circle::before {
     content: '\F057'; /* fa-times-circle*/
     font-size: 20px;
-} 
+}
 
 i.action-required::before {
     content: '\F06A'; /* fa-exclamation-circle */
@@ -103,12 +105,12 @@ p {
     background-color: transparent;
 }
 
-.va-notification-close:active, .va-notification-close:focus {
-    color: var(--vads-color-base);
-    background-color: transparent;
-    outline: 2px solid var(--vads-color-action-focus-on-light);
-    outline-offset: 2px;
-}
+// .va-notification-close:active, .va-notification-close:focus {
+//     color: var(--vads-color-base);
+//     background-color: transparent;
+//     outline: 2px solid var(--vads-color-action-focus-on-light);
+//     outline-offset: 2px;
+// }
 
 .va-notification-close > i {
     margin-right: 8px;

@@ -1,4 +1,5 @@
 @import "~@department-of-veterans-affairs/css-library/dist/stylesheets/uswds-typography.css";
+@import '../../mixins/focusable.css';
 
 :host {
   display: block;
@@ -116,7 +117,8 @@
 }
 
 button:not([disabled]):focus {
-  outline: 2px solid var(--vads-color-action-focus-on-light);
+  // outline: 2px solid var(--vads-color-action-focus-on-light);
+  background-color: transparent;
 }
 
 button[aria-expanded=false], button[aria-expanded=true] {

@@ -141,8 +141,8 @@ export class VaOfficialGovBanner {
     if (tld === 'gov' || tld === 'mil') {
       return (
         <Host>
-            <div class="banner">
-            <div class="accordion"  >
+          <div class="banner va-official-gov-banner">
+            <div class="accordion">
               <div id="header">
                 <div class="inner">
                   <div class="grid-col-auto">
@@ -158,6 +158,7 @@ export class VaOfficialGovBanner {
                   </div>
                   <button
                     onClick={this.handleClick}
+                    class="va-official-gov-banner__toggle"
                     type="button"
                     aria-expanded="false"
                     aria-controls="official-gov-banner">

@@ -1,4 +1,5 @@
 @import '../../mixins/accessibility.css';
+@import '../../mixins/focusable.css';
 
 div {
   box-sizing: border-box;

@@ -165,6 +165,7 @@ export class VaPromoBanner {
           </a>
           <button
             type="button"
+            class="va-promo-banner__close"
             aria-label="Dismiss this promo banner"
             onClick={() => this.closeHandler()}
           >

@@ -2,6 +2,7 @@
 
 @use 'uswds-core/src/styles/mixins/helpers/checkbox-and-radio-colors';
 @use 'usa-radio/src/styles/usa-radio';
+@import '../../mixins/focusable.css';
 
 va-radio-option label {
   max-width: 480px;
@@ -37,7 +38,7 @@ va-radio-option label.usa-radio__label::before {
 }
 
 va-radio-option .usa-radio__input:focus + [class*='__label']::before {
-  outline: 2px solid var(--vads-color-action-focus-on-light);
+  // outline: 2px solid var(--vads-color-action-focus-on-light);
 }
 
 va-radio-option input[disabled='true']:focus + label.usa-radio__label::before {

@@ -1,6 +1,7 @@
 @forward 'settings';
 @use 'usa-table/src/styles/usa-table';
 @use 'uswds-helpers/src/styles/usa-sr-only';
+@import '../../../mixins/focusable.css';
 
 :host {
   td slot::slotted(span:empty)::before,
@@ -31,10 +32,12 @@
     top: 50%;
     transform: translate(0, -50%);
     text-align: center;
-
+
+    /*
     &:focus {
-      outline: 2px solid var(--vads-color-action-focus-on-light);
+       outline: 2px solid var(--vads-color-action-focus-on-light);
     }
+    */
   }
 }