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.
69 lines
1.6 KiB
69 lines
1.6 KiB
import type { Morfo } from '../types';
|
|
import { v } from '../types';
|
|
|
|
export const checkboxMorfo: Morfo = {
|
|
name: 'Checkbox',
|
|
kebab: 'checkbox',
|
|
scope: ['soma'],
|
|
apg: 'https://www.w3.org/WAI/ARIA/apg/patterns/checkbox/',
|
|
parts: [
|
|
{
|
|
name: 'Provider',
|
|
kebab: 'root',
|
|
kind: 'public',
|
|
defaultElement: 'button',
|
|
role: 'checkbox',
|
|
optional: false,
|
|
states: ['checked', 'unchecked', 'indeterminate'],
|
|
data: [
|
|
{ attr: 'data-state', values: ['checked', 'unchecked', 'indeterminate'] },
|
|
{ attr: 'data-disabled', severity: 'optional' },
|
|
{ attr: 'data-readonly', severity: 'optional' }
|
|
],
|
|
aria: [
|
|
{ attr: 'type', value: v.literal('button') },
|
|
{ attr: 'aria-checked', value: v.stateRef('checked') },
|
|
{
|
|
attr: 'aria-required',
|
|
value: v.literal('true'),
|
|
severity: 'optional',
|
|
condition: { when: 'prop-truthy', prop: 'required' }
|
|
},
|
|
{
|
|
attr: 'aria-readonly',
|
|
value: v.literal('true'),
|
|
severity: 'optional',
|
|
condition: { when: 'prop-truthy', prop: 'readonly' }
|
|
}
|
|
],
|
|
keyboard: [{ key: ' ', action: 'toggle' }]
|
|
},
|
|
{
|
|
name: 'Group',
|
|
kebab: 'group',
|
|
kind: 'public',
|
|
defaultElement: 'div',
|
|
role: 'group',
|
|
optional: true,
|
|
data: [{ attr: 'data-disabled', severity: 'optional' }],
|
|
aria: [
|
|
{
|
|
attr: 'aria-labelledby',
|
|
value: v.partRef('group-label'),
|
|
condition: { when: 'part-present', part: 'group-label' },
|
|
severity: 'recommended'
|
|
}
|
|
]
|
|
},
|
|
{
|
|
name: 'GroupLabel',
|
|
kebab: 'group-label',
|
|
kind: 'public',
|
|
defaultElement: 'div',
|
|
optional: true,
|
|
data: [],
|
|
aria: []
|
|
}
|
|
]
|
|
};
|