fix(Pivot): remove toolbar role, pass naming attrs through (#20317)

* remove wayward toolbar semantic from tabs * snapshots * Change files
microsoft · Oct 26, 2021 · 6f07e52 · 6f07e52
1 parent 9e5944c
commit 6f07e52
Show file tree

Hide file tree

Showing 17 changed files with 61 additions and 77 deletions.
diff --git a/change/@fluentui-react-9fd59c00-9ff6-4754-8627-fa88ae7be3e8.json b/change/@fluentui-react-9fd59c00-9ff6-4754-8627-fa88ae7be3e8.json
@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "Remove incorrect toolbar role from Pivot and pass accname attributes to the tablist",
+  "packageName": "@fluentui/react",
+  "email": "sarah.higley@microsoft.com",
+  "dependentChangeType": "patch"
+}
diff --git a/packages/react-examples/src/react/__snapshots__/Keytips.Basic.Example.tsx.shot b/packages/react-examples/src/react/__snapshots__/Keytips.Basic.Example.tsx.shot
@@ -5,9 +5,7 @@ exports[`Component Examples renders Keytips.Basic.Example.tsx correctly 1`] = `
   <p>
     For Pivots, keytips will first show for each of the pivots. After selecting a pivot, the Keytips for its content are shown.
   </p>
-  <div
-    role="toolbar"
-  >
+  <div>
     <div
       className=
           ms-FocusZone

diff --git a/packages/react-examples/src/react/__snapshots__/Pivot.AlwaysRender.Example.tsx.shot b/packages/react-examples/src/react/__snapshots__/Pivot.AlwaysRender.Example.tsx.shot
@@ -135,11 +135,9 @@ exports[`Component Examples renders Pivot.AlwaysRender.Example.tsx correctly 1`]
       </button>
     </div>
   </div>
-  <div
-    aria-label="Separately Rendered Content Pivot Example"
-    role="toolbar"
-  >
+  <div>
     <div
+      aria-label="Separately Rendered Content Pivot Example"
       className=
           ms-FocusZone
           ms-Pivot

diff --git a/packages/react-examples/src/react/__snapshots__/Pivot.Basic.Example.tsx.shot b/packages/react-examples/src/react/__snapshots__/Pivot.Basic.Example.tsx.shot
@@ -1,11 +1,9 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Component Examples renders Pivot.Basic.Example.tsx correctly 1`] = `
-<div
-  aria-label="Basic Pivot Example"
-  role="toolbar"
->
+<div>
   <div
+    aria-label="Basic Pivot Example"
     className=
         ms-FocusZone
         ms-Pivot

diff --git a/packages/react-examples/src/react/__snapshots__/Pivot.IconCount.Example.tsx.shot b/packages/react-examples/src/react/__snapshots__/Pivot.IconCount.Example.tsx.shot
@@ -2,11 +2,9 @@
 
 exports[`Component Examples renders Pivot.IconCount.Example.tsx correctly 1`] = `
 <div>
-  <div
-    aria-label="Count and Icon Pivot Example"
-    role="toolbar"
-  >
+  <div>
     <div
+      aria-label="Count and Icon Pivot Example"
       className=
           ms-FocusZone
           ms-Pivot

diff --git a/packages/react-examples/src/react/__snapshots__/Pivot.Large.Example.tsx.shot b/packages/react-examples/src/react/__snapshots__/Pivot.Large.Example.tsx.shot
@@ -2,11 +2,9 @@
 
 exports[`Component Examples renders Pivot.Large.Example.tsx correctly 1`] = `
 <div>
-  <div
-    aria-label="Large Link Size Pivot Example"
-    role="toolbar"
-  >
+  <div>
     <div
+      aria-label="Large Link Size Pivot Example"
       className=
           ms-FocusZone
           ms-Pivot

diff --git a/packages/react-examples/src/react/__snapshots__/Pivot.OnChange.Example.tsx.shot b/packages/react-examples/src/react/__snapshots__/Pivot.OnChange.Example.tsx.shot
@@ -29,11 +29,9 @@ exports[`Component Examples renders Pivot.OnChange.Example.tsx correctly 1`] = `
   >
     Last onLinkClick from: 
   </label>
-  <div
-    aria-label="OnChange Pivot Example"
-    role="toolbar"
-  >
+  <div>
     <div
+      aria-label="OnChange Pivot Example"
       className=
           ms-FocusZone
           ms-Pivot

