From a400c472f20995df29db4c15e81f127c3c300f31 Mon Sep 17 00:00:00 2001
From: IgnacioBecerra <i1becerr@ucsd.edu>
Date: Mon, 11 Jan 2021 14:57:01 -0800
Subject: [PATCH 1/4] fix(card): voiceover now only reads heading

---
 .../__snapshots__/storyshots.test.js.snap     | 59 +++++++++++++++++++
 packages/react/src/components/Card/Card.js    | 12 +++-
 .../src/components/card/card-eyebrow.ts       |  8 ++-
 .../src/components/card/card-footer.ts        |  7 ++-
 .../tests/snapshots/dds-masthead-composite.md |  2 +-
 5 files changed, 82 insertions(+), 6 deletions(-)

diff --git a/packages/react/src/__tests__/__snapshots__/storyshots.test.js.snap b/packages/react/src/__tests__/__snapshots__/storyshots.test.js.snap
index b8b1287f91a..f12a7152510 100644
--- a/packages/react/src/__tests__/__snapshots__/storyshots.test.js.snap
+++ b/packages/react/src/__tests__/__snapshots__/storyshots.test.js.snap
@@ -3356,6 +3356,7 @@ exports[`Storyshots Components|Card Default 1`] = `
                       className="bx--card__content"
                     >
                       <p
+                        aria-hidden={true}
                         className="bx--card__eyebrow"
                       >
                         Eyebrow text
@@ -3369,6 +3370,7 @@ exports[`Storyshots Components|Card Default 1`] = `
                         className="bx--card__footer bx--card__footer__copy"
                       >
                         <span
+                          aria-hidden={true}
                           className="bx--card__cta__copy"
                         >
                           Card CTA text
@@ -6538,6 +6540,7 @@ exports[`Storyshots Components|CardGroup With Images 1`] = `
                                   className="bx--card__content"
                                 >
                                   <p
+                                    aria-hidden={true}
                                     className="bx--card__eyebrow"
                                   >
                                     Topic
@@ -6784,6 +6787,7 @@ exports[`Storyshots Components|CardGroup With Images 1`] = `
                                   className="bx--card__content"
                                 >
                                   <p
+                                    aria-hidden={true}
                                     className="bx--card__eyebrow"
                                   >
                                     Topic
@@ -7030,6 +7034,7 @@ exports[`Storyshots Components|CardGroup With Images 1`] = `
                                   className="bx--card__content"
                                 >
                                   <p
+                                    aria-hidden={true}
                                     className="bx--card__eyebrow"
                                   >
                                     Topic
@@ -7276,6 +7281,7 @@ exports[`Storyshots Components|CardGroup With Images 1`] = `
                                   className="bx--card__content"
                                 >
                                   <p
+                                    aria-hidden={true}
                                     className="bx--card__eyebrow"
                                   >
                                     Topic
@@ -7522,6 +7528,7 @@ exports[`Storyshots Components|CardGroup With Images 1`] = `
                                   className="bx--card__content"
                                 >
                                   <p
+                                    aria-hidden={true}
                                     className="bx--card__eyebrow"
                                   >
                                     Topic
@@ -8033,6 +8040,7 @@ exports[`Storyshots Components|CardGroup With Images And CTA 1`] = `
                                   className="bx--card__content"
                                 >
                                   <p
+                                    aria-hidden={true}
                                     className="bx--card__eyebrow"
                                   >
                                     Topic
@@ -8279,6 +8287,7 @@ exports[`Storyshots Components|CardGroup With Images And CTA 1`] = `
                                   className="bx--card__content"
                                 >
                                   <p
+                                    aria-hidden={true}
                                     className="bx--card__eyebrow"
                                   >
                                     Topic
@@ -8525,6 +8534,7 @@ exports[`Storyshots Components|CardGroup With Images And CTA 1`] = `
                                   className="bx--card__content"
                                 >
                                   <p
+                                    aria-hidden={true}
                                     className="bx--card__eyebrow"
                                   >
                                     Topic
@@ -8771,6 +8781,7 @@ exports[`Storyshots Components|CardGroup With Images And CTA 1`] = `
                                   className="bx--card__content"
                                 >
                                   <p
+                                    aria-hidden={true}
                                     className="bx--card__eyebrow"
                                   >
                                     Topic
@@ -9017,6 +9028,7 @@ exports[`Storyshots Components|CardGroup With Images And CTA 1`] = `
                                   className="bx--card__content"
                                 >
                                   <p
+                                    aria-hidden={true}
                                     className="bx--card__eyebrow"
                                   >
                                     Topic
