You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
89 lines
2.2 KiB
89 lines
2.2 KiB
import type { Morfo } from '../types';
|
|
import { v } from '../types';
|
|
|
|
export const tabsMorfo: Morfo = {
|
|
name: 'Tabs',
|
|
kebab: 'tabs',
|
|
scope: ['soma'],
|
|
apg: 'https://www.w3.org/WAI/ARIA/apg/patterns/tabs/',
|
|
parts: [
|
|
{
|
|
name: 'Provider',
|
|
kebab: 'root',
|
|
kind: 'public',
|
|
defaultElement: 'div',
|
|
optional: false,
|
|
data: [
|
|
{ attr: 'data-orientation', values: ['horizontal', 'vertical'] },
|
|
{ attr: 'data-disabled', severity: 'optional' }
|
|
],
|
|
aria: []
|
|
},
|
|
{
|
|
name: 'List',
|
|
kebab: 'list',
|
|
kind: 'public',
|
|
defaultElement: 'div',
|
|
role: 'tablist',
|
|
optional: false,
|
|
data: [{ attr: 'data-orientation', values: ['horizontal', 'vertical'] }],
|
|
aria: [{ attr: 'aria-orientation', value: v.propRef('orientation') }]
|
|
},
|
|
{
|
|
name: 'Trigger',
|
|
kebab: 'trigger',
|
|
kind: 'public',
|
|
defaultElement: 'button',
|
|
role: 'tab',
|
|
optional: false,
|
|
states: ['active', 'inactive'],
|
|
data: [
|
|
{ attr: 'data-state', values: ['active', 'inactive'] },
|
|
{ attr: 'data-disabled', severity: 'optional' },
|
|
{ attr: 'data-orientation', values: ['horizontal', 'vertical'] }
|
|
],
|
|
aria: [
|
|
{ attr: 'type', value: v.literal('button') },
|
|
{ attr: 'aria-selected', value: v.stateRef('active') },
|
|
{
|
|
attr: 'aria-controls',
|
|
value: v.partRef('content'),
|
|
condition: { when: 'part-present', part: 'content' },
|
|
severity: 'recommended'
|
|
}
|
|
],
|
|
keyboard: [
|
|
{ key: 'ArrowRight', action: 'next-item' },
|
|
{ key: 'ArrowLeft', action: 'prev-item' },
|
|
{ key: 'ArrowDown', action: 'next-item' },
|
|
{ key: 'ArrowUp', action: 'prev-item' },
|
|
{ key: 'Home', action: 'first-item' },
|
|
{ key: 'End', action: 'last-item' },
|
|
{ key: 'Enter', action: 'activate' },
|
|
{ key: ' ', action: 'activate' }
|
|
]
|
|
},
|
|
{
|
|
name: 'Content',
|
|
kebab: 'content',
|
|
kind: 'public',
|
|
defaultElement: 'div',
|
|
role: 'tabpanel',
|
|
optional: false,
|
|
states: ['active', 'inactive'],
|
|
data: [
|
|
{ attr: 'data-state', values: ['active', 'inactive'] },
|
|
{ attr: 'data-orientation', values: ['horizontal', 'vertical'] }
|
|
],
|
|
aria: [
|
|
{
|
|
attr: 'aria-labelledby',
|
|
value: v.partRef('trigger'),
|
|
condition: { when: 'part-present', part: 'trigger' },
|
|
severity: 'recommended'
|
|
}
|
|
]
|
|
}
|
|
]
|
|
};
|