Better aria accessibility support

cristijora · Dec 7, 2017 · 0f711a8 · 0f711a8
1 parent df24ea2
commit 0f711a8
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 4 deletions.
diff --git a/src/components/VTab.js b/src/components/VTab.js
@@ -30,6 +30,9 @@ export default {
         },
         hash () {
             return `#${this.id}`
+        },
+        tabId () {
+            return this.id ? this.id : this.title
         }
     },
     data () {
@@ -50,6 +53,8 @@ export default {
     render () {
         return (
             <section class="tab-container"
+                     id={`p-${this.tabId}`}
+                     aria-labelledby={`t-${this.tabId}`}
                      role="tabpanel" v-show={this.active}>
                 {this.$slots.default}
             </section>)

diff --git a/src/components/VueTabs.js b/src/components/VueTabs.js
@@ -142,13 +142,16 @@ export default {
         renderTabs () {
             return this.tabs.map((tab, index) => {
                 if (!tab) return
-                let {route, id, title, icon} = tab
+                let {route, id, title, icon, tabId} = tab
                 let active = this.activeTabIndex === index
                 return (
                     <li name="tab" onClick={() => !tab.disabled && this.navigateToTab(index, route)}
                         class={['tab', {active: active}, {disabled: tab.disabled}]}
                         key={title}
-                        role="presentation">
+                        id={`t-${tabId}`}
+                        aria-selected={active}
+                        aria-controls={`p-${tabId}`}
+                        role="tab">
                         {this.textPosition === 'top' &&
                         this.renderTabTitle(index, this.textPosition)
                         }
@@ -159,8 +162,6 @@ export default {
                            }}
                            style={active ? this.activeTabStyle : this.tabStyles(tab)}
                            class={[{'active_tab': active}, 'tabs__link']}
-                           aria-selected={active}
-                           aria-controls={`#${id}`}
                            role="tab">
                             {this.textPosition !== 'center' && !tab.$slots.title && this.renderIcon(index)}
                             {this.textPosition === 'center' &&