diff --git a/packages/react-examples/src/react/__snapshots__/Pivot.OverflowMenu.Example.tsx.shot b/packages/react-examples/src/react/__snapshots__/Pivot.OverflowMenu.Example.tsx.shot
@@ -553,11 +553,9 @@ Array [
         }
     dir="ltr"
   >
-    <div
-      aria-label="Pivot Overflow Menu Example"
-      role="toolbar"
-    >
+    <div>
       <div
+        aria-label="Pivot Overflow Menu Example"
         className=
             ms-FocusZone
             ms-Pivot

diff --git a/packages/react-examples/src/react/__snapshots__/Pivot.Override.Example.tsx.shot b/packages/react-examples/src/react/__snapshots__/Pivot.Override.Example.tsx.shot
@@ -2,11 +2,9 @@
 
 exports[`Component Examples renders Pivot.Override.Example.tsx correctly 1`] = `
 <div>
-  <div
-    aria-label="Override Selected Item Pivot Example"
-    role="toolbar"
-  >
+  <div>
     <div
+      aria-label="Override Selected Item Pivot Example"
       className=
           ms-FocusZone
           ms-Pivot

diff --git a/packages/react-examples/src/react/__snapshots__/Pivot.Remove.Example.tsx.shot b/packages/react-examples/src/react/__snapshots__/Pivot.Remove.Example.tsx.shot
@@ -2,11 +2,9 @@
 
 exports[`Component Examples renders Pivot.Remove.Example.tsx correctly 1`] = `
 <div>
-  <div
-    aria-label="Remove Pivot Example"
-    role="toolbar"
-  >
+  <div>
     <div
+      aria-label="Remove Pivot Example"
       className=
           ms-FocusZone
           ms-Pivot

diff --git a/packages/react-examples/src/react/__snapshots__/Pivot.Separate.Example.tsx.shot b/packages/react-examples/src/react/__snapshots__/Pivot.Separate.Example.tsx.shot
@@ -14,11 +14,9 @@ exports[`Component Examples renders Pivot.Separate.Example.tsx correctly 1`] = `
       }
     }
   />
-  <div
-    aria-label="Separately Rendered Content Pivot Example"
-    role="toolbar"
-  >
+  <div>
     <div
+      aria-label="Separately Rendered Content Pivot Example"
       className=
           ms-FocusZone
           ms-Pivot

diff --git a/packages/react-examples/src/react/__snapshots__/Pivot.Tabs.Example.tsx.shot b/packages/react-examples/src/react/__snapshots__/Pivot.Tabs.Example.tsx.shot
@@ -2,11 +2,9 @@
 
 exports[`Component Examples renders Pivot.Tabs.Example.tsx correctly 1`] = `
 <div>
-  <div
-    aria-label="Links of Tab Style Pivot Example"
-    role="toolbar"
-  >
+  <div>
     <div
+      aria-label="Links of Tab Style Pivot Example"
       className=
           ms-FocusZone
           ms-Pivot

