From c44b6a595d7e71926e3fb843b48787c1f14904ab Mon Sep 17 00:00:00 2001
From: Ariella Gilmore <ariellalgilmore@gmail.com>
Date: Fri, 13 Nov 2020 10:50:53 -0800
Subject: [PATCH] fix(masthead): add aria-hidden to overflow nav carets (#4489)

### Related Ticket(s)

#4182

### Description

add aria-hidden to caret buttons for screen readers using up and down arrows

### Changelog

**New**

- add aria-hidden="true" to carets

<!-- React and Web Component deploy previews are enabled by default. -->
<!-- To enable additional available deploy previews, apply the following -->
<!-- labels for the corresponding package: -->
<!-- *** "package: services": Services -->
<!-- *** "package: utilities": Utilities -->
<!-- *** "package: styles": Carbon Expressive -->
<!-- *** "RTL": React / Web Components (RTL) -->
<!-- *** "feature flag": React / Web Components (experimental) -->
---
 .../__snapshots__/storyshots.test.js.snap     | 26 +++++++++++++++++++
 .../components/Masthead/HeaderNavContainer.js |  2 ++
 2 files changed, 28 insertions(+)

diff --git a/packages/react/src/__tests__/__snapshots__/storyshots.test.js.snap b/packages/react/src/__tests__/__snapshots__/storyshots.test.js.snap
index 65ad682cac9..4ba1a6d2592 100644
--- a/packages/react/src/__tests__/__snapshots__/storyshots.test.js.snap
+++ b/packages/react/src/__tests__/__snapshots__/storyshots.test.js.snap
@@ -32606,6 +32606,7 @@ exports[`Storyshots Components|Dotcom Shell Default (footer language only) 1`] =
                                 </HeaderNavigation>
                               </div>
                               <button
+                                aria-hidden="true"
                                 aria-label="Masthead left caret"
                                 className="bx--header__nav-caret-left"
                                 hidden={true}
@@ -32639,6 +32640,7 @@ exports[`Storyshots Components|Dotcom Shell Default (footer language only) 1`] =
                                 </ForwardRef(CaretLeft20)>
                               </button>
                               <button
+                                aria-hidden="true"
                                 aria-label="Masthead right caret"
                                 className="bx--header__nav-caret-right"
                                 hidden={true}
@@ -39420,6 +39422,7 @@ exports[`Storyshots Components|Dotcom Shell Default 1`] = `
                               </HeaderNavigation>
                             </div>
                             <button
+                              aria-hidden="true"
                               aria-label="Masthead left caret"
                               className="bx--header__nav-caret-left"
                               hidden={true}
@@ -39453,6 +39456,7 @@ exports[`Storyshots Components|Dotcom Shell Default 1`] = `
                               </ForwardRef(CaretLeft20)>
                             </button>
                             <button
+                              aria-hidden="true"
                               aria-label="Masthead right caret"
                               className="bx--header__nav-caret-right"
                               hidden={true}
@@ -45083,6 +45087,7 @@ exports[`Storyshots Components|Dotcom Shell Search open 1`] = `
                                 </HeaderNavigation>
                               </div>
                               <button
+                                aria-hidden="true"
                                 aria-label="Masthead left caret"
                                 className="bx--header__nav-caret-left"
                                 hidden={true}
@@ -45116,6 +45121,7 @@ exports[`Storyshots Components|Dotcom Shell Search open 1`] = `
                                 </ForwardRef(CaretLeft20)>
                               </button>
                               <button
+                                aria-hidden="true"
                                 aria-label="Masthead right caret"
                                 className="bx--header__nav-caret-right"
                                 hidden={true}
@@ -53905,6 +53911,7 @@ exports[`Storyshots Components|Dotcom Shell With L1 1`] = `
                             </HeaderNavigation>
                           </div>
                           <button
+                            aria-hidden="true"
                             aria-label="Masthead left caret"
                             className="bx--header__nav-caret-left"
                             hidden={true}
@@ -53938,6 +53945,7 @@ exports[`Storyshots Components|Dotcom Shell With L1 1`] = `
                             </ForwardRef(CaretLeft20)>
                           </button>
                           <button
+                            aria-hidden="true"
                             aria-label="Masthead right caret"
                             className="bx--header__nav-caret-right"
                             hidden={true}
@@ -59629,6 +59637,7 @@ exports[`Storyshots Components|Dotcom Shell With micro footer (language only) 1`
                                 </HeaderNavigation>
                               </div>
                               <button
+                                aria-hidden="true"
                                 aria-label="Masthead left caret"
                                 className="bx--header__nav-caret-left"
                                 hidden={true}
@@ -59662,6 +59671,7 @@ exports[`Storyshots Components|Dotcom Shell With micro footer (language only) 1`
                                 </ForwardRef(CaretLeft20)>
                               </button>
                               <button
+                                aria-hidden="true"
                                 aria-label="Masthead right caret"
                                 className="bx--header__nav-caret-right"
                                 hidden={true}
@@ -65487,6 +65497,7 @@ exports[`Storyshots Components|Dotcom Shell With micro footer 1`] = `
                                 </HeaderNavigation>
                               </div>
                               <button
+                                aria-hidden="true"
                                 aria-label="Masthead left caret"
                                 className="bx--header__nav-caret-left"
                                 hidden={true}
@@ -65520,6 +65531,7 @@ exports[`Storyshots Components|Dotcom Shell With micro footer 1`] = `
                                 </ForwardRef(CaretLeft20)>
                               </button>
                               <button
+                                aria-hidden="true"
                                 aria-label="Masthead right caret"
                                 className="bx--header__nav-caret-right"
                                 hidden={true}
@@ -71076,6 +71088,7 @@ exports[`Storyshots Components|Dotcom Shell With platform 1`] = `
                                 </HeaderNavigation>
                               </div>
                               <button
+                                aria-hidden="true"
                                 aria-label="Masthead left caret"
                                 className="bx--header__nav-caret-left"
                                 hidden={true}
@@ -71109,6 +71122,7 @@ exports[`Storyshots Components|Dotcom Shell With platform 1`] = `
                                 </ForwardRef(CaretLeft20)>
                               </button>
                               <button
+                                aria-hidden="true"
                                 aria-label="Masthead right caret"
                                 className="bx--header__nav-caret-right"
                                 hidden={true}
@@ -77032,6 +77046,7 @@ exports[`Storyshots Components|Dotcom Shell With short footer (language only) 1`
                                 </HeaderNavigation>
                               </div>
                               <button
+                                aria-hidden="true"
                                 aria-label="Masthead left caret"
                                 className="bx--header__nav-caret-left"
                                 hidden={true}
@@ -77065,6 +77080,7 @@ exports[`Storyshots Components|Dotcom Shell With short footer (language only) 1`
                                 </ForwardRef(CaretLeft20)>
                               </button>
                               <button
+                                aria-hidden="true"
                                 aria-label="Masthead right caret"
                                 className="bx--header__nav-caret-right"
                                 hidden={true}
@@ -83912,6 +83928,7 @@ exports[`Storyshots Components|Dotcom Shell With short footer 1`] = `
                                 </HeaderNavigation>
                               </div>
                               <button
+                                aria-hidden="true"
                                 aria-label="Masthead left caret"
                                 className="bx--header__nav-caret-left"
                                 hidden={true}
@@ -83945,6 +83962,7 @@ exports[`Storyshots Components|Dotcom Shell With short footer 1`] = `
                                 </ForwardRef(CaretLeft20)>
                               </button>
                               <button
+                                aria-hidden="true"
                                 aria-label="Masthead right caret"
                                 className="bx--header__nav-caret-right"
                                 hidden={true}
@@ -103432,6 +103450,7 @@ exports[`Storyshots Components|Masthead Default 1`] = `
                             </HeaderNavigation>
                           </div>
                           <button
+                            aria-hidden="true"
                             aria-label="Masthead left caret"
                             className="bx--header__nav-caret-left"
                             hidden={true}
@@ -103465,6 +103484,7 @@ exports[`Storyshots Components|Masthead Default 1`] = `
                             </ForwardRef(CaretLeft20)>
                           </button>
                           <button
+                            aria-hidden="true"
                             aria-label="Masthead right caret"
                             className="bx--header__nav-caret-right"
                             hidden={true}
@@ -103916,6 +103936,7 @@ exports[`Storyshots Components|Masthead Search open by default 1`] = `
                             </HeaderNavigation>
                           </div>
                           <button
+                            aria-hidden="true"
                             aria-label="Masthead left caret"
                             className="bx--header__nav-caret-left"
                             hidden={true}
@@ -103949,6 +103970,7 @@ exports[`Storyshots Components|Masthead Search open by default 1`] = `
                             </ForwardRef(CaretLeft20)>
                           </button>
                           <button
+                            aria-hidden="true"
                             aria-label="Masthead right caret"
                             className="bx--header__nav-caret-right"
                             hidden={true}
@@ -107328,6 +107350,7 @@ exports[`Storyshots Components|Masthead With L 1 1`] = `
                           </HeaderNavigation>
                         </div>
                         <button
+                          aria-hidden="true"
                           aria-label="Masthead left caret"
                           className="bx--header__nav-caret-left"
                           hidden={true}
@@ -107361,6 +107384,7 @@ exports[`Storyshots Components|Masthead With L 1 1`] = `
                           </ForwardRef(CaretLeft20)>
                         </button>
                         <button
+                          aria-hidden="true"
                           aria-label="Masthead right caret"
                           className="bx--header__nav-caret-right"
                           hidden={true}
@@ -107675,6 +107699,7 @@ exports[`Storyshots Components|Masthead With Platform 1`] = `
                               </HeaderNavigation>
                             </div>
                             <button
+                              aria-hidden="true"
                               aria-label="Masthead left caret"
                               className="bx--header__nav-caret-left"
                               hidden={true}
@@ -107708,6 +107733,7 @@ exports[`Storyshots Components|Masthead With Platform 1`] = `
                               </ForwardRef(CaretLeft20)>
                             </button>
                             <button
+                              aria-hidden="true"
                               aria-label="Masthead right caret"
                               className="bx--header__nav-caret-right"
                               hidden={true}
diff --git a/packages/react/src/components/Masthead/HeaderNavContainer.js b/packages/react/src/components/Masthead/HeaderNavContainer.js
index e85a80263b2..dbfefcb46a7 100644
--- a/packages/react/src/components/Masthead/HeaderNavContainer.js
+++ b/packages/react/src/components/Masthead/HeaderNavContainer.js
@@ -195,6 +195,7 @@ const HeaderNavContainer = ({ children }) => {
           onClick={paginateLeft}
           ref={caretLeftRef}
           tabIndex="-1"
+          aria-hidden="true"
           hidden>
           <CaretLeft20 />
         </button>
@@ -204,6 +205,7 @@ const HeaderNavContainer = ({ children }) => {
           onClick={paginateRight}
           ref={caretRightRef}
           tabIndex="-1"
+          aria-hidden="true"
           hidden>
           <CaretRight20 />
         </button>