Added aria-orientation to divider (microsoft#21292)

* Added aria-orientation to divider * Change files * Fixed vertical tests to be vertical
mlp73 · Jan 17, 2022 · 53d02e8 · 53d02e8
1 parent 58786dd
commit 53d02e8
Show file tree

Hide file tree

Showing 4 changed files with 85 additions and 59 deletions.
diff --git a/change/@fluentui-react-divider-8007dcbe-33ef-4d80-9b15-0cfca85bdc66.json b/change/@fluentui-react-divider-8007dcbe-33ef-4d80-9b15-0cfca85bdc66.json
@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "Added aria-orientation to divider",
+  "packageName": "@fluentui/react-divider",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}
diff --git a/packages/react-divider/src/components/Divider/Divider.test.tsx b/packages/react-divider/src/components/Divider/Divider.test.tsx
@@ -32,43 +32,43 @@ describe('Divider', () => {
     expect(tree).toMatchSnapshot();
   });
 
-  it('renders a subtle state with content', () => {
+  it('renders a subtle appearance', () => {
     const component = renderer.create(<Divider appearance="subtle">Subtle</Divider>);
     const tree = component.toJSON();
     expect(tree).toMatchSnapshot();
   });
 
-  it('renders a brand state with content', () => {
+  it('renders a brand appearance', () => {
     const component = renderer.create(<Divider appearance="brand">Brand</Divider>);
     const tree = component.toJSON();
     expect(tree).toMatchSnapshot();
   });
 
-  it('renders a strong state with content', () => {
+  it('renders a strong appearance', () => {
     const component = renderer.create(<Divider appearance="strong">Strong</Divider>);
     const tree = component.toJSON();
     expect(tree).toMatchSnapshot();
   });
 
-  it('renders a content aligned start', () => {
+  it('renders content start aligned', () => {
     const component = renderer.create(<Divider alignContent="start">Start</Divider>);
     const tree = component.toJSON();
     expect(tree).toMatchSnapshot();
   });
 
-  it('renders a content aligned center', () => {
+  it('renders content center aligned', () => {
     const component = renderer.create(<Divider alignContent="center">Center</Divider>);
     const tree = component.toJSON();
     expect(tree).toMatchSnapshot();
   });
 
-  it('renders a content aligned end', () => {
+  it('renders content end aligned', () => {
     const component = renderer.create(<Divider alignContent="end">End</Divider>);
     const tree = component.toJSON();
     expect(tree).toMatchSnapshot();
   });
 
-  it('renders a divider with different color', () => {
+  it('renders a divider with a different color', () => {
     const component = renderer.create(<Divider color="#FF00FF" />);
     const tree = component.toJSON();
     expect(tree).toMatchSnapshot();
@@ -81,18 +81,22 @@ describe('Divider', () => {
   });
 
   it('renders a vertical divider with content', () => {
-    const component = renderer.create(<Divider>Vertical</Divider>);
+    const component = renderer.create(<Divider vertical>Vertical</Divider>);
     const tree = component.toJSON();
     expect(tree).toMatchSnapshot();
   });
 
-  it('renders a vertical a fixed height', () => {
-    const component = renderer.create(<Divider style={{ height: 100 }}>fixed 100px height</Divider>);
+  it('renders a vertical divider with a fixed height', () => {
+    const component = renderer.create(
+      <Divider style={{ height: 100 }} vertical>
+        fixed 100px height
+      </Divider>,
+    );
     const tree = component.toJSON();
     expect(tree).toMatchSnapshot();
   });
 
-  it('renders a horizontal a fixed width', () => {
+  it('renders a horizontal divider with a fixed width', () => {
     const component = renderer.create(<Divider style={{ width: 100 }}>fixed 100px width</Divider>);
     const tree = component.toJSON();
     expect(tree).toMatchSnapshot();

diff --git a/packages/react-divider/src/components/Divider/__snapshots__/Divider.test.tsx.snap b/packages/react-divider/src/components/Divider/__snapshots__/Divider.test.tsx.snap
@@ -1,8 +1,9 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Divider renders a brand state with content 1`] = `
+exports[`Divider renders a brand appearance 1`] = `
 <div
   aria-labelledby="divider-1"
+  aria-orientation="horizontal"
   className="fui-Divider"
   role="separator"
 >
@@ -14,173 +15,186 @@ exports[`Divider renders a brand state with content 1`] = `
 </div>
 `;
 
-exports[`Divider renders a content aligned center 1`] = `
+exports[`Divider renders a default divider 1`] = `
+<div
+  aria-orientation="horizontal"
+  className="fui-Divider"
+  role="separator"
+/>
+`;
+
+exports[`Divider renders a divider with a different color 1`] = `
+<div
+  aria-orientation="horizontal"
+  className="fui-Divider"
+  role="separator"
+/>
+`;
+
+exports[`Divider renders a divider with content 1`] = `
 <div
   aria-labelledby="divider-1"
+  aria-orientation="horizontal"
   className="fui-Divider"
   role="separator"
 >
   <div
     id="divider-1"
   >
-    Center
+    Default Divider
   </div>
 </div>
 `;
 
-exports[`Divider renders a content aligned end 1`] = `
+exports[`Divider renders a divider with inset 1`] = `
 <div
   aria-labelledby="divider-1"
+  aria-orientation="horizontal"
   className="fui-Divider"
   role="separator"
 >
   <div
     id="divider-1"
   >
-    End
+    Inset
   </div>
 </div>
 `;
 
-exports[`Divider renders a content aligned start 1`] = `
+exports[`Divider renders a horizontal divider with a fixed width 1`] = `
 <div
   aria-labelledby="divider-1"
+  aria-orientation="horizontal"
   className="fui-Divider"
   role="separator"
+  style={
+    Object {
+      "width": 100,
+    }
+  }
 >
   <div
     id="divider-1"
   >
-    Start
+    fixed 100px width
   </div>
 </div>
 `;
 
-exports[`Divider renders a default divider 1`] = `
-<div
-  className="fui-Divider"
-  role="separator"
-/>
-`;
-
-exports[`Divider renders a divider with content 1`] = `
+exports[`Divider renders a strong appearance 1`] = `
 <div
   aria-labelledby="divider-1"
+  aria-orientation="horizontal"
   className="fui-Divider"
   role="separator"
 >
   <div
     id="divider-1"
   >
-    Default Divider
+    Strong
   </div>
 </div>
 `;
 
-exports[`Divider renders a divider with different color 1`] = `
-<div
-  className="fui-Divider"
-  role="separator"
-/>
-`;
-
-exports[`Divider renders a divider with inset 1`] = `
+exports[`Divider renders a subtle appearance 1`] = `
 <div
   aria-labelledby="divider-1"
+  aria-orientation="horizontal"
   className="fui-Divider"
   role="separator"
 >
   <div
     id="divider-1"
   >
-    Inset
+    Subtle
   </div>
 </div>
 `;
 
-exports[`Divider renders a horizontal a fixed width 1`] = `
+exports[`Divider renders a vertical divider 1`] = `
+<div
+  aria-orientation="vertical"
+  className="fui-Divider"
+  role="separator"
+/>
+`;
+
+exports[`Divider renders a vertical divider with a fixed height 1`] = `
 <div
   aria-labelledby="divider-1"
+  aria-orientation="vertical"
   className="fui-Divider"
   role="separator"
   style={
     Object {
-      "width": 100,
+      "height": 100,
     }
   }
 >
   <div
     id="divider-1"
   >
-    fixed 100px width
+    fixed 100px height
   </div>
 </div>
 `;
 
-exports[`Divider renders a strong state with content 1`] = `
+exports[`Divider renders a vertical divider with content 1`] = `
 <div
   aria-labelledby="divider-1"
+  aria-orientation="vertical"
   className="fui-Divider"
   role="separator"
 >
   <div
     id="divider-1"
   >
-    Strong
+    Vertical
   </div>
 </div>
 `;
 
-exports[`Divider renders a subtle state with content 1`] = `
+exports[`Divider renders content center aligned 1`] = `
 <div
   aria-labelledby="divider-1"
+  aria-orientation="horizontal"
   className="fui-Divider"
   role="separator"
 >
   <div
     id="divider-1"
   >
-    Subtle
+    Center
   </div>
 </div>
 `;
 
-exports[`Divider renders a vertical a fixed height 1`] = `
+exports[`Divider renders content end aligned 1`] = `
 <div
   aria-labelledby="divider-1"
+  aria-orientation="horizontal"
   className="fui-Divider"
   role="separator"
-  style={
-    Object {
-      "height": 100,
-    }
-  }
 >
   <div
     id="divider-1"
   >
-    fixed 100px height
+    End
   </div>
 </div>
 `;
 
-exports[`Divider renders a vertical divider 1`] = `
-<div
-  className="fui-Divider"
-  role="separator"
-/>
-`;
-
-exports[`Divider renders a vertical divider with content 1`] = `
+exports[`Divider renders content start aligned 1`] = `
 <div
   aria-labelledby="divider-1"
+  aria-orientation="horizontal"
   className="fui-Divider"
   role="separator"
 >
   <div
     id="divider-1"
   >
-    Vertical
+    Start
   </div>
 </div>
 `;
diff --git a/packages/react-divider/src/components/Divider/useDivider.ts b/packages/react-divider/src/components/Divider/useDivider.ts
@@ -28,6 +28,7 @@ export const useDivider = (props: DividerProps, ref: React.Ref<HTMLElement>): Di
       ...props,
       ref,
       role: 'separator',
+      'aria-orientation': vertical ? 'vertical' : 'horizontal',
       'aria-labelledby': props.children ? dividerId : undefined,
     }),
     wrapper: resolveShorthand(wrapper, {