Vuejs 3 baseline components and composables fo building WAI-ARIA compatible UI components
OTHER License
WAI-ARIA compliant components that come without any styles, plus lower-level utility composables. Meant as a base for building your own component collection while ensuring solid A11y from the get-go.
This project is currently at an exploratory/experimental stage in its development. We are still in the process of figuring out the patterns and designed APIs suited for those patterns.
So:
./packages/docs
import { createApp } from 'vue'
// import the plugin
import { install as plugin } from '@varia/widgets'
import App from './App.vue'
createApp(App)
.use(plugin) // add the plugin to your app
.mount('#app')
<Clickable />
<Tabbable />
<Button />
<Radio />
<Checkbox />
<Disclosure />
<Popover />
<Dialog />
<Accordion />
<Tabs />
<Listbox />
<Grid />
<ComboBox />
<Menu />
<Toolbar />
<FocusTrap />
<Teleport />
<template>
<h2 class="text-xl font-bold mb-2">Basic</h2>
<Tabs v-model="selectedTab">
<TabList class="border-b border-gray-300">
<Tab name="A">Tab A</Tab>
<Tab name="B">Tab B</Tab>
<Tab name="C">Tab C</Tab>
</TabList>
<TabPanel name="A">Panel A</TabPanel>
<TabPanel name="B">Panel B</TabPanel>
<TabPanel name="C">Panel C</TabPanel>
</Tabs>
</template>
<script lang="ts">
import { defineComponent } from 'vue'
import { Tab, TabList, TabPanel, useTabs } from '@varia/widgets'
export default defineComponent({
components: {
Tab,
TabList,
TabPanel,
},
data() {
return {
selectedTab: 'A',
}
},
})
</script>
This gives you:
useTabs()
, <Tab>
and <TabPanel>
abstracted away through provide/inject
I've studied other projects that share the same or or a similar close in my endavour, some more closely than others. If I took anything specific from them you'll find mentions in the source.
Projects:
This project is set up as a monorepo using lerna and yarn workspaces. For this reason, yarn is required to contribute to this project, all found in the ./packages
directory.
@varia/composables
: a suppor package providing lower-level composables, upon which the components in aria-widgets
are built. Can be used standalone as well.@varia/widgets
: the main package, exporting all of the components.docs
: the project's documentation, built with Vuepress
examples
: a Vue CLI app containing examples for all of the components from aria-widgets
. used for e2e testsFor more information on how to contribute, please see the contribution guide