fix(a11y): DropdownMenu & remove extra aria-label's

lumada-design · Aug 28, 2023 · 30820f8 · 30820f8
1 parent d59f693
commit 30820f8
Show file tree

Hide file tree

Showing 5 changed files with 11 additions and 38 deletions.
diff --git a/packages/core/src/components/Carousel/Carousel.stories.tsx b/packages/core/src/components/Carousel/Carousel.stories.tsx
@@ -145,8 +145,8 @@ export const Embedded: StoryObj<HvCarouselProps> = {
 
     return (
       <HvCard bgcolor="atmo1" style={{ width: 350 }}>
-        <HvCardHeader title="Image Carousel" aria-label="Compressor" />
-        <HvCardMedia>
+        <HvCardHeader title="Image Carousel" />
+        <HvCardMedia role="none">
           <HvCarousel xs height={400}>
             {images.map(({ src, name }) => (
               <HvCarouselSlide

diff --git a/packages/core/src/components/DropDownMenu/DropDownMenu.tsx b/packages/core/src/components/DropDownMenu/DropDownMenu.tsx
@@ -142,6 +142,7 @@ export const HvDropDownMenu = (props: HvDropDownMenuProps) => {
           aria-expanded={open}
           disabled={disabled}
           aria-label="Dropdown menu"
+          aria-haspopup="menu"
         >
           {icon || (
             <MoreOptionsVertical
@@ -151,7 +152,6 @@ export const HvDropDownMenu = (props: HvDropDownMenuProps) => {
           )}
         </HvButton>
       }
-      aria-haspopup="menu"
       placement={placement}
       variableWidth
       disablePortal={disablePortal}

diff --git a/packages/core/src/components/GlobalActions/GlobalActions.stories.tsx b/packages/core/src/components/GlobalActions/GlobalActions.stories.tsx
@@ -1,6 +1,5 @@
 import { Backwards } from "@hitachivantara/uikit-react-icons";
 import { Meta, StoryObj } from "@storybook/react";
-import uniqueId from "lodash/uniqueId";
 import {
   HvButton,
   HvTypography,
@@ -29,20 +28,18 @@ export const Main: StoryObj<HvGlobalActionsProps> = {
   },
   decorators: [(Story) => <div style={{ height: 300 }}>{Story()}</div>],
   render: (args) => {
-    const BackButton = () => (
+    const backButton = (
       <HvButton aria-label="Back" icon onClick={() => alert("Back!")}>
         <Backwards />
       </HvButton>
     );
 
     return (
       <HvContainer>
-        <HvGlobalActions backButton={<BackButton />} {...args}>
+        <HvGlobalActions backButton={backButton} {...args}>
           <HvButton variant="primary">Approve & Share</HvButton>
           <HvButton variant="secondarySubtle">Reset</HvButton>
           <HvDropDownMenu
-            id={`dropdownItem-${uniqueId()}`}
-            aria-label="dropdownMenu-Items"
             placement="left"
             dataList={[
               { label: "Action 2" },
@@ -57,8 +54,6 @@ export const Main: StoryObj<HvGlobalActionsProps> = {
             <HvButton variant="secondarySubtle">Remove</HvButton>
             <HvButton variant="secondarySubtle">Share</HvButton>
             <HvDropDownMenu
-              id={`dropdownItem-${uniqueId()}`}
-              aria-label="dropdownMenu-Items"
               placement="left"
               dataList={[
                 { label: "Action 2" },
@@ -113,8 +108,6 @@ export const Main: StoryObj<HvGlobalActionsProps> = {
             <HvButton variant="secondarySubtle">Remove</HvButton>
             <HvButton variant="secondarySubtle">Share</HvButton>
             <HvDropDownMenu
-              id={`dropdownItem-${uniqueId()}`}
-              aria-label="dropdownMenu-Items"
               placement="left"
               dataList={[
                 { label: "Action 2" },
@@ -161,8 +154,6 @@ export const Main: StoryObj<HvGlobalActionsProps> = {
             <HvButton variant="secondarySubtle">Remove</HvButton>
             <HvButton variant="secondarySubtle">Share</HvButton>
             <HvDropDownMenu
-              id={`dropdownItem-${uniqueId()}`}
-              aria-label="dropdownMenu-Items"
               placement="left"
               dataList={[
                 { label: "Action 2" },
@@ -217,18 +208,16 @@ export const SampleWithAdditionalActions: StoryObj<HvGlobalActionsProps> = {
     },
   },
   render: () => {
-    const BackButton = () => (
+    const backButton = (
       <HvButton aria-label="Back" icon onClick={() => alert("Back!")}>
         <Backwards />
       </HvButton>
     );
 
     return (
-      <HvGlobalActions title="Detail Page Title" backButton={<BackButton />}>
+      <HvGlobalActions title="Detail Page Title" backButton={backButton}>
         <HvButton variant="secondaryGhost">Primary</HvButton>
         <HvDropDownMenu
-          id={`dropdownItem-${uniqueId()}`}
-          aria-label="dropdownMenu-Items"
           placement="left"
           dataList={[
             { label: "Action 2" },
@@ -251,8 +240,6 @@ export const SampleWithAdditionalActionsAndNoBackButton: StoryObj<HvGlobalAction
         <HvGlobalActions title="Detail Page Title" backButton={false}>
           <HvButton variant="secondaryGhost">Primary</HvButton>
           <HvDropDownMenu
-            id={`dropdownItem-${uniqueId()}`}
-            aria-label="dropdownMenu-Items"
             placement="left"
             dataList={[
               { label: "Action 2" },
@@ -279,20 +266,20 @@ export const SampleWithCustomTitleAndAdditionalActions: StoryObj<HvGlobalActions
       },
     },
     render: () => {
-      const CustomTitle = (
+      const customTitle = (
         <HvTypography variant="title3" component="h1">
           A Custom Title
         </HvTypography>
       );
 
-      const BackButton = () => (
+      const backButton = (
         <HvButton aria-label="Back" icon onClick={() => alert("Back!")}>
           <Backwards />
         </HvButton>
       );
 
       return (
-        <HvGlobalActions title={CustomTitle} backButton={<BackButton />}>
+        <HvGlobalActions title={customTitle} backButton={backButton}>
           <HvButton variant="primary">Primary</HvButton>
           <HvButton variant="secondarySubtle">Secondary</HvButton>
           <HvButton variant="secondarySubtle">Secondary</HvButton>
@@ -317,8 +304,6 @@ export const SectionGlobalActions: StoryObj<HvGlobalActionsProps> = {
       <HvGlobalActions title="Section Title" variant="section">
         <HvButton variant="secondaryGhost">Primary</HvButton>
         <HvDropDownMenu
-          id={`dropdownItem-${uniqueId()}`}
-          aria-label="dropdownMenu-Items"
           placement="left"
           dataList={[
             { label: "Action 2" },

diff --git a/packages/core/src/components/Input/SearchBox.stories.tsx b/packages/core/src/components/Input/SearchBox.stories.tsx
@@ -373,7 +373,7 @@ export const SearchAsYouType: StoryObj = {
           onChange={handleSearch}
           inputProps={{ autoComplete: "off" }}
         />
-        <HvPanel className={classes.panel}>
+        <HvPanel className={classes.panel} tabIndex={0}>
           <HvTypography variant="label">Countries of Europe</HvTypography>
           {results.map((element, i) => (
             <div key={i} className={classes.result}>

diff --git a/packages/core/src/components/TextArea/TextArea.stories.tsx b/packages/core/src/components/TextArea/TextArea.stories.tsx
@@ -133,14 +133,6 @@ export const LimitedBlocking: StoryObj<HvTextAreaProps> = {
     },
   },
   render: () => {
-    const [textLength, setTextLength] = useState<number>(0);
-
-    const setCounter = (_, data) => {
-      setTextLength(data.length);
-
-      return data;
-    };
-
     return (
       <HvTextArea
         id="limited-blocking"
@@ -150,10 +142,6 @@ export const LimitedBlocking: StoryObj<HvTextAreaProps> = {
         placeholder="Enter value"
         maxCharQuantity={10}
         blockMax
-        onChange={setCounter}
-        countCharProps={{
-          "aria-label": `You have inserted ${textLength} characters`,
-        }}
       />
     );
   },