#1 improve: a11y - CdMenu role 부여 및 aria-expanded 적용

boostksm · Jul 9, 2023 · abcae82 · abcae82
1 parent 79164a1
commit abcae82
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 0 deletions.
diff --git a/src/components/AlbumControls.js b/src/components/AlbumControls.js
@@ -88,13 +88,17 @@ const AlbumControls = ({
         onClick={showCdMenu}
         $isHide={isCdMenuShow}
         aria-label="show cd menu"
+        aria-expanded="false"
+        aria-controls="cdMenu"
       >
         <RiArrowUpDoubleLine className="icon" />
       </Button>
       <Button
         onClick={hideCdMenu}
         $isHide={!isCdMenuShow}
         aria-label="hide cd menu"
+        aria-expanded="true"
+        aria-controls="cdMenu"
       >
         <RiArrowDownDoubleLine className="icon" />
       </Button>

diff --git a/src/components/CdMenu.js b/src/components/CdMenu.js
@@ -49,6 +49,9 @@ const CdMenu = ({ albumData, isScrolling, selectSong }) => {
       onMouseOver={showAlbumControls}
       onMouseOut={hideAlbumControls}
       $isCdMenuShow={isCdMenuShow}
+      aria-label="expandable menu"
+      role="region"
+      id="cdMenu"
     >
       <RotatingCd isFaster={isScrolling} albumArtUrl={albumData.albumArtUrl} />
       <AlbumControls
@@ -62,6 +65,8 @@ const CdMenu = ({ albumData, isScrolling, selectSong }) => {
         className="showMenuButton"
         aria-label="show cd menu"
         onClick={() => setIsCdMenuShow(true)}
+        aria-expanded="false"
+        aria-controls="cdMenu"
       ></button>
     </CdMenuLayout>
   );