@@ -9922,6 +9934,7 @@ exports[`Storyshots Components|CardSectionImages Default 1`] = `
                                         className="bx--card__content"
                                       >
                                         <p
+                                          aria-hidden={true}
                                           className="bx--card__eyebrow"
                                         >
                                           Topic
@@ -10168,6 +10181,7 @@ exports[`Storyshots Components|CardSectionImages Default 1`] = `
                                         className="bx--card__content"
                                       >
                                         <p
+                                          aria-hidden={true}
                                           className="bx--card__eyebrow"
                                         >
                                           Blog
@@ -10414,6 +10428,7 @@ exports[`Storyshots Components|CardSectionImages Default 1`] = `
                                         className="bx--card__content"
                                       >
                                         <p
+                                          aria-hidden={true}
                                           className="bx--card__eyebrow"
                                         >
                                           Topic
@@ -10660,6 +10675,7 @@ exports[`Storyshots Components|CardSectionImages Default 1`] = `
                                         className="bx--card__content"
                                       >
                                         <p
+                                          aria-hidden={true}
                                           className="bx--card__eyebrow"
                                         >
                                           Blog
@@ -10906,6 +10922,7 @@ exports[`Storyshots Components|CardSectionImages Default 1`] = `
                                         className="bx--card__content"
                                       >
                                         <p
+                                          aria-hidden={true}
                                           className="bx--card__eyebrow"
                                         >
                                           Topic
@@ -15873,6 +15890,7 @@ exports[`Storyshots Components|ContentBlockCards With Images 1`] = `
                                               className="bx--card__content"
                                             >
                                               <p
+                                                aria-hidden={true}
                                                 className="bx--card__eyebrow"
                                               >
                                                 Topic
@@ -16119,6 +16137,7 @@ exports[`Storyshots Components|ContentBlockCards With Images 1`] = `
                                               className="bx--card__content"
                                             >
                                               <p
+                                                aria-hidden={true}
                                                 className="bx--card__eyebrow"
                                               >
                                                 Blog
@@ -16365,6 +16384,7 @@ exports[`Storyshots Components|ContentBlockCards With Images 1`] = `
                                               className="bx--card__content"
                                             >
                                               <p
+                                                aria-hidden={true}
                                                 className="bx--card__eyebrow"
                                               >
                                                 Topic
@@ -16611,6 +16631,7 @@ exports[`Storyshots Components|ContentBlockCards With Images 1`] = `
                                               className="bx--card__content"
                                             >
                                               <p
+                                                aria-hidden={true}
                                                 className="bx--card__eyebrow"
                                               >
                                                 Blog
@@ -16857,6 +16878,7 @@ exports[`Storyshots Components|ContentBlockCards With Images 1`] = `
                                               className="bx--card__content"
                                             >
                                               <p
+                                                aria-hidden={true}
                                                 className="bx--card__eyebrow"
                                               >
                                                 Topic
@@ -40001,6 +40023,7 @@ exports[`Storyshots Components|Dotcom Shell Default (footer language only) 1`] =
                                                 className="bx--card__content"
                                               >
                                                 <p
+                                                  aria-hidden={true}
                                                   className="bx--card__eyebrow"
                                                 >
                                                   scelerisque purus
@@ -42290,6 +42313,7 @@ exports[`Storyshots Components|Dotcom Shell Default (footer language only) 1`] =
                                                                     className="bx--card__content"
                                                                   >
                                                                     <p
+                                                                      aria-hidden={true}
                                                                       className="bx--card__eyebrow"
                                                                     >
                                                                       Topic
@@ -42536,6 +42560,7 @@ exports[`Storyshots Components|Dotcom Shell Default (footer language only) 1`] =
                                                                     className="bx--card__content"
                                                                   >
                                                                     <p
+                                                                      aria-hidden={true}
                                                                       className="bx--card__eyebrow"
                                                                     >
                                                                       Topic
@@ -42782,6 +42807,7 @@ exports[`Storyshots Components|Dotcom Shell Default (footer language only) 1`] =
                                                                     className="bx--card__content"
                                                                   >
                                                                     <p
+                                                                      aria-hidden={true}
                                                                       className="bx--card__eyebrow"
                                                                     >
                                                                       Topic
@@ -46892,6 +46918,7 @@ exports[`Storyshots Components|Dotcom Shell Default 1`] = `
                                               className="bx--card__content"
                                             >
                                               <p
+                                                aria-hidden={true}
                                                 className="bx--card__eyebrow"
                                               >
                                                 scelerisque purus
@@ -49181,6 +49208,7 @@ exports[`Storyshots Components|Dotcom Shell Default 1`] = `
                                                                   className="bx--card__content"
                                                                 >
                                                                   <p
