useEffectを使わず、メニューのプレースホルダーを追加する方法に変更

src/components/shared/Header/Header.tsx

@@ -2,7 +2,7 @@ import { CSS_COLOR, CSS_SIZE } from '@Constants/style'
 import { LoginContext } from '@Context/LoginContext'
 import { useLocation } from '@reach/router'
 import { Link as LinkComponent } from 'gatsby'
-import React, { FC, useContext, useEffect, useState } from 'react'
+import React, { FC, useContext, useState } from 'react'
 import { AnchorButton, Cluster, FaBarsIcon, FaSearchIcon, defaultColor, Dialog as shrDialog } from 'smarthr-ui'
 import styled, { createGlobalStyle, css } from 'styled-components'
 
@@ -23,14 +23,9 @@ type Props = {
 export const Header: FC<Props> = ({ isIndex = false }) => {
   const location = useLocation()
   const [isOpen, setIsOpen] = useState(false)
-  const [isClient, setIsClient] = useState(false)
 
   const { loginStatus, loginLabel } = useContext(LoginContext)
 
-  useEffect(() => {
-    setIsClient(typeof window !== 'undefined')
-  }, [])
-
   const isCurrent = (url: string) => {
     const regexp = new RegExp(`${url}`)
     const pathname = location.pathname
@@ -73,19 +68,18 @@ export const Header: FC<Props> = ({ isIndex = false }) => {
             </ul>
             <MenuContainer>
               <StyledOpenButton
-                // サーバー時は対象となるDialogコンポーネントをレンダリングできないため、aria-controlsは出力しない
-                {...(isClient && { 'aria-controls': 'panel-menu' })}
                 type="button"
                 onClick={() => {
                   setIsOpen(true)
                 }}
                 title="メニューを開く"
                 aria-haspopup="true"
+                aria-controls="panel-menu"
               >
                 <FaBarsIcon size={24} />
               </StyledOpenButton>
               {/* サーバー時は`document`が存在せずエラーになるため、Dialogコンポーネントをレンダリングしない */}
-              {isClient ? (
+              {typeof window !== 'undefined' ? (
                 <Dialog
                   isOpen={isOpen}
                   top={0}
@@ -138,7 +132,10 @@ export const Header: FC<Props> = ({ isIndex = false }) => {
                     </MenuLinkContainer>
                   </MenuContentsContainer>
                 </Dialog>
-              ) : null}
+              ) : (
+                // id="panel-menu"の要素が存在しないと、ボタンの`aria-controls="panel-menu"`が不正になるため、SSR時のプレースホルダーを出力する
+                <div id="panel-menu" aria-hidden="true"></div>
+              )}
             </MenuContainer>
           </StyledNav>
         </Container>