fix(toolbar): missing aria orientation attribute

src/components/AriaToolbar/AriaToolbar.constants.ts

@@ -1,7 +1,7 @@
 const CLASS_PREFIX = 'md-aria-toolbar';
 
 const DEFAULTS = {
-  ORIENTATION: 'horizontal',
+  ORIENTATION: 'horizontal' as const,
   SHOULD_RENDER_AS_BUTTON_GROUP: false,
 };
 

src/components/AriaToolbar/AriaToolbar.tsx

@@ -18,7 +18,7 @@ const AriaToolbar: FC<Props> = (props: Props) => {
     id,
     style,
     children,
-    orientation = DEFAULTS.ORIENTATION as Props['orientation'],
+    orientation = DEFAULTS.ORIENTATION,
     shouldRenderAsButtonGroup = DEFAULTS.SHOULD_RENDER_AS_BUTTON_GROUP,
     onTabPress,
     ariaControls,
@@ -55,6 +55,7 @@ const AriaToolbar: FC<Props> = (props: Props) => {
     'aria-label': ariaLabel,
     'aria-controls': ariaControls,
     role: 'toolbar',
+    'aria-orientation': orientation,
     ...rest,
   };
 
@@ -76,7 +77,7 @@ const AriaToolbar: FC<Props> = (props: Props) => {
 
   useEffect(() => {
     // When the toolbar is rendered inside a list, only the first item in the toolbar
-    // should be focusable. This is the preserve the tab order as the
+    // should be focusable. This is to preserve the tab order as the
     // List uses a roving tab index.
     getKeyboardFocusableElements(ref.current, false).forEach((el, index) => {
       if (index === 0) {

src/components/AriaToolbar/AriaToolbar.unit.test.tsx

@@ -273,6 +273,31 @@ describe('<AriaToolbar />', () => {
 
       expect(element.getAttribute('aria-label')).toBe(ariaLabel);
     });
+
+    it.each`
+      orientation     | ariaOrientation
+      ${'horizontal'} | ${'horizontal'}
+      ${'vertical'}   | ${'vertical'}
+      ${undefined}    | ${'horizontal'}
+    `(
+      'should have provided aria-orientation when orientation is $orientation',
+      ({ orientation, ariaOrientation }) => {
+        expect.assertions(1);
+
+        const element = mount(
+          <AriaToolbar
+            shouldRenderAsButtonGroup
+            ariaLabel="test"
+            orientation={orientation}
+            ariaToolbarItemsSize={0}
+          />
+        )
+          .find(AriaToolbar)
+          .getDOMNode();
+
+        expect(element.getAttribute('aria-orientation')).toBe(ariaOrientation);
+      }
+    );
   });
 
   describe('actions', () => {

src/components/AriaToolbar/AriaToolbar.unit.test.tsx.snap

@@ -7,6 +7,7 @@ exports[`<AriaToolbar /> snapshot should match snapshot 1`] = `
 >
   <div
     aria-label="test"
+    aria-orientation="horizontal"
     className="md-aria-toolbar-wrapper"
     role="toolbar"
   />
@@ -26,6 +27,7 @@ exports[`<AriaToolbar /> snapshot should match snapshot with aria label + button
 >
   <ButtonGroup
     aria-label="test"
+    aria-orientation="horizontal"
     className="md-aria-toolbar-wrapper"
     orientation="horizontal"
     role="toolbar"
@@ -37,6 +39,7 @@ exports[`<AriaToolbar /> snapshot should match snapshot with aria label + button
   >
     <div
       aria-label="test"
+      aria-orientation="horizontal"
       className="md-button-group-wrapper md-aria-toolbar-wrapper"
       data-compressed={false}
       data-orientation="horizontal"
@@ -62,6 +65,7 @@ exports[`<AriaToolbar /> snapshot should match snapshot with className 1`] = `
 >
   <div
     aria-label="test"
+    aria-orientation="horizontal"
     className="example-class md-aria-toolbar-wrapper"
     role="toolbar"
   />
@@ -76,6 +80,7 @@ exports[`<AriaToolbar /> snapshot should match snapshot with data-test 1`] = `
 >
   <div
     aria-label="test"
+    aria-orientation="horizontal"
     className="md-aria-toolbar-wrapper"
     data-test="data-test"
     role="toolbar"
@@ -91,6 +96,7 @@ exports[`<AriaToolbar /> snapshot should match snapshot with id 1`] = `
 >
   <div
     aria-label="test"
+    aria-orientation="horizontal"
     className="md-aria-toolbar-wrapper"
     id="example-id"
     role="toolbar"
@@ -110,6 +116,7 @@ exports[`<AriaToolbar /> snapshot should match snapshot with style 1`] = `
 >
   <div
     aria-label="test"
+    aria-orientation="horizontal"
     className="md-aria-toolbar-wrapper"
     role="toolbar"
     style={
@@ -128,6 +135,7 @@ exports[`<AriaToolbar /> snapshot should set tab index appropriately - horizonta
 >
   <div
     aria-label="test"
+    aria-orientation="horizontal"
     className="md-aria-toolbar-wrapper"
     role="toolbar"
   >
@@ -255,6 +263,7 @@ exports[`<AriaToolbar /> snapshot should set tab index appropriately - horizonta
 >
   <div
     aria-label="test"
+    aria-orientation="horizontal"
     className="md-aria-toolbar-wrapper"
     role="toolbar"
   >
@@ -382,6 +391,7 @@ exports[`<AriaToolbar /> snapshot should set tab index appropriately - horizonta
 >
   <div
     aria-label="test"
+    aria-orientation="horizontal"
     className="md-aria-toolbar-wrapper"
     role="toolbar"
   >
@@ -509,6 +519,7 @@ exports[`<AriaToolbar /> snapshot should set tab index appropriately - horizonta
 >
   <div
     aria-label="test"
+    aria-orientation="horizontal"
     className="md-aria-toolbar-wrapper"
     role="toolbar"
   >
@@ -637,6 +648,7 @@ exports[`<AriaToolbar /> snapshot should set tab index appropriately - vertical
 >
   <div
     aria-label="test"
+    aria-orientation="vertical"
     className="md-aria-toolbar-wrapper"
     role="toolbar"
   >
@@ -765,6 +777,7 @@ exports[`<AriaToolbar /> snapshot should set tab index appropriately - vertical
 >
   <div
     aria-label="test"
+    aria-orientation="vertical"
     className="md-aria-toolbar-wrapper"
     role="toolbar"
   >
@@ -893,6 +906,7 @@ exports[`<AriaToolbar /> snapshot should set tab index appropriately - vertical
 >
   <div
     aria-label="test"
+    aria-orientation="vertical"
     className="md-aria-toolbar-wrapper"
     role="toolbar"
   >
@@ -1021,6 +1035,7 @@ exports[`<AriaToolbar /> snapshot should set tab index appropriately - vertical
 >
   <div
     aria-label="test"
+    aria-orientation="vertical"
     className="md-aria-toolbar-wrapper"
     role="toolbar"
   >
@@ -1145,6 +1160,7 @@ exports[`<AriaToolbar /> snapshot should update order if triggered externally 1`
 <div>
   <div
     aria-label="test"
+    aria-orientation="vertical"
     class="md-aria-toolbar-wrapper"
     role="toolbar"
   >
@@ -1172,6 +1188,7 @@ exports[`<AriaToolbar /> snapshot should update order if triggered externally 2`
 <div>
   <div
     aria-label="test"
+    aria-orientation="vertical"
     class="md-aria-toolbar-wrapper"
     role="toolbar"
   >
@@ -1199,6 +1216,7 @@ exports[`<AriaToolbar /> snapshot should update order if triggered externally 3`
 <div>
   <div
     aria-label="test"
+    aria-orientation="vertical"
     class="md-aria-toolbar-wrapper"
     role="toolbar"
   >
@@ -1226,6 +1244,7 @@ exports[`<AriaToolbar /> snapshot should update order if triggered externally 4`
 <div>
   <div
     aria-label="test"
+    aria-orientation="vertical"
     class="md-aria-toolbar-wrapper"
     role="toolbar"
   >

src/components/ReactionPicker/ReactionPicker.unit.test.tsx.snap

@@ -13,6 +13,7 @@ exports[`<ReactionPicker /> snapshot should match snapshot 1`] = `
   >
     <div
       aria-label="test-aria-label"
+      aria-orientation="horizontal"
       className="md-reaction-picker-wrapper md-aria-toolbar-wrapper"
       role="toolbar"
     />
@@ -33,6 +34,7 @@ exports[`<ReactionPicker /> snapshot should match snapshot with children 1`] = `
   >
     <div
       aria-label="test-aria-label"
+      aria-orientation="horizontal"
       className="md-reaction-picker-wrapper md-aria-toolbar-wrapper"
       role="toolbar"
     >
@@ -132,6 +134,7 @@ exports[`<ReactionPicker /> snapshot should match snapshot with className 1`] =
   >
     <div
       aria-label="test-aria-label"
+      aria-orientation="horizontal"
       className="example-class md-reaction-picker-wrapper md-aria-toolbar-wrapper"
       role="toolbar"
     />
@@ -154,6 +157,7 @@ exports[`<ReactionPicker /> snapshot should match snapshot with id 1`] = `
   >
     <div
       aria-label="test-aria-label"
+      aria-orientation="horizontal"
       className="md-reaction-picker-wrapper md-aria-toolbar-wrapper"
       id="example-id"
       role="toolbar"
@@ -185,6 +189,7 @@ exports[`<ReactionPicker /> snapshot should match snapshot with style 1`] = `
   >
     <div
       aria-label="test-aria-label"
+      aria-orientation="horizontal"
       className="md-reaction-picker-wrapper md-aria-toolbar-wrapper"
       role="toolbar"
       style={