diff --git a/packages/react-examples/src/react/__snapshots__/Pivot.TabsLarge.Example.tsx.shot b/packages/react-examples/src/react/__snapshots__/Pivot.TabsLarge.Example.tsx.shot
@@ -2,11 +2,9 @@
 
 exports[`Component Examples renders Pivot.TabsLarge.Example.tsx correctly 1`] = `
 <div>
-  <div
-    aria-label="Links of Large Tabs Pivot Example"
-    role="toolbar"
-  >
+  <div>
     <div
+      aria-label="Links of Large Tabs Pivot Example"
       className=
           ms-FocusZone
           ms-Pivot

diff --git a/packages/react/src/components/Pivot/Pivot.base.tsx b/packages/react/src/components/Pivot/Pivot.base.tsx
@@ -73,7 +73,14 @@ export const PivotBase: React.FunctionComponent<IPivotProps> = React.forwardRef<
     const { componentRef, theme, linkSize, linkFormat, overflowBehavior, focusZoneProps } = props;
 
     let classNames: { [key in keyof IPivotStyles]: string };
-    const divProps = getNativeProps<React.HTMLAttributes<HTMLDivElement>>(props, divProperties);
+    const nameProps = {
+      'aria-label': props['aria-label'],
+      'aria-labelledby': props['aria-labelledby'],
+    };
+    const divProps = getNativeProps<React.HTMLAttributes<HTMLDivElement>>(props, divProperties, [
+      'aria-label',
+      'aria-labelledby',
+    ]);
 
     let linkCollection = getLinkItems(props, pivotId);
 
@@ -251,10 +258,11 @@ export const PivotBase: React.FunctionComponent<IPivotProps> = React.forwardRef<
     });
 
     return (
-      <div role="toolbar" {...divProps} ref={ref}>
+      <div ref={ref} {...divProps}>
         <FocusZone
           componentRef={focusZoneRef}
           role="tablist"
+          {...nameProps}
           direction={FocusZoneDirection.horizontal}
           {...focusZoneProps}
           className={css(classNames.root, focusZoneProps?.className)}

diff --git a/packages/react/src/components/Pivot/Pivot.test.tsx b/packages/react/src/components/Pivot/Pivot.test.tsx
@@ -137,4 +137,16 @@ describe('Pivot', () => {
     const tree = component.toJSON();
     expect(tree).toMatchSnapshot();
   });
+  it('passes aria-label and aria-labelledby to tablist', () => {
+    const wrapper = mount(
+      <Pivot aria-label="test label" aria-labelledby="testID" data-foo="not passed to tablist">
+        <PivotItem headerText="Test Link 1" />
+        <PivotItem headerText="" />
+      </Pivot>,
+    );
+    const tablistElement = wrapper.find('div[role="tablist"]');
+    expect(tablistElement.prop('aria-label')).toBe('test label');
+    expect(tablistElement.prop('aria-labelledby')).toBe('testID');
+    expect(tablistElement.prop('data-foo')).toBeUndefined();
+  });
 });
diff --git a/packages/react/src/components/Pivot/__snapshots__/Pivot.deprecated.test.tsx.snap b/packages/react/src/components/Pivot/__snapshots__/Pivot.deprecated.test.tsx.snap
@@ -1,9 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Pivot renders link Pivot correctly 1`] = `
-<div
-  role="toolbar"
->
+<div>
   <div
     className=
         ms-FocusZone

diff --git a/packages/react/src/components/Pivot/__snapshots__/Pivot.test.tsx.snap b/packages/react/src/components/Pivot/__snapshots__/Pivot.test.tsx.snap
@@ -1,9 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Pivot renders Pivot correctly when itemCount is a string 1`] = `
-<div
-  role="toolbar"
->
+<div>
   <div
     className=
         ms-FocusZone
@@ -400,7 +398,6 @@ exports[`Pivot renders Pivot correctly when itemCount is a string 1`] = `
 exports[`Pivot renders Pivot correctly with custom className 1`] = `
 <div
   className="specialClassName"
-  role="toolbar"
 >
   <div
     className=
@@ -786,9 +783,7 @@ exports[`Pivot renders Pivot correctly with custom className 1`] = `
 `;
 
 exports[`Pivot renders Pivot correctly with icon, text and count 1`] = `
-<div
-  role="toolbar"
->
+<div>
   <div
     className=
         ms-FocusZone
@@ -1365,9 +1360,7 @@ exports[`Pivot renders Pivot correctly with icon, text and count 1`] = `
 `;
 
 exports[`Pivot renders Pivot with overflow 1`] = `
-<div
-  role="toolbar"
->
+<div>
   <div
     className=
         ms-FocusZone
@@ -1930,9 +1923,7 @@ exports[`Pivot renders Pivot with overflow 1`] = `
 `;
 
 exports[`Pivot renders large link Pivot correctly 1`] = `
-<div
-  role="toolbar"
->
+<div>
   <div
     className=
         ms-FocusZone
@@ -2316,9 +2307,7 @@ exports[`Pivot renders large link Pivot correctly 1`] = `
 `;
 
 exports[`Pivot renders large tabbed Pivot correctly 1`] = `
-<div
-  role="toolbar"
->
+<div>
   <div
     className=
         ms-FocusZone
@@ -2773,9 +2762,7 @@ exports[`Pivot renders large tabbed Pivot correctly 1`] = `
 `;
 
 exports[`Pivot renders link Pivot correctly 1`] = `
-<div
-  role="toolbar"
->
+<div>
   <div
     className=
         ms-FocusZone
@@ -3158,9 +3145,7 @@ exports[`Pivot renders link Pivot correctly 1`] = `
 `;
 
 exports[`Pivot renders tabbed Pivot correctly 1`] = `
-<div
-  role="toolbar"
->
+<div>
   <div
     className=
         ms-FocusZone
@@ -3614,9 +3599,7 @@ exports[`Pivot renders tabbed Pivot correctly 1`] = `
 `;
 
 exports[`Pivot supports JSX expressions 1`] = `
-<div
-  role="toolbar"
->
+<div>
   <div
     className=
         ms-FocusZone