remove menu roles from overflowset and resizegroup examples (microsof…

…t#23024)
marwan38 · Jun 13, 2022 · 46548d0 · 46548d0
1 parent 54df894
commit 46548d0
Show file tree

Hide file tree

Showing 6 changed files with 4 additions and 25 deletions.
diff --git a/packages/react-examples/src/react/OverflowSet/OverflowSet.Basic.Example.tsx b/packages/react-examples/src/react/OverflowSet/OverflowSet.Basic.Example.tsx
@@ -7,7 +7,7 @@ const noOp = () => undefined;
 
 const onRenderItem = (item: IOverflowSetItemProps): JSX.Element => {
   return (
-    <Link role="menuitem" styles={{ root: { marginRight: 10 } }} onClick={item.onClick}>
+    <Link styles={{ root: { marginRight: 10 } }} onClick={item.onClick}>
       {item.name}
     </Link>
   );
@@ -24,7 +24,6 @@ const onRenderOverflowButton = (overflowItems: any[] | undefined): JSX.Element =
   };
   return (
     <IconButton
-      role="menuitem"
       title="More options"
       styles={buttonStyles}
       menuIconProps={{ iconName: 'More' }}
@@ -36,7 +35,6 @@ const onRenderOverflowButton = (overflowItems: any[] | undefined): JSX.Element =
 export const OverflowSetBasicExample: React.FunctionComponent = () => (
   <OverflowSet
     aria-label="Basic Menu Example"
-    role="menubar"
     items={[
       {
         key: 'item1',

diff --git a/packages/react-examples/src/react/OverflowSet/OverflowSet.BasicReversed.Example.tsx b/packages/react-examples/src/react/OverflowSet/OverflowSet.BasicReversed.Example.tsx
@@ -7,7 +7,7 @@ const noOp = () => undefined;
 
 const onRenderItem = (item: IOverflowSetItemProps): JSX.Element => {
   return (
-    <Link role="menuitem" styles={{ root: { marginRight: 10 } }} onClick={item.onClick}>
+    <Link styles={{ root: { marginRight: 10 } }} onClick={item.onClick}>
       {item.name}
     </Link>
   );
@@ -24,7 +24,6 @@ const onRenderOverflowButton = (overflowItems: any[] | undefined): JSX.Element =
   };
   return (
     <IconButton
-      role="menuitem"
       title="More options"
       styles={buttonStyles}
       menuIconProps={{ iconName: 'More' }}
@@ -36,7 +35,6 @@ const onRenderOverflowButton = (overflowItems: any[] | undefined): JSX.Element =
 export const OverflowSetBasicReversedExample: React.FunctionComponent = () => (
   <OverflowSet
     aria-label="Basic Menu Example"
-    role="menubar"
     items={[
       {
         key: 'item3',

diff --git a/packages/react-examples/src/react/OverflowSet/OverflowSet.Custom.Example.tsx b/packages/react-examples/src/react/OverflowSet/OverflowSet.Custom.Example.tsx
@@ -14,14 +14,7 @@ const onRenderItem = (item: IOverflowSetItemProps): JSX.Element => {
   if (item.onRender) {
     return item.onRender(item);
   }
-  return (
-    <CommandBarButton
-      role="menuitem"
-      iconProps={{ iconName: item.icon }}
-      menuProps={item.subMenuProps}
-      text={item.name}
-    />
-  );
+  return <CommandBarButton iconProps={{ iconName: item.icon }} menuProps={item.subMenuProps} text={item.name} />;
 };
 
 const onRenderOverflowButton = (overflowItems: any[] | undefined): JSX.Element => {
@@ -36,7 +29,6 @@ const onRenderOverflowButton = (overflowItems: any[] | undefined): JSX.Element =
   return (
     <CommandBarButton
       ariaLabel="More items"
-      role="menuitem"
       styles={buttonStyles}
       menuIconProps={{ iconName: 'More' }}
       menuProps={{ items: overflowItems! }}
@@ -47,12 +39,11 @@ const onRenderOverflowButton = (overflowItems: any[] | undefined): JSX.Element =
 export const OverflowSetCustomExample: React.FunctionComponent = () => (
   <OverflowSet
     aria-label="Custom Example"
-    role="menubar"
     items={[
       {
         key: 'checkbox',
         onRender: () => {
-          return <Checkbox inputProps={{ role: 'menuitemcheckbox' }} label="A Checkbox" styles={checkboxStyles} />;
+          return <Checkbox label="A Checkbox" styles={checkboxStyles} />;
         },
       },
       {

diff --git a/packages/react-examples/src/react/OverflowSet/OverflowSet.Vertical.Example.tsx b/packages/react-examples/src/react/OverflowSet/OverflowSet.Vertical.Example.tsx
@@ -17,7 +17,6 @@ const onRenderItem = (item: IOverflowSetItemProps): JSX.Element => {
   return (
     <TooltipHost content={item.title} directionalHint={DirectionalHint.rightCenter}>
       <CommandBarButton
-        role="menuitem"
         aria-label={item.name}
         styles={onRenderItemStyles}
         iconProps={{ iconName: item.icon }}
@@ -31,7 +30,6 @@ const onRenderOverflowButton = (overflowItems: any[] | undefined): JSX.Element =
   return (
     <TooltipHost content="More items" directionalHint={DirectionalHint.rightCenter}>
       <CommandBarButton
-        role="menuitem"
         aria-label="More items"
         styles={onRenderOverflowButtonStyles}
         menuIconProps={{ iconName: 'More' }}
@@ -44,7 +42,6 @@ const onRenderOverflowButton = (overflowItems: any[] | undefined): JSX.Element =
 export const OverflowSetVerticalExample: React.FunctionComponent = () => (
   <OverflowSet
     aria-label="Vertical Example"
-    role="menubar"
     vertical
     items={[
       {

diff --git a/packages/react-examples/src/react/ResizeGroup/ResizeGroup.OverflowSet.Example.tsx b/packages/react-examples/src/react/ResizeGroup/ResizeGroup.OverflowSet.Example.tsx
@@ -66,7 +66,6 @@ const computeCacheKey = (primaryControls: IContextualMenuItem[]): string => {
 
 const onRenderItem = (item: any) => (
   <CommandBarButton
-    role="menuitem"
     text={item.name}
     iconProps={{ iconName: item.icon }}
     onClick={item.onClick}
@@ -114,7 +113,6 @@ export const ResizeGroupOverflowSetExample: React.FunctionComponent = () => {
   const onRenderData = (data: any) => {
     return (
       <OverflowSet
-        role="menubar"
         items={data.primary}
         overflowItems={data.overflow.length ? data.overflow : null}
         onRenderItem={onRenderItem}

diff --git a/packages/react-examples/src/react/ResizeGroup/ResizeGroup.VerticalOverflowSet.Example.tsx b/packages/react-examples/src/react/ResizeGroup/ResizeGroup.VerticalOverflowSet.Example.tsx
@@ -51,7 +51,6 @@ const dataToRender = generateData(20, false, false);
 
 const onRenderItem = (item: any) => (
   <CommandBarButton
-    role="menuitem"
     text={item.name}
     iconProps={{ iconName: item.icon }}
     onClick={item.onClick}
@@ -62,7 +61,6 @@ const onRenderItem = (item: any) => (
 
 const onRenderOverflowButton = (overflowItems: any) => (
   <CommandBarButton
-    role="menuitem"
     styles={buttonStyles}
     menuIconProps={{ iconName: 'ChevronRight' }}
     menuProps={{ items: overflowItems!, directionalHint: DirectionalHint.rightCenter }}
@@ -71,7 +69,6 @@ const onRenderOverflowButton = (overflowItems: any) => (
 
 const onRenderData = (data: any) => (
   <OverflowSet
-    role="menubar"
     vertical
     items={data.primary}
     overflowItems={data.overflow.length ? data.overflow : null}