arthur/ui
1
0
Fork 0
mirror of https://github.com/ArthurDanjou/ui.git synced 2026-01-25 17:30:37 +01:00
Code Issues Packages Projects Releases Wiki Activity

fix(Carousel): add tab-based ARIA roles (#1516)

Browse Source
This commit is contained in:
Noah Gregory
2024-03-14 05:32:39 -04:00
committed by GitHub
parent cee3e126a4
commit e736ecafff
1 changed files with 4 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
src/runtime/components/elements/Carousel.vue
View File

@@ -5,6 +5,7 @@
v-for="(item, index) in items" v-for="(item, index) in items"
:key="index" :key="index"
:class="ui.item" :class="ui.item"
:role="indicators ? 'tabpanel' : null"
> >
<slot :item="item" :index="index" /> <slot :item="item" :index="index" />
</div> </div>
@@ -34,11 +35,13 @@
</slot> </slot>
</div> </div>
<div v-if="indicators" :class="ui.indicators.wrapper"> <div v-if="indicators" role="tablist" :class="ui.indicators.wrapper">
<template v-for="page in pages" :key="page"> <template v-for="page in pages" :key="page">
<slot name="indicator" :on-click="onClick" :active="page === currentPage" :page="page"> <slot name="indicator" :on-click="onClick" :active="page === currentPage" :page="page">
<button <button
type="button" type="button"
role="tab"
:aria-selected="page === currentPage"
:class="[ :class="[
ui.indicators.base, ui.indicators.base,
page === currentPage ? ui.indicators.active : ui.indicators.inactive page === currentPage ? ui.indicators.active : ui.indicators.inactive