+                                                                    aria-hidden={true}
                                                                     className="bx--card__eyebrow"
                                                                   >
                                                                     Topic
@@ -49427,6 +49455,7 @@ exports[`Storyshots Components|Dotcom Shell Default 1`] = `
                                                                   className="bx--card__content"
                                                                 >
                                                                   <p
+                                                                    aria-hidden={true}
                                                                     className="bx--card__eyebrow"
                                                                   >
                                                                     Topic
@@ -49673,6 +49702,7 @@ exports[`Storyshots Components|Dotcom Shell Default 1`] = `
                                                                   className="bx--card__content"
                                                                 >
                                                                   <p
+                                                                    aria-hidden={true}
                                                                     className="bx--card__eyebrow"
                                                                   >
                                                                     Topic
@@ -52761,6 +52791,7 @@ exports[`Storyshots Components|Dotcom Shell Search open 1`] = `
                                                 className="bx--card__content"
                                               >
                                                 <p
+                                                  aria-hidden={true}
                                                   className="bx--card__eyebrow"
                                                 >
                                                   scelerisque purus
@@ -55050,6 +55081,7 @@ exports[`Storyshots Components|Dotcom Shell Search open 1`] = `
                                                                     className="bx--card__content"
                                                                   >
                                                                     <p
+                                                                      aria-hidden={true}
                                                                       className="bx--card__eyebrow"
                                                                     >
                                                                       Topic
@@ -55296,6 +55328,7 @@ exports[`Storyshots Components|Dotcom Shell Search open 1`] = `
                                                                     className="bx--card__content"
                                                                   >
                                                                     <p
+                                                                      aria-hidden={true}
                                                                       className="bx--card__eyebrow"
                                                                     >
                                                                       Topic
@@ -55542,6 +55575,7 @@ exports[`Storyshots Components|Dotcom Shell Search open 1`] = `
                                                                     className="bx--card__content"
                                                                   >
                                                                     <p
+                                                                      aria-hidden={true}
                                                                       className="bx--card__eyebrow"
                                                                     >
                                                                       Topic
@@ -61267,6 +61301,7 @@ exports[`Storyshots Components|Dotcom Shell With L1 1`] = `
                                                 className="bx--card__content"
                                               >
                                                 <p
+                                                  aria-hidden={true}
                                                   className="bx--card__eyebrow"
                                                 >
                                                   scelerisque purus
@@ -63556,6 +63591,7 @@ exports[`Storyshots Components|Dotcom Shell With L1 1`] = `
                                                                     className="bx--card__content"
                                                                   >
                                                                     <p
+                                                                      aria-hidden={true}
                                                                       className="bx--card__eyebrow"
                                                                     >
                                                                       Topic
@@ -63802,6 +63838,7 @@ exports[`Storyshots Components|Dotcom Shell With L1 1`] = `
                                                                     className="bx--card__content"
                                                                   >
                                                                     <p
+                                                                      aria-hidden={true}
                                                                       className="bx--card__eyebrow"
                                                                     >
                                                                       Topic
@@ -64048,6 +64085,7 @@ exports[`Storyshots Components|Dotcom Shell With L1 1`] = `
                                                                     className="bx--card__content"
                                                                   >
                                                                     <p
+                                                                      aria-hidden={true}
                                                                       className="bx--card__eyebrow"
                                                                     >
                                                                       Topic
