vertumnus
/
primevue-mirror
mirror of https://github.com/primefaces/primevue.git
1
0
Fork 0
Code Packages Releases Activity

Refactor

pull/5677/head
mertsincan 2024-04-25 00:54:39 +01:00
parent 305af028fc
commit 38b4683485
2 changed files with 23 additions and 31 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
doc/tabs/AccessibilityDoc.vue
View File

@ -2,9 +2,9 @@
<DocSectionText id="accessibility" label="Accessibility" v-bind="$attrs">
<h3>Screen Reader</h3>
<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.
The tabs container in TabList 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 Tabs. Each Tab has a
<i>tab</i> role along with <i>aria-selected</i> state attribute and <i>aria-controls</i> to refer to the corresponding TabPanel. TabPanel has <i>tabpanel</i> role, an id to match the <i>aria-controls</i> of Tab and
<i>aria-labelledby</i> reference to Tab as the accessible name.
</p>
<h3>Tab Keyboard Support</h3>

48
doc/tabs/TemplateDoc.vue
View File

@ -9,14 +9,12 @@
<Avatar image="https://primefaces.org/cdn/primevue/images/avatar/amyelsner.png" shape="circle" />
<span class="font-bold white-space-nowrap">Amy Elsner</span>
</Tab>
<Tab v-slot="{ a11yAttrs, onClick }" value="1" asChild>
<div class="flex align-items-center gap-2" @click="onClick" v-bind="a11yAttrs">
<Avatar image="https://primefaces.org/cdn/primevue/images/avatar/onyamalimba.png" shape="circle" />
<span class="font-bold white-space-nowrap">Onyama Limba</span>
</div>
<Tab value="1" as="div" class="flex align-items-center gap-2">
<Avatar image="https://primefaces.org/cdn/primevue/images/avatar/onyamalimba.png" shape="circle" />
<span class="font-bold white-space-nowrap">Onyama Limba</span>
</Tab>
<Tab v-slot="{ a11yAttrs, onClick }" value="2" asChild>
<div class="flex align-items-center gap-2" @click="onClick" v-bind="a11yAttrs">
<Tab v-slot="slotProps" value="2" asChild>
<div :class="['flex align-items-center gap-2', slotProps.class]" @click="slotProps.onClick" v-bind="slotProps.a11yAttrs">
<Avatar image="https://primefaces.org/cdn/primevue/images/avatar/ionibowcher.png" shape="circle" />
<span class="font-bold white-space-nowrap">Ioni Bowcher</span>
<Badge value="2" />
@ -58,14 +56,12 @@ export default {
<Avatar image="https://primefaces.org/cdn/primevue/images/avatar/amyelsner.png" shape="circle" />
<span class="font-bold white-space-nowrap">Amy Elsner</span>
</Tab>
<Tab v-slot="{ a11yAttrs, onClick }" value="1" asChild>
<div class="flex align-items-center gap-2" @click="onClick" v-bind="a11yAttrs">
<Avatar image="https://primefaces.org/cdn/primevue/images/avatar/onyamalimba.png" shape="circle" />
<span class="font-bold white-space-nowrap">Onyama Limba</span>
</div>
<Tab value="1" as="div" class="flex align-items-center gap-2">
<Avatar image="https://primefaces.org/cdn/primevue/images/avatar/onyamalimba.png" shape="circle" />
<span class="font-bold white-space-nowrap">Onyama Limba</span>
</Tab>
<Tab v-slot="{ a11yAttrs, onClick }" value="2" asChild>
<div class="flex align-items-center gap-2" @click="onClick" v-bind="a11yAttrs">
<Tab v-slot="slotProps" value="2" asChild>
<div :class="['flex align-items-center gap-2', slotProps.class]" @click="slotProps.onClick" v-bind="slotProps.a11yAttrs">
<Avatar image="https://primefaces.org/cdn/primevue/images/avatar/ionibowcher.png" shape="circle" />
<span class="font-bold white-space-nowrap">Ioni Bowcher</span>
<Badge value="2" />
@ -101,14 +97,12 @@ export default {
<Avatar image="https://primefaces.org/cdn/primevue/images/avatar/amyelsner.png" shape="circle" />
<span class="font-bold white-space-nowrap">Amy Elsner</span>
</Tab>
<Tab v-slot="{ a11yAttrs, onClick }" value="1" asChild>
<div class="flex align-items-center gap-2" @click="onClick" v-bind="a11yAttrs">
<Avatar image="https://primefaces.org/cdn/primevue/images/avatar/onyamalimba.png" shape="circle" />
<span class="font-bold white-space-nowrap">Onyama Limba</span>
</div>
<Tab value="1" as="div" class="flex align-items-center gap-2">
<Avatar image="https://primefaces.org/cdn/primevue/images/avatar/onyamalimba.png" shape="circle" />
<span class="font-bold white-space-nowrap">Onyama Limba</span>
</Tab>
<Tab v-slot="{ a11yAttrs, onClick }" value="2" asChild>
<div class="flex align-items-center gap-2" @click="onClick" v-bind="a11yAttrs">
<Tab v-slot="slotProps" value="2" asChild>
<div :class="['flex align-items-center gap-2', slotProps.class]" @click="slotProps.onClick" v-bind="slotProps.a11yAttrs">
<Avatar image="https://primefaces.org/cdn/primevue/images/avatar/ionibowcher.png" shape="circle" />
<span class="font-bold white-space-nowrap">Ioni Bowcher</span>
<Badge value="2" />
@ -149,14 +143,12 @@ export default {
<Avatar image="https://primefaces.org/cdn/primevue/images/avatar/amyelsner.png" shape="circle" />
<span class="font-bold white-space-nowrap">Amy Elsner</span>
</Tab>
<Tab v-slot="{ a11yAttrs, onClick }" value="1" asChild>
<div class="flex align-items-center gap-2" @click="onClick" v-bind="a11yAttrs">
<Avatar image="https://primefaces.org/cdn/primevue/images/avatar/onyamalimba.png" shape="circle" />
<span class="font-bold white-space-nowrap">Onyama Limba</span>
</div>
<Tab value="1" as="div" class="flex align-items-center gap-2">
<Avatar image="https://primefaces.org/cdn/primevue/images/avatar/onyamalimba.png" shape="circle" />
<span class="font-bold white-space-nowrap">Onyama Limba</span>
</Tab>
<Tab v-slot="{ a11yAttrs, onClick }" value="2" asChild>
<div class="flex align-items-center gap-2" @click="onClick" v-bind="a11yAttrs">
<Tab v-slot="slotProps" value="2" asChild>
<div :class="['flex align-items-center gap-2', slotProps.class]" @click="slotProps.onClick" v-bind="slotProps.a11yAttrs">
<Avatar image="https://primefaces.org/cdn/primevue/images/avatar/ionibowcher.png" shape="circle" />
<span class="font-bold white-space-nowrap">Ioni Bowcher</span>
<Badge value="2" />