Addressing Issue #3707 - OverflowSet: Add the ability to set aria-lab…

…el (#4667) * enabled native props with use of FocusZone * added documentation for native props to OverflowSet * rush change
microsoft · Apr 25, 2018 · 127d4d9 · 127d4d9
1 parent 56c4cfb
commit 127d4d9
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 0 deletions.
diff --git a/common/changes/office-ui-fabric-react/overflowset-nativeprops-3707_2018-04-24-22-09.json b/common/changes/office-ui-fabric-react/overflowset-nativeprops-3707_2018-04-24-22-09.json
@@ -0,0 +1,11 @@
+{
+  "changes": [
+    {
+      "packageName": "office-ui-fabric-react",
+      "comment": "Enabled native props (aria-* and data-*) on OverflowSet even when the doNotContainWithinFocusZone prop is false",
+      "type": "minor"
+    }
+  ],
+  "packageName": "office-ui-fabric-react",
+  "email": "v-brgarl@microsoft.com"
+}
diff --git a/packages/office-ui-fabric-react/src/components/OverflowSet/OverflowSet.tsx b/packages/office-ui-fabric-react/src/components/OverflowSet/OverflowSet.tsx
@@ -53,6 +53,7 @@ export class OverflowSet extends BaseComponent<IOverflowSetProps, {}> implements
     } else {
       Tag = FocusZone;
       uniqueComponentProps = {
+        ...getNativeProps(this.props, divProperties),
         ...focusZoneProps,
         componentRef: this._focusZone,
         direction: vertical ? FocusZoneDirection.vertical : FocusZoneDirection.horizontal

diff --git a/packages/office-ui-fabric-react/src/components/OverflowSet/OverflowSetPage.tsx b/packages/office-ui-fabric-react/src/components/OverflowSet/OverflowSetPage.tsx
@@ -29,6 +29,7 @@ export class OverflowSetPage extends React.Component<IComponentDemoPageProps, an
             { require<string>('!raw-loader!office-ui-fabric-react/src/components/OverflowSet/docs/OverflowSetOverview.md') }
           </PageMarkdown>
         }
+        allowNativeProps={ true }
         exampleCards={
           <LayerHost>
             <ExampleCard title='OverflowSet Basic Example' code={ OverflowSetBasicExampleCode }>