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.
140 lines
3.5 KiB
140 lines
3.5 KiB
import type { Morfo } from '../types';
|
|
import { v } from '../types';
|
|
|
|
export const listboxMorfo = {
|
|
name: 'Listbox',
|
|
kebab: 'listbox',
|
|
scope: ['soma'],
|
|
apg: 'https://www.w3.org/WAI/ARIA/apg/patterns/listbox/',
|
|
parts: [
|
|
{
|
|
name: 'Provider',
|
|
kebab: 'provider',
|
|
archetype: 'provider',
|
|
kind: 'public',
|
|
defaultElement: 'div',
|
|
role: 'listbox',
|
|
optional: false,
|
|
data: [
|
|
{ attr: 'data-orientation', values: ['horizontal', 'vertical'] },
|
|
{ attr: 'data-disabled', severity: 'optional' },
|
|
{ attr: 'data-readonly', severity: 'optional' },
|
|
{ attr: 'data-invalid', severity: 'optional' },
|
|
{ attr: 'data-required', severity: 'optional' },
|
|
{ attr: 'data-focused', severity: 'optional' },
|
|
{ attr: 'data-empty', severity: 'optional' }
|
|
],
|
|
aria: [
|
|
{ attr: 'aria-orientation', value: v.propRef('orientation') },
|
|
{
|
|
attr: 'aria-multiselectable',
|
|
value: v.literal('true'),
|
|
severity: 'optional',
|
|
condition: { when: 'prop-truthy', prop: 'multiple' }
|
|
},
|
|
{
|
|
attr: 'aria-disabled',
|
|
value: v.literal('true'),
|
|
severity: 'optional',
|
|
condition: { when: 'prop-truthy', prop: 'disabled' }
|
|
},
|
|
{
|
|
attr: 'aria-readonly',
|
|
value: v.literal('true'),
|
|
severity: 'optional',
|
|
condition: { when: 'prop-truthy', prop: 'readonly' }
|
|
},
|
|
{
|
|
attr: 'aria-required',
|
|
value: v.literal('true'),
|
|
severity: 'optional',
|
|
condition: { when: 'prop-truthy', prop: 'required' }
|
|
},
|
|
{
|
|
attr: 'aria-invalid',
|
|
value: v.literal('true'),
|
|
severity: 'optional',
|
|
condition: { when: 'prop-truthy', prop: 'invalid' }
|
|
},
|
|
{
|
|
attr: 'aria-label',
|
|
value: v.translationRef('#?components.listbox.label|Options'),
|
|
severity: 'recommended'
|
|
}
|
|
],
|
|
keyboard: [
|
|
{ key: 'ArrowDown', action: 'next-item' },
|
|
{ key: 'ArrowUp', action: 'prev-item' },
|
|
{ key: 'Home', action: 'first-item' },
|
|
{ key: 'End', action: 'last-item' },
|
|
{ key: 'Enter', action: 'select' },
|
|
{ key: ' ', action: 'select' }
|
|
]
|
|
},
|
|
{
|
|
name: 'Item',
|
|
kebab: 'item',
|
|
archetype: 'item',
|
|
kind: 'public',
|
|
defaultElement: 'div',
|
|
role: 'option',
|
|
optional: false,
|
|
states: ['selected', 'unselected'],
|
|
data: [
|
|
{ attr: 'data-state', values: ['selected', 'unselected'] },
|
|
{ attr: 'data-value' },
|
|
{ attr: 'data-highlighted', severity: 'optional' },
|
|
{ attr: 'data-disabled', severity: 'optional' },
|
|
{ attr: 'data-orientation', values: ['horizontal', 'vertical'] }
|
|
],
|
|
aria: [
|
|
{ attr: 'aria-selected', value: v.stateRef('selected') },
|
|
{
|
|
attr: 'aria-disabled',
|
|
value: v.literal('true'),
|
|
severity: 'optional',
|
|
condition: { when: 'prop-truthy', prop: 'disabled' }
|
|
}
|
|
]
|
|
},
|
|
{
|
|
name: 'ItemIndicator',
|
|
kebab: 'item-indicator',
|
|
archetype: 'indicator',
|
|
kind: 'public',
|
|
defaultElement: 'span',
|
|
optional: true,
|
|
data: [],
|
|
aria: [{ attr: 'aria-hidden', value: v.literal('true') }]
|
|
},
|
|
{
|
|
name: 'Group',
|
|
kebab: 'group',
|
|
archetype: 'group',
|
|
kind: 'public',
|
|
defaultElement: 'div',
|
|
role: 'group',
|
|
optional: true,
|
|
data: [],
|
|
aria: [
|
|
{
|
|
attr: 'aria-labelledby',
|
|
value: v.partRef('group-label'),
|
|
condition: { when: 'part-present', part: 'group-label' },
|
|
severity: 'recommended'
|
|
}
|
|
]
|
|
},
|
|
{
|
|
name: 'GroupLabel',
|
|
kebab: 'group-label',
|
|
archetype: 'label',
|
|
kind: 'public',
|
|
defaultElement: 'div',
|
|
optional: true,
|
|
data: [],
|
|
aria: []
|
|
}
|
|
]
|
|
} as const satisfies Morfo;
|