Add label for element

hotel-management/src/components/HeaderMenu.tsx

@@ -13,12 +13,16 @@ const StyledHeaderMenu = styled.ul`
 const HeaderMenu = () => {
   return (
     <StyledHeaderMenu>
-      <ButtonIcon>
+      <li>
-        <IoPersonCircleOutline />
+        <ButtonIcon aria-label="Profile">
-      </ButtonIcon>
+          <IoPersonCircleOutline />
-      <ButtonIcon>
+        </ButtonIcon>
-        <HiOutlineLogout />
+      </li>
-      </ButtonIcon>
+      <li>
+        <ButtonIcon aria-label="Logout">
+          <HiOutlineLogout />
+        </ButtonIcon>
+      </li>
     </StyledHeaderMenu>
   );
 };

hotel-management/src/components/Menus/Menus.tsx

@@ -37,7 +37,7 @@ const Toggle = ({ id }: { id: string }): React.JSX.Element => {
   };
 
   return (
-    <StyledToggle onClick={handleClick}>
+    <StyledToggle onClick={handleClick} aria-label={`Menu item ${id}`}>
       <HiEllipsisVertical />
     </StyledToggle>
   );

hotel-management/src/components/Select.tsx

@@ -19,7 +19,7 @@ const StyledSelect = styled.select`
 
 const Select = ({ options, value, onChange }: ISelect) => {
   return (
-    <StyledSelect value={value} onChange={onChange}>
+    <StyledSelect value={value} onChange={onChange} aria-label="Sort">
       {options.map((option) => (
         <option value={option.value} key={option.value}>
           {option.label}