Vue3 Accessible Tabs

A simple tabs component plugin for Vue 3. Follows the Tabs Design Pattern in WAI-ARIA Authoring Practices 1.1 for accessibility best practices automatically built into the plugin.

Install

npm i vue3-accessible-tabs

or

yarn add vue3-acccessible-tabs

Register as a Global Component

 import { createApp } from 'vue';
import App from './App.vue'
import vue3_accessible_accordion from 'vue3-accessible-tabs';

const app = createApp(App)
			.use(vue3_accessible_tabs);
			.mount('#app')

Register Components Individually

 import Tabs, TabList, Tab, TabPanel from 'vue3-accessible-tabs';

export default {
	components: {
    	Tabs,
        TabList,
        Tab,
        TabPanel,
    }
}

Example Usage

 <tabs>
	<tab-list>
    	<tab>Description</tab>
        <tab>Specifications</tab>
        <tab>Reviews</tab>
    </tab-list>

    <tab-panel>Description tab info</tab-panel>
    <tab-panel>Specifications tab info</tab-panel>
    <tab-panel>Review tab info</tab-panel>
</tabs>

Config

Plugin Options

 import { createApp } from 'vue';
import App from './App.vue'
import vue3_accessible_accordion from 'vue3-accessible-tabs';

const app = createApp(App)
			.use(vue3_accessible_tabs, {
            	hash_change: false,
                active_class: 'is-active',
                diasbled_classes: 'is-disabled',
                tab_movement: false,
            });
			.mount('#app')

Option	Type	Default	Description
hash_change	Boolean	false	Controls whether tabs should use fragments
active_class	String	'is-active'	CSS class added to a tab and tab panel when they are active
disabled_class	String	'is-disabled'	CSS class added to a tab and tab panel when they are disabled
tab_movement	Boolean	false	Controls whether a tab should become active if it receives focus

Components

<tabs>

Props

Prop	Type	Default	Required	Description
modelValue	Number	0	No	Index of the tab that should initially be active
id	String	undefined	No	ID to set on the tab panel and be linked to the tab automatically. Will control the fragment being used if the hash_change option is true

Events

None

<tab-list>

Props

Prop	Type	Default	Required	Description
label	String	Tabs	Yes	Value for the aria-label attribute to provide a descriptive label of the tab list

Events

None

<tab>

Props

Prop	Type	Default	Required	Description
tag	String	a	No	HTML tag to wrap around the text of the tab
disabled	Boolean	false	No	Controls whether the tab should be disabled or not
activeClass	String	is-active	No	CSS class added when the tab is active
disabledClass	String	is-disabled	No	CSS class added when the tab is disabled

Events

None

Scoped Slots

• is-active

Project setup

yarn

Compiles and hot-reloads for development

yarn serve

Compiles and minifies for production

yarn build