@@ -67440,6 +67478,7 @@ exports[`Storyshots Components|Dotcom Shell With micro footer (language only) 1`
                                                 className="bx--card__content"
                                               >
                                                 <p
+                                                  aria-hidden={true}
                                                   className="bx--card__eyebrow"
                                                 >
                                                   scelerisque purus
@@ -69729,6 +69768,7 @@ exports[`Storyshots Components|Dotcom Shell With micro footer (language only) 1`
                                                                     className="bx--card__content"
                                                                   >
                                                                     <p
+                                                                      aria-hidden={true}
                                                                       className="bx--card__eyebrow"
                                                                     >
                                                                       Topic
@@ -69975,6 +70015,7 @@ exports[`Storyshots Components|Dotcom Shell With micro footer (language only) 1`
                                                                     className="bx--card__content"
                                                                   >
                                                                     <p
+                                                                      aria-hidden={true}
                                                                       className="bx--card__eyebrow"
                                                                     >
                                                                       Topic
@@ -70221,6 +70262,7 @@ exports[`Storyshots Components|Dotcom Shell With micro footer (language only) 1`
                                                                     className="bx--card__content"
                                                                   >
                                                                     <p
+                                                                      aria-hidden={true}
                                                                       className="bx--card__eyebrow"
                                                                     >
                                                                       Topic
@@ -73375,6 +73417,7 @@ exports[`Storyshots Components|Dotcom Shell With micro footer 1`] = `
                                                 className="bx--card__content"
                                               >
                                                 <p
+                                                  aria-hidden={true}
                                                   className="bx--card__eyebrow"
                                                 >
                                                   scelerisque purus
@@ -75664,6 +75707,7 @@ exports[`Storyshots Components|Dotcom Shell With micro footer 1`] = `
                                                                     className="bx--card__content"
                                                                   >
                                                                     <p
+                                                                      aria-hidden={true}
                                                                       className="bx--card__eyebrow"
                                                                     >
                                                                       Topic
@@ -75910,6 +75954,7 @@ exports[`Storyshots Components|Dotcom Shell With micro footer 1`] = `
                                                                     className="bx--card__content"
                                                                   >
                                                                     <p
+                                                                      aria-hidden={true}
                                                                       className="bx--card__eyebrow"
                                                                     >
                                                                       Topic
@@ -76156,6 +76201,7 @@ exports[`Storyshots Components|Dotcom Shell With micro footer 1`] = `
                                                                     className="bx--card__content"
                                                                   >
                                                                     <p
+                                                                      aria-hidden={true}
                                                                       className="bx--card__eyebrow"
                                                                     >
                                                                       Topic
@@ -79043,6 +79089,7 @@ exports[`Storyshots Components|Dotcom Shell With platform 1`] = `
                                                 className="bx--card__content"
                                               >
                                                 <p
+                                                  aria-hidden={true}
                                                   className="bx--card__eyebrow"
                                                 >
                                                   scelerisque purus
@@ -81332,6 +81379,7 @@ exports[`Storyshots Components|Dotcom Shell With platform 1`] = `
                                                                     className="bx--card__content"
                                                                   >
                                                                     <p
+                                                                      aria-hidden={true}
                                                                       className="bx--card__eyebrow"
                                                                     >
                                                                       Topic
@@ -81578,6 +81626,7 @@ exports[`Storyshots Components|Dotcom Shell With platform 1`] = `
                                                                     className="bx--card__content"
                                                                   >
                                                                     <p
+                                                                      aria-hidden={true}
                                                                       className="bx--card__eyebrow"
                                                                     >
                                                                       Topic
@@ -81824,6 +81873,7 @@ exports[`Storyshots Components|Dotcom Shell With platform 1`] = `
                                                                     className="bx--card__content"
                                                                   >
                                                                     <p
+                                                                      aria-hidden={true}
                                                                       className="bx--card__eyebrow"
                                                                     >
                                                                       Topic
@@ -85223,6 +85273,7 @@ exports[`Storyshots Components|Dotcom Shell With short footer (language only) 1`
                                                 className="bx--card__content"
                                               >
                                                 <p
+                                                  aria-hidden={true}
                                                   className="bx--card__eyebrow"
                                                 >
                                                   scelerisque purus
@@ -87512,6 +87563,7 @@ exports[`Storyshots Components|Dotcom Shell With short footer (language only) 1`
                                                                     className="bx--card__content"
                                                                   >
                                                                     <p
+                                                                      aria-hidden={true}
                                                                       className="bx--card__eyebrow"
                                                                     >
                                                                       Topic
@@ -87758,6 +87810,7 @@ exports[`Storyshots Components|Dotcom Shell With short footer (language only) 1`
                                                                     className="bx--card__content"
                                                                   >
                                                                     <p
+                                                                      aria-hidden={true}
                                                                       className="bx--card__eyebrow"
                                                                     >
                                                                       Topic
@@ -88004,6 +88057,7 @@ exports[`Storyshots Components|Dotcom Shell With short footer (language only) 1`
                                                                     className="bx--card__content"
                                                                   >
                                                                     <p
+                                                                      aria-hidden={true}
                                                                       className="bx--card__eyebrow"
                                                                     >
                                                                       Topic
@@ -92180,6 +92234,7 @@ exports[`Storyshots Components|Dotcom Shell With short footer 1`] = `
                                                 className="bx--card__content"
                                               >
                                                 <p
+                                                  aria-hidden={true}
                                                   className="bx--card__eyebrow"
                                                 >
                                                   scelerisque purus
@@ -94469,6 +94524,7 @@ exports[`Storyshots Components|Dotcom Shell With short footer 1`] = `
                                                                     className="bx--card__content"
                                                                   >
                                                                     <p
+                                                                      aria-hidden={true}
                                                                       className="bx--card__eyebrow"
                                                                     >
                                                                       Topic
@@ -94715,6 +94771,7 @@ exports[`Storyshots Components|Dotcom Shell With short footer 1`] = `
                                                                     className="bx--card__content"
                                                                   >
                                                                     <p
+                                                                      aria-hidden={true}
                                                                       className="bx--card__eyebrow"
                                                                     >
                                                                       Topic
@@ -94961,6 +95018,7 @@ exports[`Storyshots Components|Dotcom Shell With short footer 1`] = `
                                                                     className="bx--card__content"
                                                                   >
                                                                     <p
+                                                                      aria-hidden={true}
                                                                       className="bx--card__eyebrow"
                                                                     >
                                                                       Topic
@@ -97006,6 +97064,7 @@ exports[`Storyshots Components|FeatureCardBlockLarge Default 1`] = `
                           className="bx--card__content"
                         >
                           <p
+                            aria-hidden={true}
                             className="bx--card__eyebrow"
                           >
                             This is an eyebrow
diff --git a/packages/react/src/components/Card/Card.js b/packages/react/src/components/Card/Card.js
index 6d3d4303591..6114a79377b 100644
--- a/packages/react/src/components/Card/Card.js
+++ b/packages/react/src/components/Card/Card.js
@@ -1,5 +1,5 @@
 /**
- * Copyright IBM Corp. 2016, 2020
+ * Copyright IBM Corp. 2016, 2021
  *
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
@@ -80,7 +80,11 @@ export const Card = ({
       {image && <Image {...image} classname={`${prefix}--card__img`} />}
       <div className={`${prefix}--card__wrapper`} ref={refWrapper}>
         <div className={`${prefix}--card__content`}>
-          {eyebrow && <p className={`${prefix}--card__eyebrow`}>{eyebrow}</p>}
+          {eyebrow && (
+            <p className={`${prefix}--card__eyebrow`} aria-hidden={true}>
+              {eyebrow}
+            </p>
+          )}
           {heading && <h3 className={`${prefix}--card__heading`}>{heading}</h3>}
           {optionalContent(copy)}
           {renderFooter(cta, pictogram)}
@@ -121,7 +125,9 @@ function renderFooter(cta, pictogram) {
           [`${prefix}--card__footer__copy`]: cta?.copy,
         })}>
         {cta?.copy && !pictogram && (
-          <span className={`${prefix}--card__cta__copy`}>{cta?.copy}</span>
+          <span className={`${prefix}--card__cta__copy`} aria-hidden={true}>
+            {cta?.copy}
+          </span>
         )}
         {cta?.icon?.src && !pictogram && (
           <cta.icon.src className={`${prefix}--card__cta`} {...cta?.icon} />
diff --git a/packages/web-components/src/components/card/card-eyebrow.ts b/packages/web-components/src/components/card/card-eyebrow.ts
index 30375215e66..530d4475641 100644
--- a/packages/web-components/src/components/card/card-eyebrow.ts
+++ b/packages/web-components/src/components/card/card-eyebrow.ts
@@ -1,7 +1,7 @@
 /**
  * @license
  *
- * Copyright IBM Corp. 2020
+ * Copyright IBM Corp. 2020, 2021
  *
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
@@ -25,6 +25,12 @@ class DDSCardEyebrow extends LitElement {
   @property({ reflect: true })
   slot = 'eyebrow';
 
+  updated() {
+    if (!this.hasAttribute('aria-hidden')) {
+      this.setAttribute('aria-hidden', 'true');
+    }
+  }
+
   render() {
     return html`
       <slot></slot>
diff --git a/packages/web-components/src/components/card/card-footer.ts b/packages/web-components/src/components/card/card-footer.ts
index da6a4216c36..7c7822ceac8 100644
--- a/packages/web-components/src/components/card/card-footer.ts
+++ b/packages/web-components/src/components/card/card-footer.ts
@@ -1,7 +1,7 @@
 /**
  * @license
  *
- * Copyright IBM Corp. 2020
+ * Copyright IBM Corp. 2020, 2021
  *
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
@@ -99,6 +99,11 @@ class DDSCardFooter extends DDSLinkWithIcon {
 
   updated() {
     super.updated();
+
+    if (!this.hasAttribute('aria-hidden')) {
+      this.setAttribute('aria-hidden', 'true');
+    }
+
     const { iconPlacement, _staticNode: staticNode, _linkNode: linkNode } = this;
     const targetNode = linkNode ?? staticNode;
     targetNode!.classList.add(`${prefix}--card__footer`);
diff --git a/packages/web-components/tests/snapshots/dds-masthead-composite.md b/packages/web-components/tests/snapshots/dds-masthead-composite.md
index 6f65c5b588e..3b3d6770483 100644
--- a/packages/web-components/tests/snapshots/dds-masthead-composite.md
+++ b/packages/web-components/tests/snapshots/dds-masthead-composite.md
@@ -7,7 +7,7 @@
 ```
 <dds-masthead-global-bar>
   <dds-masthead-profile role="listitem">
-    <dds-masthead-profile-item href="https://idaas.iam.ibm.com/idaas/oidc/endpoint/default/authorize?response_type=token&client_id=v18loginprod&state=http%3A%2F%2Flocalhost%3A9876%2Fcontext.html&redirect_uri=https%3A%2F%2Fmyibm.ibm.com%2FOIDCHandler.html&scope=openid">
+    <dds-masthead-profile-item href="https://idaas.iam.ibm.com/idaas/oidc/endpoint/default/authorize?response_type=token&client_id=v18loginprod&state=http%3A%2F%2Flocalhost%3A9877%2Fcontext.html&redirect_uri=https%3A%2F%2Fmyibm.ibm.com%2FOIDCHandler.html&scope=openid">
       Log in
     </dds-masthead-profile-item>
   </dds-masthead-profile>

From 787bf090f587dfd61c6abd032243025867a1bca0 Mon Sep 17 00:00:00 2001
From: IgnacioBecerra <i1becerr@ucsd.edu>
Date: Tue, 12 Jan 2021 06:33:03 -0800
Subject: [PATCH 2/4] chore(card): updated snapshots

---
 .../__snapshots__/storyshots.test.js.snap          | 14 ++++++++++++++
 1 file changed, 14 insertions(+)

diff --git a/packages/react/src/__tests__/__snapshots__/storyshots.test.js.snap b/packages/react/src/__tests__/__snapshots__/storyshots.test.js.snap
index 7d19e4a7bc0..f12a7152510 100644
--- a/packages/react/src/__tests__/__snapshots__/storyshots.test.js.snap
+++ b/packages/react/src/__tests__/__snapshots__/storyshots.test.js.snap
@@ -38303,6 +38303,7 @@ exports[`Storyshots Components|Dotcom Shell Default (footer language only) 1`] =
                                     <ul
                                       aria-label="IBM"
                                       className="bx--header__menu-bar"
+                                      role="menubar"
                                     />
                                   </nav>
                                 </HeaderNavigation>
@@ -45197,6 +45198,7 @@ exports[`Storyshots Components|Dotcom Shell Default 1`] = `
                                   <ul
                                     aria-label="IBM"
                                     className="bx--header__menu-bar"
+                                    role="menubar"
                                   />
                                 </nav>
                               </HeaderNavigation>
@@ -50899,6 +50901,7 @@ exports[`Storyshots Components|Dotcom Shell Search open 1`] = `
                                     <ul
                                       aria-label="IBM"
                                       className="bx--header__menu-bar"
+                                      role="menubar"
                                     />
                                   </nav>
                                 </HeaderNavigation>
@@ -58561,6 +58564,7 @@ exports[`Storyshots Components|Dotcom Shell With L1 1`] = `
                                 <ul
                                   aria-label=""
                                   className="bx--header__menu-bar"
+                                  role="menubar"
                                 >
                                   <ForwardRef
                                     aria-label="Lorem ipsum dolor sit amet"
@@ -65754,6 +65758,7 @@ exports[`Storyshots Components|Dotcom Shell With micro footer (language only) 1`
                                     <ul
                                       aria-label="IBM"
                                       className="bx--header__menu-bar"
+                                      role="menubar"
                                     />
                                   </nav>
                                 </HeaderNavigation>
@@ -71692,6 +71697,7 @@ exports[`Storyshots Components|Dotcom Shell With micro footer 1`] = `
                                     <ul
                                       aria-label="IBM"
                                       className="bx--header__menu-bar"
+                                      role="menubar"
                                     />
                                   </nav>
                                 </HeaderNavigation>
@@ -77363,6 +77369,7 @@ exports[`Storyshots Components|Dotcom Shell With platform 1`] = `
                                     <ul
                                       aria-label="IBM"
                                       className="bx--header__menu-bar"
+                                      role="menubar"
                                     />
                                   </nav>
                                 </HeaderNavigation>
@@ -83546,6 +83553,7 @@ exports[`Storyshots Components|Dotcom Shell With short footer (language only) 1`
                                     <ul
                                       aria-label="IBM"
                                       className="bx--header__menu-bar"
+                                      role="menubar"
                                     />
                                   </nav>
                                 </HeaderNavigation>
@@ -90506,6 +90514,7 @@ exports[`Storyshots Components|Dotcom Shell With short footer 1`] = `
                                     <ul
                                       aria-label="IBM"
                                       className="bx--header__menu-bar"
+                                      role="menubar"
                                     />
                                   </nav>
                                 </HeaderNavigation>
@@ -113038,6 +113047,7 @@ exports[`Storyshots Components|Masthead Default 1`] = `
                                 <ul
                                   aria-label="IBM"
                                   className="bx--header__menu-bar"
+                                  role="menubar"
                                 />
                               </nav>
                             </HeaderNavigation>
@@ -113555,6 +113565,7 @@ exports[`Storyshots Components|Masthead Search open by default 1`] = `
                                 <ul
                                   aria-label="IBM"
                                   className="bx--header__menu-bar"
+                                  role="menubar"
                                 />
                               </nav>
                             </HeaderNavigation>
@@ -115564,6 +115575,7 @@ exports[`Storyshots Components|Masthead With Custom Navigation 1`] = `
                                   <ul
                                     aria-label="IBM"
                                     className="bx--header__menu-bar"
+                                    role="menubar"
                                   >
                                     <ForwardRef
                                       aria-label="Lorem ipsum dolor sit amet"
@@ -118922,6 +118934,7 @@ exports[`Storyshots Components|Masthead With L 1 1`] = `
                               <ul
                                 aria-label=""
                                 className="bx--header__menu-bar"
+                                role="menubar"
                               >
                                 <ForwardRef
                                   aria-label="Lorem ipsum dolor sit amet"
@@ -120587,6 +120600,7 @@ exports[`Storyshots Components|Masthead With Platform 1`] = `
                                   <ul
                                     aria-label="IBM"
                                     className="bx--header__menu-bar"
+                                    role="menubar"
                                   />
                                 </nav>
                               </HeaderNavigation>

From c1233ecc8c34774a9306a7af8139b06525d681a7 Mon Sep 17 00:00:00 2001
From: IgnacioBecerra <i1becerr@ucsd.edu>
Date: Tue, 12 Jan 2021 06:59:45 -0800
Subject: [PATCH 3/4] chore(card): updated snapshots after yarn reset

---
 .../__snapshots__/storyshots.test.js.snap          | 14 --------------
 1 file changed, 14 deletions(-)

diff --git a/packages/react/src/__tests__/__snapshots__/storyshots.test.js.snap b/packages/react/src/__tests__/__snapshots__/storyshots.test.js.snap
index f12a7152510..7d19e4a7bc0 100644
--- a/packages/react/src/__tests__/__snapshots__/storyshots.test.js.snap
+++ b/packages/react/src/__tests__/__snapshots__/storyshots.test.js.snap
@@ -38303,7 +38303,6 @@ exports[`Storyshots Components|Dotcom Shell Default (footer language only) 1`] =
                                     <ul
                                       aria-label="IBM"
                                       className="bx--header__menu-bar"
-                                      role="menubar"
                                     />
                                   </nav>
                                 </HeaderNavigation>
@@ -45198,7 +45197,6 @@ exports[`Storyshots Components|Dotcom Shell Default 1`] = `
                                   <ul
                                     aria-label="IBM"
                                     className="bx--header__menu-bar"
-                                    role="menubar"
                                   />
                                 </nav>
                               </HeaderNavigation>
@@ -50901,7 +50899,6 @@ exports[`Storyshots Components|Dotcom Shell Search open 1`] = `
                                     <ul
                                       aria-label="IBM"
                                       className="bx--header__menu-bar"
-                                      role="menubar"
                                     />
                                   </nav>
                                 </HeaderNavigation>
@@ -58564,7 +58561,6 @@ exports[`Storyshots Components|Dotcom Shell With L1 1`] = `
                                 <ul
                                   aria-label=""
                                   className="bx--header__menu-bar"
-                                  role="menubar"
                                 >
                                   <ForwardRef
                                     aria-label="Lorem ipsum dolor sit amet"
@@ -65758,7 +65754,6 @@ exports[`Storyshots Components|Dotcom Shell With micro footer (language only) 1`
                                     <ul
                                       aria-label="IBM"
                                       className="bx--header__menu-bar"
-                                      role="menubar"
                                     />
                                   </nav>
                                 </HeaderNavigation>
@@ -71697,7 +71692,6 @@ exports[`Storyshots Components|Dotcom Shell With micro footer 1`] = `
                                     <ul
                                       aria-label="IBM"
                                       className="bx--header__menu-bar"
-                                      role="menubar"
                                     />
                                   </nav>
                                 </HeaderNavigation>
@@ -77369,7 +77363,6 @@ exports[`Storyshots Components|Dotcom Shell With platform 1`] = `
                                     <ul
                                       aria-label="IBM"
                                       className="bx--header__menu-bar"
-                                      role="menubar"
                                     />
                                   </nav>
                                 </HeaderNavigation>
@@ -83553,7 +83546,6 @@ exports[`Storyshots Components|Dotcom Shell With short footer (language only) 1`
                                     <ul
                                       aria-label="IBM"
                                       className="bx--header__menu-bar"
-                                      role="menubar"
                                     />
                                   </nav>
                                 </HeaderNavigation>
@@ -90514,7 +90506,6 @@ exports[`Storyshots Components|Dotcom Shell With short footer 1`] = `
                                     <ul
                                       aria-label="IBM"
                                       className="bx--header__menu-bar"
-                                      role="menubar"
                                     />
                                   </nav>
                                 </HeaderNavigation>
@@ -113047,7 +113038,6 @@ exports[`Storyshots Components|Masthead Default 1`] = `
                                 <ul
                                   aria-label="IBM"
                                   className="bx--header__menu-bar"
-                                  role="menubar"
                                 />
                               </nav>
                             </HeaderNavigation>
@@ -113565,7 +113555,6 @@ exports[`Storyshots Components|Masthead Search open by default 1`] = `
                                 <ul
                                   aria-label="IBM"
                                   className="bx--header__menu-bar"
-                                  role="menubar"
                                 />
                               </nav>
                             </HeaderNavigation>
@@ -115575,7 +115564,6 @@ exports[`Storyshots Components|Masthead With Custom Navigation 1`] = `
                                   <ul
                                     aria-label="IBM"
                                     className="bx--header__menu-bar"
-                                    role="menubar"
                                   >
                                     <ForwardRef
                                       aria-label="Lorem ipsum dolor sit amet"
@@ -118934,7 +118922,6 @@ exports[`Storyshots Components|Masthead With L 1 1`] = `
                               <ul
                                 aria-label=""
                                 className="bx--header__menu-bar"
-                                role="menubar"
                               >
                                 <ForwardRef
                                   aria-label="Lorem ipsum dolor sit amet"
@@ -120600,7 +120587,6 @@ exports[`Storyshots Components|Masthead With Platform 1`] = `
                                   <ul
                                     aria-label="IBM"
                                     className="bx--header__menu-bar"
-                                    role="menubar"
                                   />
                                 </nav>
                               </HeaderNavigation>

From 89abb6759974d7d41ef9479746623afe572c6f57 Mon Sep 17 00:00:00 2001
From: IgnacioBecerra <i1becerr@ucsd.edu>
Date: Tue, 12 Jan 2021 07:43:11 -0800
Subject: [PATCH 4/4] chore(card): web componnt snapshot update

---
 .../web-components/tests/snapshots/dds-masthead-composite.md    | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/web-components/tests/snapshots/dds-masthead-composite.md b/packages/web-components/tests/snapshots/dds-masthead-composite.md
index 3b3d6770483..6f65c5b588e 100644
--- a/packages/web-components/tests/snapshots/dds-masthead-composite.md
+++ b/packages/web-components/tests/snapshots/dds-masthead-composite.md
@@ -7,7 +7,7 @@
 ```
 <dds-masthead-global-bar>
   <dds-masthead-profile role="listitem">
-    <dds-masthead-profile-item href="https://idaas.iam.ibm.com/idaas/oidc/endpoint/default/authorize?response_type=token&client_id=v18loginprod&state=http%3A%2F%2Flocalhost%3A9877%2Fcontext.html&redirect_uri=https%3A%2F%2Fmyibm.ibm.com%2FOIDCHandler.html&scope=openid">
+    <dds-masthead-profile-item href="https://idaas.iam.ibm.com/idaas/oidc/endpoint/default/authorize?response_type=token&client_id=v18loginprod&state=http%3A%2F%2Flocalhost%3A9876%2Fcontext.html&redirect_uri=https%3A%2F%2Fmyibm.ibm.com%2FOIDCHandler.html&scope=openid">
       Log in
     </dds-masthead-profile-item>
   </dds-masthead-profile>