Tab orientation (#420)

* Add missing aria property * Patch
LaunchPadLab · Feb 11, 2020 · afb025b · afb025b
1 parent e765f28
commit afb025b
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 2 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@launchpadlab/lp-components",
-  "version": "3.31.0",
+  "version": "3.31.1",
   "engines": {
     "node": "^8.0.0 || ^10.13.0"
   },

diff --git a/src/controls/tab-bar/tab-bar.js b/src/controls/tab-bar/tab-bar.js
@@ -54,7 +54,11 @@ function TabBar ({ vertical, options, value, onChange, className, activeClassNam
   const alignment = vertical ? 'vertical' : 'horizontal'
 
   return (
-    <ul className={ classnames('tabs', `${alignment}-tabs`, className) } role="tablist">
+    <ul
+      className={ classnames('tabs', `${alignment}-tabs`, className) }
+      role="tablist"
+      aria-orientation={alignment}
+    >
       {
         optionObjects.map(({ key, value: optionValue }) => {
           const isActive = optionValue === activeValue

diff --git a/test/controls/tab-bar.test.js b/test/controls/tab-bar.test.js
@@ -55,6 +55,14 @@ test('TabBar assigns appropriate aria roles', () => {
   expect(wrapper.find('li > a').every('[role="tab"]')).toBe(true)
 })
 
+test('TabBar assigns appropriate aria orientation', () => {
+  const horizontalWrapper = mount(<TabBar options={defaultOptions} vertical={false} />)
+  const verticalWrapper = mount(<TabBar options={defaultOptions} vertical />)
+
+  expect(horizontalWrapper.find('[role="tablist"]').prop('aria-orientation')).toBe('horizontal')
+  expect(verticalWrapper.find('[role="tablist"]').prop('aria-orientation')).toBe('vertical')
+})
+
 test('TabBar assigns unique id to tab', () => {
   const wrapper = mount(<TabBar options={defaultOptions} />)
   expect(wrapper.find('li > a').first().prop('id')).toContain(defaultOptions[0].toLowerCase())