Fixed #2896 - Improve TabView implementation for Accessibility

api-generator/components/tabpanel.js

@@ -5,6 +5,48 @@ const TabPanelProps = [
         default: "null",
         description: "Orientation of tab headers."
     },
+    {
+        name: "headerStyle",
+        type: "any",
+        default: "null",
+        description: "Inline style of the tab header."
+    },
+    {
+        name: "headerClass",
+        type: "any",
+        default: "null",
+        description: "Style class of the tab header."
+    },
+    {
+        name: "headerProps",
+        type: "any",
+        default: "null",
+        description: "Uses to pass all properties of the HTMLLiElement to the tab header."
+    },
+    {
+        name: "headerActionProps",
+        type: "any",
+        default: "null",
+        description: "Uses to pass all properties of the HTMLAnchorElement to the focusable anchor element inside the tab header."
+    },
+    {
+        name: "contentStyle",
+        type: "any",
+        default: "null",
+        description: "Inline style of the tab content."
+    },
+    {
+        name: "contentClass",
+        type: "any",
+        default: "null",
+        description: "Style class of the tab content."
+    },
+    {
+        name: "contentProps",
+        type: "any",
+        default: "null",
+        description: "Uses to pass all properties of the HTMLDivElement to the tab content."
+    },
     {
         name: "disabled",
         type: "boolean",

api-generator/components/tabview.js

@@ -16,6 +16,65 @@ const TabViewProps = [
         type: "boolean",
         default: "false",
         description: "When enabled displays buttons at each side of the tab headers to scroll the tab list."
+    },
+    {
+        name: "tabindex",
+        type: "number",
+        default: "0",
+        description: "Index of the element in tabbing order."
+    },
+    {
+        name: "selectOnFocus",
+        type: "boolean",
+        default: "false",
+        description: "When enabled, the focused tab is activated."
+    },
+    {
+        name: "previousButtonProps",
+        type: "any",
+        default: "null",
+        description: "Uses to pass all properties of the HTMLButtonElement to the previous button."
+    },
+    {
+        name: "nextButtonProps",
+        type: "any",
+        default: "null",
+        description: "Uses to pass all properties of the HTMLButtonElement to the next button."
+    }
+];
+
+const TabViewEvents = [
+    {
+        name: "tab-change",
+        description: "Callback to invoke when an active tab is changed.",
+        arguments: [
+            {
+                name: "originalEvent",
+                type: "object",
+                description: "Original event"
+            },
+            {
+                name: "index",
+                type: "number",
+                description: "Index of the selected tab"
+            }
+        ]
+    },
+    {
+        name: "tab-click",
+        description: "Callback to invoke when an active tab is clicked.",
+        arguments: [
+            {
+                name: "originalEvent",
+                type: "object",
+                description: "Original event"
+            },
+            {
+                name: "index",
+                type: "number",
+                description: "Index of the clicked tab"
+            }
+        ]
     }
 ];
 
@@ -23,6 +82,7 @@ module.exports = {
     tabview: {
         name: "TabView",
         description: "TabView is a container component to group content with tabs.",
-        props: TabViewProps
+        props: TabViewProps,
+        event: TabViewEvents
     }
 };

src/components/config/PrimeVue.d.ts

