Fix search keyboard accessibility with reposition in layout (#1386)

* fix: search accessibility with new position in layout
adobe · Feb 16, 2023 · 8f4df67 · 8f4df67
1 parent 42f2043
commit 8f4df67
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 17 deletions.
diff --git a/packages/gatsby-theme-aio/src/components/GlobalHeader/index.js b/packages/gatsby-theme-aio/src/components/GlobalHeader/index.js
@@ -860,6 +860,7 @@ const GlobalHeader = ({
                 }}
                 aria-label={showSearch ? "Close Search" : "Search"}
                 isQuiet
+                tabIndex="0"
                 css={css`
                   margin-right: var(--spectrum-global-dimension-size-200);
 
@@ -879,6 +880,7 @@ const GlobalHeader = ({
               variant="primary"
               href="/console"
               id={"consoleId"}
+              tabIndex="0"
               css={css`
                 @media screen and (max-width: ${MOBILE_SCREEN_WIDTH}) {
                   display: none;

diff --git a/packages/gatsby-theme-aio/src/components/Layout/index.js b/packages/gatsby-theme-aio/src/components/Layout/index.js
@@ -790,6 +790,24 @@ export default ({ children, pageContext, location }) => {
                   searchButtonId={searchButtonId}
                 />
               </div>
+              {hasSearch && loadSearchFrame && (
+              <iframe
+                id='searchIframe'
+                src={searchIFrameSource()}
+                tabIndex="0"
+                css={css`position: fixed;
+                    top: var(--spectrum-global-dimension-size-800);
+                    left: 0px;
+                    right: 0px;
+                    bottom: 0px;
+                    background-color: transparent;
+                    z-index: 10;
+                    width: 100%;
+                    height: 100%;
+                    visibility: ${showSearch ? "visible" : "hidden"};`}
+              ></iframe>
+            )}
+
               <div
                 id={sideNavId}
                 hidden={!hasSideNav}
@@ -838,23 +856,6 @@ export default ({ children, pageContext, location }) => {
               </div>
             </div>
 
-            {hasSearch && loadSearchFrame && (
-              <iframe
-                id='searchIframe'
-                src={searchIFrameSource()}
-                css={css`position: fixed;
-                    top: var(--spectrum-global-dimension-size-800);
-                    left: 0px;
-                    right: 0px;
-                    bottom: 0px;
-                    background-color: transparent;
-                    z-index: 10;
-                    width: 100%;
-                    height: 100%;
-                    visibility: ${showSearch ? "visible" : "hidden"};`}
-              ></iframe>
-            )}
-
             <div
               css={css`
                 position: fixed;