diff --git a/src/components/AriaToolbar/AriaToolbar.constants.ts b/src/components/AriaToolbar/AriaToolbar.constants.ts index cceb388001..ab351702db 100644 --- a/src/components/AriaToolbar/AriaToolbar.constants.ts +++ b/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, }; diff --git a/src/components/AriaToolbar/AriaToolbar.tsx b/src/components/AriaToolbar/AriaToolbar.tsx index ac481d3c22..db3568535a 100644 --- a/src/components/AriaToolbar/AriaToolbar.tsx +++ b/src/components/AriaToolbar/AriaToolbar.tsx @@ -18,7 +18,7 @@ const AriaToolbar: FC = (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) => { 'aria-label': ariaLabel, 'aria-controls': ariaControls, role: 'toolbar', + 'aria-orientation': orientation, ...rest, }; @@ -76,7 +77,7 @@ const AriaToolbar: FC = (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) { diff --git a/src/components/AriaToolbar/AriaToolbar.unit.test.tsx b/src/components/AriaToolbar/AriaToolbar.unit.test.tsx index a775b4cac3..581c207514 100644 --- a/src/components/AriaToolbar/AriaToolbar.unit.test.tsx +++ b/src/components/AriaToolbar/AriaToolbar.unit.test.tsx @@ -273,6 +273,31 @@ describe('', () => { 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( + + ) + .find(AriaToolbar) + .getDOMNode(); + + expect(element.getAttribute('aria-orientation')).toBe(ariaOrientation); + } + ); }); describe('actions', () => { diff --git a/src/components/AriaToolbar/AriaToolbar.unit.test.tsx.snap b/src/components/AriaToolbar/AriaToolbar.unit.test.tsx.snap index 2ca9ecf586..0e8d8ce8ea 100644 --- a/src/components/AriaToolbar/AriaToolbar.unit.test.tsx.snap +++ b/src/components/AriaToolbar/AriaToolbar.unit.test.tsx.snap @@ -7,6 +7,7 @@ exports[` snapshot should match snapshot 1`] = ` >
@@ -26,6 +27,7 @@ exports[` snapshot should match snapshot with aria label + button > snapshot should match snapshot with aria label + button >
snapshot should match snapshot with className 1`] = ` >
@@ -76,6 +80,7 @@ exports[` snapshot should match snapshot with data-test 1`] = ` >
snapshot should match snapshot with id 1`] = ` >