@@ -24,6 +24,8 @@ interface PrimeVueLocaleAriaOptions {
     selectAll?: string;
     unselectAll?: string;
     close?: string;
+    previous?: string;
+    next?: string;
 }
 
 interface PrimeVueLocaleOptions {

src/components/config/PrimeVue.js

@@ -75,7 +75,9 @@ const defaultOptions = {
             stars: '{star} stars',
             selectAll: 'All items selected',
             unselectAll: 'All items unselected',
-            close: 'Close'
+            close: 'Close',
+            previous: 'Previous',
+            next: 'Next'
         }
     },
     filterMatchModeOptions: {

src/components/tabpanel/TabPanel.d.ts

@@ -1,4 +1,4 @@
-import { VNode } from 'vue';
+import { AnchorHTMLAttributes, HTMLAttributes, LiHTMLAttributes, VNode } from 'vue';
 import { ClassComponent, GlobalComponentConstructor } from '../ts-helpers';
 
 export interface TabPanelProps {
@@ -6,6 +6,34 @@ export interface TabPanelProps {
      * Orientation of tab headers.
      */
     header?: string | undefined;
+    /**
+     * Inline style of the tab header.
+     */
+    headerStyle?: any;
+    /**
+     * Style class of the tab header.
+     */
+    headerClass?: any;
+    /**
+     * Uses to pass all properties of the HTMLLiElement to the tab header.
+     */
+    headerProps?: LiHTMLAttributes | undefined;
+    /**
+     * Uses to pass all properties of the HTMLAnchorElement to the focusable anchor element inside the tab header.
+     */
+    headerActionProps?: AnchorHTMLAttributes | undefined;
+    /**
+     * Inline style of the tab content.
+     */
+    contentStyle?: any;
+    /**
+     * Style class of the tab content.
+     */
+    contentClass?: any;
+    /**
+     * Uses to pass all properties of the HTMLDivElement to the tab content.
+     */
+    contentProps?: HTMLAttributes | undefined;
     /**
      * Whether the tab is disabled.
      */

src/components/tabpanel/TabPanel.vue

@@ -7,6 +7,13 @@ export default {
     name: 'TabPanel',
     props: {
         header: null,
+        headerStyle: null,
+        headerClass: null,
+        headerProps: null,
+        headerActionProps: null,
+        contentStyle: null,
+        contentClass: null,
+        contentProps: null,
         disabled: Boolean
     }
 }

src/components/tabview/TabView.d.ts

@@ -1,4 +1,4 @@
-import { VNode } from 'vue';
+import { ButtonHTMLAttributes, VNode } from 'vue';
 import { ClassComponent, GlobalComponentConstructor } from '../ts-helpers';
 
 export interface TabViewChangeEvent {
@@ -30,6 +30,22 @@ export interface TabViewProps {
      * When enabled displays buttons at each side of the tab headers to scroll the tab list.
      */
     scrollable?: boolean | undefined;
+    /**
+     * Index of the element in tabbing order.
+     */
+    tabindex?: number | undefined;
+    /**
+     * When enabled, the focused tab is activated.
+     */
+    selectOnFocus?: boolean | undefined;
+    /**
+     * Uses to pass all properties of the HTMLButtonElement to the previous button.
+     */
+    previousButtonProps?: ButtonHTMLAttributes | undefined;
+    /**
+     * Uses to pass all properties of the HTMLButtonElement to the next button.
+     */
+    nextButtonProps?: ButtonHTMLAttributes | undefined;
 }
 
 export interface TabViewSlots {

src/components/tabview/TabView.vue

@@ -1,27 +1,32 @@
 <template>
     <div :class="contentClasses">
         <div class="p-tabview-nav-container">
-            <button v-if="scrollable && !backwardIsDisabled" ref="prevBtn" :class="prevButtonClasses" @click="navBackward" type="button" v-ripple>
+            <button v-if="scrollable && !isPrevButtonDisabled" ref="prevBtn" type="button" class="p-tabview-nav-prev p-tabview-nav-btn p-link"
-				<span class="pi pi-chevron-left"></span>
+                :tabindex="tabindex" :aria-label="prevButtonAriaLabel" @click="onPrevButtonClick" v-bind="previousButtonProps" v-ripple>
+				<span class="pi pi-chevron-left" aria-hidden="true"></span>
 			</button>
             <div ref="content" class="p-tabview-nav-content" @scroll="onScroll">
                 <ul ref="nav" class="p-tabview-nav" role="tablist">
-                    <li role="presentation" v-for="(tab, i) of tabs" :key="getKey(tab,i)" :class="[{'p-highlight': (d_activeIndex === i), 'p-disabled': isTabDisabled(tab)}]">
+                    <li v-for="(tab, i) of tabs" :key="getKey(tab,i)" :style="getTabProp(tab, 'headerStyle')" :class="getTabHeaderClass(tab, i)" role="presentation" :data-index="i" v-bind="getTabProp(tab, 'headerProps')">
-                        <a role="tab" class="p-tabview-nav-link" @click="onTabClick($event, i)" @keydown="onTabKeydown($event, i)" :tabindex="isTabDisabled(tab) ? null : '0'" :aria-selected="d_activeIndex === i" v-ripple>
+                        <a :id="getTabHeaderActionId(i)" class="p-tabview-nav-link p-tabview-header-action" :tabindex="getTabProp(tab, 'disabled') || !isTabActive(i) ? -1 : tabindex"
+                            role="tab" :aria-disabled="getTabProp(tab, 'disabled')" :aria-selected="isTabActive(i)" :aria-controls="getTabContentId(i)"
+                            @click="onTabClick($event, tab, i)" @keydown="onTabKeyDown($event, tab, i)" v-bind="getTabProp(tab, 'headerActionProps')" v-ripple>
                             <span class="p-tabview-title" v-if="tab.props && tab.props.header">{{tab.props.header}}</span>
                             <component :is="tab.children.header" v-if="tab.children && tab.children.header"></component>
                         </a>
                     </li>
-                    <li ref="inkbar" class="p-tabview-ink-bar"></li>
+                    <li ref="inkbar" class="p-tabview-ink-bar" role="presentation" aria-hidden="true"></li>
                 </ul>
             </div>
-            <button v-if="scrollable && !forwardIsDisabled" ref="nextBtn" :class="nextButtonClasses" @click="navForward" type="button" v-ripple>
+            <button v-if="scrollable && !isNextButtonDisabled" ref="nextBtn" type="button" class="p-tabview-nav-next p-tabview-nav-btn p-link"
-				<span class="pi pi-chevron-right"></span>
+                :tabindex="tabindex" :aria-label="nextButtonAriaLabel" @click="onNextButtonClick" v-bind="nextButtonProps" v-ripple>
+				<span class="pi pi-chevron-right" aria-hidden="true"></span>
 			</button>
         </div>
         <div class="p-tabview-panels">
             <template v-for="(tab, i) of tabs" :key="getKey(tab,i)">
-                <div  class="p-tabview-panel" role="tabpanel" v-if="lazy ? (d_activeIndex === i) : true" v-show="lazy ? true: (d_activeIndex === i)">
+                <div v-if="lazy ? isTabActive(i) : true" v-show="lazy ? true: isTabActive(i)" :style="getTabProp(tab, 'contentStyle')" :class="getTabContentClass(tab)"
+                    role="tabpanel" :aria-labelledby="getTabHeaderActionId(i)" v-bind="getTabProp(tab, 'contentProps')">
                     <component :is="tab"></component>
                 </div>
             </template>
@@ -30,7 +35,7 @@
 </template>
 
 <script>
-import {DomHandler} from 'primevue/utils';
+import {UniqueComponentId,DomHandler} from 'primevue/utils';
 import Ripple from 'primevue/ripple';
 
 export default {
@@ -48,50 +53,200 @@ export default {
         scrollable: {
             type: Boolean,
             default: false
-        }
+        },
+        tabindex: {
+            type: Number,
+            default: 0
+        },
+        selectOnFocus: {
+            type: Boolean,
+            default: false
+        },
+        previousButtonProps: null,
+        nextButtonProps: null
     },
     data() {
         return {
+            id: UniqueComponentId(),
             d_activeIndex: this.activeIndex,
-            backwardIsDisabled: true,
+            focusedTabIndex: -1,
-            forwardIsDisabled: false
+            isPrevButtonDisabled: true,
+            isNextButtonDisabled: false
         }
     },
     watch: {
         activeIndex(newValue) {
             this.d_activeIndex = newValue;
 
-            this.updateScrollBar(newValue);
+            this.scrollInView({ index: newValue });
         }
     },
+    mounted() {
+        this.id = this.$attrs.id || this.id;
+
+        this.updateInkBar();
+    },
     updated() {
         this.updateInkBar();
     },
-    mounted() {
-        this.updateInkBar();
-    },
     methods: {
-        onTabClick(event, i) {
+        isTabPanel(child) {
-            if (!this.isTabDisabled(this.tabs[i]) && i !== this.d_activeIndex) {
+            return child.type.name === 'TabPanel';
-                this.d_activeIndex = i;
-                this.$emit('update:activeIndex', this.d_activeIndex);
-
-                this.$emit('tab-change', {
-                    originalEvent: event,
-                    index: i
-                });
-
-                this.updateScrollBar(i);
-            }
-
-            this.$emit('tab-click', {
-                originalEvent: event,
-                index: i
-            });
         },
-        onTabKeydown(event, i) {
+        isTabActive(index) {
-            if (event.which === 13) {
+            return this.d_activeIndex === index;
-                this.onTabClick(event, i);
+        },
+        getTabProp(tab, name) {
+            return tab.props ? tab.props[name] : undefined;
+        },
+        getKey(tab, index) {
+            return this.getTabProp(tab, 'header') || index;
+        },
+        getTabHeaderActionId(index) {
+            return `${this.id}_${index}_header_action`;
+        },
+        getTabContentId(index) {
+            return `${this.id}_${index}_content`;
+        },
+        onScroll(event) {
+            this.scrollable && this.updateButtonState();
+
+            event.preventDefault();
+        },
+        onPrevButtonClick() {
+            const content = this.$refs.content;
+            const width = DomHandler.getWidth(content) - this.getVisibleButtonWidths();
+            const pos = content.scrollLeft - width;
+            content.scrollLeft = pos <= 0 ? 0 : pos;
+        },
+        onNextButtonClick() {
+            const content = this.$refs.content;
+            const width = DomHandler.getWidth(content) - this.getVisibleButtonWidths();
+            const pos = content.scrollLeft + width;
+            const lastPos = content.scrollWidth - width;
+
+            content.scrollLeft = pos >= lastPos ? lastPos : pos;
+        },
+        onTabClick(event, tab, index) {
+            this.changeActiveIndex(event, tab, index);
+            this.$emit('tab-click', { originalEvent: event, index });
+        },
+        onTabKeyDown(event, tab, index) {
+            switch (event.code) {
+                case 'ArrowLeft':
+                    this.onTabArrowLeftKey(event);
+                    break;
+
+                case 'ArrowRight':
+                    this.onTabArrowRightKey(event);
+                    break;
+
+                case 'Home':
+                    this.onTabHomeKey(event);
+                    break;
+
+                case 'End':
+                    this.onTabEndKey(event);
+                    break;
+
+                case 'PageDown':
+                    this.onPageDownKey(event);
+                    break;
+
+                case 'PageUp':
+                    this.onPageUpKey(event);
+                    break;
+
+                case 'Enter':
+                case 'Space':
+                    this.onTabEnterKey(event, tab, index);
+                    break;
+
+                default:
+                    break;
+            }
+        },
+        onTabArrowRightKey(event) {
+            const nextHeaderAction = this.findNextHeaderAction(event.target.parentElement);
+
+            nextHeaderAction ? this.changeFocusedTab(event, nextHeaderAction) : this.onTabHomeKey(event);
+            event.preventDefault();
+        },
+        onTabArrowLeftKey(event) {
+            const prevHeaderAction = this.findPrevHeaderAction(event.target.parentElement);
+
+            prevHeaderAction ? this.changeFocusedTab(event, prevHeaderAction) : this.onTabEndKey(event);
+            event.preventDefault();
+        },
+        onTabHomeKey(event) {
+            const firstHeaderAction = this.findFirstHeaderAction();
+
+            this.changeFocusedTab(event, firstHeaderAction);
+            event.preventDefault();
+        },
+        onTabEndKey(event) {
+            const lastHeaderAction = this.findLastHeaderAction();
+
+            this.changeFocusedTab(event, lastHeaderAction);
+            event.preventDefault();
+        },
+        onPageDownKey(event) {
+            this.scrollInView({ index: this.$refs.nav.children.length - 2 });
+            event.preventDefault();
+        },
+        onPageUpKey(event) {
+            this.scrollInView({ index: 0 });
+            event.preventDefault();
+        },
+        onTabEnterKey(event, tab, index) {
+            this.changeActiveIndex(event, tab, index);
+
+            event.preventDefault();
+        },
+        findNextHeaderAction(tabElement, selfCheck = false) {
+            const headerElement = selfCheck ? tabElement : tabElement.nextElementSibling;
+
+            return headerElement ? (DomHandler.hasClass(headerElement, 'p-disabled') || DomHandler.hasClass(headerElement, 'p-tabview-ink-bar') ? this.findNextHeaderAction(headerElement) : DomHandler.findSingle(headerElement, '.p-tabview-header-action')) : null;
+        },
+        findPrevHeaderAction(tabElement, selfCheck = false) {
+            const headerElement = selfCheck ? tabElement : tabElement.previousElementSibling;
+
+            return headerElement ? (DomHandler.hasClass(headerElement, 'p-disabled') || DomHandler.hasClass(headerElement, 'p-tabview-ink-bar') ? this.findPrevHeaderAction(headerElement) : DomHandler.findSingle(headerElement, '.p-tabview-header-action')) : null;
+        },
+        findFirstHeaderAction() {
+            return this.findNextHeaderAction(this.$refs.nav.firstElementChild, true);
+        },
+        findLastHeaderAction() {
+            return this.findPrevHeaderAction(this.$refs.nav.lastElementChild, true);
+        },
+        changeActiveIndex(event, tab, index) {
+            if (!this.getTabProp(tab, 'disabled') && this.d_activeIndex !== index) {
+                this.d_activeIndex = index;
+
+                this.$emit('update:activeIndex', index);
+                this.$emit('tab-change', { originalEvent: event, index });
+
+                this.scrollInView({ index });
+            }
+        },
+        changeFocusedTab(event, element) {
+            if (element) {
+                element.focus();
+                this.scrollInView({ element });
+
+                if (this.selectOnFocus) {
+                    const index = parseInt(element.parentElement.dataset.index, 10);
+                    const tab = this.tabs[index];
+
+                    this.changeActiveIndex(event, tab, index);
+                }
+            }
+        },
+        scrollInView({ element, index = -1 }) {
+            const currentElement = element || this.$refs.nav.children[index];
+
+            if (currentElement) {
+                currentElement.scrollIntoView && currentElement.scrollIntoView({ block: 'nearest' });
             }
         },
         updateInkBar() {
@@ -99,78 +254,56 @@ export default {
             this.$refs.inkbar.style.width = DomHandler.getWidth(tabHeader) + 'px';
             this.$refs.inkbar.style.left =  DomHandler.getOffset(tabHeader).left - DomHandler.getOffset(this.$refs.nav).left + 'px';
         },
-        updateScrollBar(index) {
-            let tabHeader = this.$refs.nav.children[index];
-            tabHeader.scrollIntoView({ block: 'nearest' })
-        },
         updateButtonState() {
             const content = this.$refs.content;
             const { scrollLeft, scrollWidth } = content;
             const width = DomHandler.getWidth(content);
 
-            this.backwardIsDisabled = scrollLeft === 0;
+            this.isPrevButtonDisabled = scrollLeft === 0;
-            this.forwardIsDisabled = parseInt(scrollLeft) === scrollWidth - width;
+            this.isNextButtonDisabled = parseInt(scrollLeft) === scrollWidth - width;
-        },
-        getKey(tab, i) {
-            return (tab.props && tab.props.header) ? tab.props.header : i;
-        },
-        isTabDisabled(tab) {
-            return (tab.props && tab.props.disabled);
-        },
-        isTabPanel(child) {
-            return child.type.name === 'TabPanel'
-        },
-        onScroll(event) {
-            this.scrollable && this.updateButtonState();
-
-            event.preventDefault();
         },
         getVisibleButtonWidths() {
             const { prevBtn, nextBtn } = this.$refs;
 
             return [prevBtn, nextBtn].reduce((acc, el) => el ? acc + DomHandler.getWidth(el) : acc, 0);
         },
-        navBackward() {
+        getTabHeaderClass(tab, i) {
-            const content = this.$refs.content;
+            return ['p-tabview-header', this.getTabProp(tab, 'headerClass'), {
-            const width = DomHandler.getWidth(content) - this.getVisibleButtonWidths();
+                'p-highlight': (this.d_activeIndex === i),
-            const pos = content.scrollLeft - width;
+                'p-disabled': this.getTabProp(tab, 'disabled')
-            content.scrollLeft = pos <= 0 ? 0 : pos;
+            }];
         },
-        navForward() {
+        getTabContentClass(tab) {
-            const content = this.$refs.content;
+            return ['p-tabview-panel', this.getTabProp(tab, 'contentClass')];
-            const width = DomHandler.getWidth(content) - this.getVisibleButtonWidths();
-            const pos = content.scrollLeft + width;
-            const lastPos = content.scrollWidth - width;
-
-            content.scrollLeft = pos >= lastPos ? lastPos : pos;
         }
     },
     computed: {
         contentClasses() {
-			return ['p-tabview p-component', {'p-tabview-scrollable': this.scrollable}];
+			return ['p-tabview p-component', {
+                'p-tabview-scrollable': this.scrollable
+            }];
 		},
-        prevButtonClasses() {
-            return ['p-tabview-nav-prev p-tabview-nav-btn p-link']
-        },
-        nextButtonClasses() {
-            return ['p-tabview-nav-next p-tabview-nav-btn p-link']
-        },
         tabs() {
-            const tabs = []
+            return this.$slots.default().reduce((tabs, child) => {
-            this.$slots.default().forEach(child => {
+                if (this.isTabPanel(child)) {
-                    if (this.isTabPanel(child)) {
+                    tabs.push(child);
-                        tabs.push(child);
-                    }
-                    else if (child.children && child.children instanceof Array) {
-                        child.children.forEach(nestedChild => {
-                            if (this.isTabPanel(nestedChild)) {
-                                tabs.push(nestedChild)
-                            }
-                        });
-                    }
                 }
-            )
+                else if (child.children && child.children instanceof Array) {
-            return tabs;
+                    child.children.forEach(nestedChild => {
+                        if (this.isTabPanel(nestedChild)) {
+                            tabs.push(nestedChild);
+                        }
+                    });
+                }
+
+                return tabs;
+            }, []);
+        },
+        prevButtonAriaLabel() {
+            return this.$primevue.config.locale.aria ? this.$primevue.config.locale.aria.previous : undefined;
+        },
+        nextButtonAriaLabel() {
+            return this.$primevue.config.locale.aria ? this.$primevue.config.locale.aria.next : undefined;
         }
     },
     directives: {
@@ -204,7 +337,7 @@ export default {
     flex: 1 1 auto;
 }
 
-.p-tabview-nav-link {
+.p-tabview-header-action {
     cursor: pointer;
     user-select: none;
     display: flex;
@@ -219,7 +352,7 @@ export default {
     z-index: 1;
 }
 
-.p-tabview-nav-link:focus {
+.p-tabview-header-action:focus {
     z-index: 1;
 }
 

src/views/tabview/TabViewDoc.vue

@@ -216,6 +216,48 @@ export default {
                         <td>null</td>
                         <td>Orientation of tab headers.</td>
                     </tr>
+                    <tr>
+                        <td>headerStyle</td>
+                        <td>string</td>
+                        <td>null</td>
+                        <td>Inline style of the tab header.</td>
+                    </tr>
+                    <tr>
+                        <td>headerClass</td>
+                        <td>string</td>
+                        <td>null</td>
+                        <td>Style class of the tab header.</td>
+                    </tr>
+                    <tr>
+                        <td>headerProps</td>
+                        <td>object</td>
+                        <td>null</td>
+                        <td>Uses to pass all properties of the HTMLLiElement to the tab header.</td>
+                    </tr>
+                    <tr>
+                        <td>headerActionProps</td>
+                        <td>object</td>
+                        <td>null</td>
+                        <td>Uses to pass all properties of the HTMLAnchorElement to the focusable anchor element inside the tab header.</td>
+                    </tr>
+                    <tr>
+                        <td>contentStyle</td>
+                        <td>string</td>
+                        <td>null</td>
+                        <td>Inline style of the tab content.</td>
+                    </tr>
+                    <tr>
+                        <td>contentClass</td>
+                        <td>string</td>
+                        <td>null</td>
+                        <td>Style class of the tab content.</td>
+                    </tr>
+                    <tr>
+                        <td>contentProps</td>
+                        <td>object</td>
+                        <td>null</td>
+                        <td>Uses to pass all properties of the HTMLDivElement to the tab content.</td>
+                    </tr>
                     <tr>
                         <td>disabled</td>
                         <td>boolean</td>
@@ -256,6 +298,30 @@ export default {
                         <td>boolean</td>
                         <td>false</td>
                         <td>When enabled displays buttons at each side of the tab headers to scroll the tab list.</td>
+                    </tr>
+                    <tr>
+                        <td>tabindex</td>
+                        <td>number</td>
+                        <td>0</td>
+                        <td>Index of the element in tabbing order.</td>
+                    </tr>
+                    <tr>
+                        <td>selectOnFocus</td>
+                        <td>boolean</td>
+                        <td>false</td>
+                        <td>When enabled, the focused tab is activated.</td>
+                    </tr>
+                    <tr>
+                        <td>previousButtonProps</td>
+                        <td>object</td>
+                        <td>null</td>
+                        <td>Uses to pass all properties of the HTMLButtonElement to the previous button.</td>
+                    </tr>
+                    <tr>
+                        <td>nextButtonProps</td>
+                        <td>object</td>
+                        <td>null</td>
+                        <td>Uses to pass all properties of the HTMLButtonElement to the next button.</td>
                     </tr>
 				</tbody>
 			</table>
@@ -325,6 +391,78 @@ export default {
 			</table>
 		</div>
 
+        <h5>Accessibility</h5>
+        <h6>Screen Reader</h6>
+        <p>
+            TabView container is defined with the <i>tablist</i> role, as any attribute is passed to the container element <i>aria-labelledby</i> can be optionally used to specify an element to describe the TabView. Each tab header
+            has a <i>tab</i> role along with <i>aria-selected</i> state attribute and <i>aria-controls</i> to refer to the corresponding tab content element. The content element of each tab has <i>tabpanel</i> role, an id to match the
+            <i>aria-controls</i> of the header and <i>aria-labelledby</i> reference to the header as the accessible name.
+        </p>
+
+        <h6>Tab Header Keyboard Support</h6>
+        <div className="doc-tablewrapper">
+            <table className="doc-table">
+                <thead>
+                    <tr>
+                        <th>Key</th>
+                        <th>Function</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td>
+                            <i>tab</i>
+                        </td>
+                        <td>Moves focus through the header.</td>
+                    </tr>
+                    <tr>
+                        <td>
+                            <i>enter</i>
+                        </td>
+                        <td>Activates the focused tab header.</td>
+                    </tr>
+                    <tr>
+                        <td>
+                            <i>space</i>
+                        </td>
+                        <td>Activates the focused tab header.</td>
+                    </tr>
+                    <tr>
+                        <td>
+                            <i>right arrow</i>
+                        </td>
+                        <td>Moves focus to the next header. If focus is on the last header, moves focus to the first header.</td>
+                    </tr>
+                    <tr>
+                        <td>
+                            <i>left arrow</i>
+                        </td>
+                        <td>Moves focus to the previous header. If focus is on the first header, moves focus to the last header.</td>
+                    </tr>
+                    <tr>
+                        <td>
+                            <i>home</i>
+                        </td>
+                        <td>Moves focus to the last header.</td>
+                    </tr>
+                    <tr>
+                        <td>
+                            <i>end</i>
+                        </td>
+                        <td>Moves focus to the first header.</td>
+                    </tr>
+                    <tr>
+                        <td><i>pageUp</i></td>
+                        <td>Moves scroll position to first header.</td>
+                    </tr>
+                    <tr>
+                        <td><i>pageDown</i></td>
+                        <td>Moves scroll position to last header.</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
+
 		<h5>Dependencies</h5>
 		<p>None.</p>
     </AppDoc>
@@ -818,7 +956,7 @@ export default {
         .tabview-custom span {
             margin: 0 .5rem;
         }
-        
+
 
         .p-tabview p {
             line-height: 1.5;