123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835 |
- // Source: https://www.w3.org/TR/wai-aria-1.1/#roles
- /* easiest way to see allowed roles is to filter out the global ones
- from the list of inherited states and properties. The dpub spec
- does not have the global list so you'll need to copy over from
- the wai-aria one:
- const globalAttrs = Array.from(
- document.querySelectorAll('#global_states li')
- ).map(li => li.textContent.replace(/\s*\(.*\)/, ''));
- const globalRoleAttrs = Array.from(
- document.querySelectorAll('.role-inherited li')
- ).filter(li => globalAttrs.includes(li.textContent.replace(/\s*\(.*\)/, '')))
- globalRoleAttrs.forEach(li => li.style.display = 'none');
- */
- const ariaRoles = {
- alert: {
- type: 'widget',
- allowedAttrs: ['aria-expanded'],
- superclassRole: ['section']
- },
- alertdialog: {
- type: 'widget',
- allowedAttrs: ['aria-expanded', 'aria-modal'],
- superclassRole: ['alert', 'dialog'],
- accessibleNameRequired: true
- },
- application: {
- // Note: spec difference
- type: 'landmark',
- // Note: aria-expanded is not in the 1.1 spec but is
- // consistently supported in ATs and was added in 1.2
- allowedAttrs: ['aria-activedescendant', 'aria-expanded'],
- superclassRole: ['structure'],
- accessibleNameRequired: true
- },
- article: {
- type: 'structure',
- allowedAttrs: ['aria-posinset', 'aria-setsize', 'aria-expanded'],
- superclassRole: ['document']
- },
- banner: {
- type: 'landmark',
- allowedAttrs: ['aria-expanded'],
- superclassRole: ['landmark']
- },
- blockquote: {
- type: 'structure',
- superclassRole: ['section']
- },
- button: {
- type: 'widget',
- allowedAttrs: ['aria-expanded', 'aria-pressed'],
- superclassRole: ['command'],
- accessibleNameRequired: true,
- nameFromContent: true,
- childrenPresentational: true
- },
- caption: {
- type: 'structure',
- requiredContext: ['figure', 'table', 'grid', 'treegrid'],
- superclassRole: ['section'],
- prohibitedAttrs: ['aria-label', 'aria-labelledby']
- },
- cell: {
- type: 'structure',
- requiredContext: ['row'],
- allowedAttrs: [
- 'aria-colindex',
- 'aria-colspan',
- 'aria-rowindex',
- 'aria-rowspan',
- 'aria-expanded'
- ],
- superclassRole: ['section'],
- nameFromContent: true
- },
- checkbox: {
- type: 'widget',
- // Note: since the checkbox role has an implicit
- // aria-checked value it is not required to be added by
- // the user
- //
- // Note: aria-required is not in the 1.1 spec but is
- // consistently supported in ATs and was added in 1.2
- allowedAttrs: ['aria-checked', 'aria-readonly', 'aria-required'],
- superclassRole: ['input'],
- accessibleNameRequired: true,
- nameFromContent: true,
- childrenPresentational: true
- },
- code: {
- type: 'structure',
- superclassRole: ['section'],
- prohibitedAttrs: ['aria-label', 'aria-labelledby']
- },
- columnheader: {
- type: 'structure',
- requiredContext: ['row'],
- allowedAttrs: [
- 'aria-sort',
- 'aria-colindex',
- 'aria-colspan',
- 'aria-expanded',
- 'aria-readonly',
- 'aria-required',
- 'aria-rowindex',
- 'aria-rowspan',
- 'aria-selected'
- ],
- superclassRole: ['cell', 'gridcell', 'sectionhead'],
- // Note: spec difference
- accessibleNameRequired: false,
- nameFromContent: true
- },
- combobox: {
- type: 'composite',
- requiredOwned: ['listbox', 'tree', 'grid', 'dialog', 'textbox'],
- requiredAttrs: ['aria-expanded'],
- // Note: because aria-controls is not well supported we will not
- // make it a required attribute even though it is required in the
- // spec
- allowedAttrs: [
- 'aria-controls',
- 'aria-autocomplete',
- 'aria-readonly',
- 'aria-required',
- 'aria-activedescendant',
- 'aria-orientation'
- ],
- superclassRole: ['select'],
- accessibleNameRequired: true
- },
- command: {
- type: 'abstract',
- superclassRole: ['widget']
- },
- complementary: {
- type: 'landmark',
- allowedAttrs: ['aria-expanded'],
- superclassRole: ['landmark']
- },
- composite: {
- type: 'abstract',
- superclassRole: ['widget']
- },
- contentinfo: {
- type: 'landmark',
- allowedAttrs: ['aria-expanded'],
- superclassRole: ['landmark']
- },
- definition: {
- type: 'structure',
- allowedAttrs: ['aria-expanded'],
- superclassRole: ['section']
- },
- deletion: {
- type: 'structure',
- superclassRole: ['section'],
- prohibitedAttrs: ['aria-label', 'aria-labelledby']
- },
- dialog: {
- type: 'widget',
- allowedAttrs: ['aria-expanded', 'aria-modal'],
- superclassRole: ['window'],
- accessibleNameRequired: true
- },
- directory: {
- type: 'structure',
- allowedAttrs: ['aria-expanded'],
- superclassRole: ['list'],
- // Note: spec difference
- nameFromContent: true
- },
- document: {
- type: 'structure',
- allowedAttrs: ['aria-expanded'],
- superclassRole: ['structure']
- },
- emphasis: {
- type: 'structure',
- superclassRole: ['section'],
- prohibitedAttrs: ['aria-label', 'aria-labelledby']
- },
- feed: {
- type: 'structure',
- requiredOwned: ['article'],
- allowedAttrs: ['aria-expanded'],
- superclassRole: ['list']
- },
- figure: {
- type: 'structure',
- allowedAttrs: ['aria-expanded'],
- superclassRole: ['section'],
- // Note: spec difference
- nameFromContent: true
- },
- form: {
- type: 'landmark',
- allowedAttrs: ['aria-expanded'],
- superclassRole: ['landmark']
- },
- grid: {
- type: 'composite',
- requiredOwned: ['rowgroup', 'row'],
- allowedAttrs: [
- 'aria-level',
- 'aria-multiselectable',
- 'aria-readonly',
- 'aria-activedescendant',
- 'aria-colcount',
- 'aria-expanded',
- 'aria-rowcount'
- ],
- superclassRole: ['composite', 'table'],
- // Note: spec difference
- accessibleNameRequired: false
- },
- gridcell: {
- type: 'widget',
- requiredContext: ['row'],
- allowedAttrs: [
- 'aria-readonly',
- 'aria-required',
- 'aria-selected',
- 'aria-colindex',
- 'aria-colspan',
- 'aria-expanded',
- 'aria-rowindex',
- 'aria-rowspan'
- ],
- superclassRole: ['cell', 'widget'],
- nameFromContent: true
- },
- group: {
- type: 'structure',
- allowedAttrs: ['aria-activedescendant', 'aria-expanded'],
- superclassRole: ['section']
- },
- heading: {
- type: 'structure',
- requiredAttrs: ['aria-level'],
- allowedAttrs: ['aria-expanded'],
- superclassRole: ['sectionhead'],
- // Note: spec difference
- accessibleNameRequired: false,
- nameFromContent: true
- },
- img: {
- type: 'structure',
- allowedAttrs: ['aria-expanded'],
- superclassRole: ['section'],
- accessibleNameRequired: true,
- childrenPresentational: true
- },
- input: {
- type: 'abstract',
- superclassRole: ['widget']
- },
- insertion: {
- type: 'structure',
- superclassRole: ['section'],
- prohibitedAttrs: ['aria-label', 'aria-labelledby']
- },
- landmark: {
- type: 'abstract',
- superclassRole: ['section']
- },
- link: {
- type: 'widget',
- allowedAttrs: ['aria-expanded'],
- superclassRole: ['command'],
- accessibleNameRequired: true,
- nameFromContent: true
- },
- list: {
- type: 'structure',
- requiredOwned: ['group', 'listitem'],
- allowedAttrs: ['aria-expanded'],
- superclassRole: ['section']
- },
- listbox: {
- type: 'composite',
- requiredOwned: ['option'],
- allowedAttrs: [
- 'aria-multiselectable',
- 'aria-readonly',
- 'aria-required',
- 'aria-activedescendant',
- 'aria-expanded',
- 'aria-orientation'
- ],
- superclassRole: ['select'],
- accessibleNameRequired: true
- },
- listitem: {
- type: 'structure',
- requiredContext: ['list', 'group'],
- allowedAttrs: [
- 'aria-level',
- 'aria-posinset',
- 'aria-setsize',
- 'aria-expanded'
- ],
- superclassRole: ['section'],
- // Note: spec difference
- nameFromContent: true
- },
- log: {
- type: 'widget',
- allowedAttrs: ['aria-expanded'],
- superclassRole: ['section']
- },
- main: {
- type: 'landmark',
- allowedAttrs: ['aria-expanded'],
- superclassRole: ['landmark']
- },
- marquee: {
- type: 'widget',
- allowedAttrs: ['aria-expanded'],
- superclassRole: ['section']
- },
- math: {
- type: 'structure',
- allowedAttrs: ['aria-expanded'],
- superclassRole: ['section'],
- childrenPresentational: true
- },
- menu: {
- type: 'composite',
- requiredOwned: ['group', 'menuitemradio', 'menuitem', 'menuitemcheckbox'],
- allowedAttrs: [
- 'aria-activedescendant',
- 'aria-expanded',
- 'aria-orientation'
- ],
- superclassRole: ['select']
- },
- menubar: {
- type: 'composite',
- requiredOwned: ['group', 'menuitemradio', 'menuitem', 'menuitemcheckbox'],
- allowedAttrs: [
- 'aria-activedescendant',
- 'aria-expanded',
- 'aria-orientation'
- ],
- superclassRole: ['menu']
- },
- menuitem: {
- type: 'widget',
- requiredContext: ['menu', 'menubar', 'group'],
- // Note: aria-expanded is not in the 1.1 spec but is
- // consistently supported in ATs and was added in 1.2
- allowedAttrs: ['aria-posinset', 'aria-setsize', 'aria-expanded'],
- superclassRole: ['command'],
- accessibleNameRequired: true,
- nameFromContent: true
- },
- menuitemcheckbox: {
- type: 'widget',
- requiredContext: ['menu', 'menubar', 'group'],
- allowedAttrs: [
- 'aria-checked',
- 'aria-posinset',
- 'aria-readonly',
- 'aria-setsize'
- ],
- superclassRole: ['checkbox', 'menuitem'],
- accessibleNameRequired: true,
- nameFromContent: true,
- childrenPresentational: true
- },
- menuitemradio: {
- type: 'widget',
- requiredContext: ['menu', 'menubar', 'group'],
- allowedAttrs: [
- 'aria-checked',
- 'aria-posinset',
- 'aria-readonly',
- 'aria-setsize'
- ],
- superclassRole: ['menuitemcheckbox', 'radio'],
- accessibleNameRequired: true,
- nameFromContent: true,
- childrenPresentational: true
- },
- meter: {
- type: 'structure',
- allowedAttrs: ['aria-valuetext'],
- requiredAttrs: ['aria-valuemax', 'aria-valuemin', 'aria-valuenow'],
- superclassRole: ['range'],
- accessibleNameRequired: true,
- childrenPresentational: true
- },
- navigation: {
- type: 'landmark',
- allowedAttrs: ['aria-expanded'],
- superclassRole: ['landmark']
- },
- none: {
- type: 'structure',
- superclassRole: ['structure'],
- prohibitedAttrs: ['aria-label', 'aria-labelledby']
- },
- note: {
- type: 'structure',
- allowedAttrs: ['aria-expanded'],
- superclassRole: ['section']
- },
- option: {
- type: 'widget',
- requiredContext: ['listbox'],
- // Note: since the option role has an implicit
- // aria-selected value it is not required to be added by
- // the user
- allowedAttrs: [
- 'aria-selected',
- 'aria-checked',
- 'aria-posinset',
- 'aria-setsize'
- ],
- superclassRole: ['input'],
- accessibleNameRequired: true,
- nameFromContent: true,
- childrenPresentational: true
- },
- paragraph: {
- type: 'structure',
- superclassRole: ['section'],
- prohibitedAttrs: ['aria-label', 'aria-labelledby']
- },
- presentation: {
- type: 'structure',
- superclassRole: ['structure'],
- prohibitedAttrs: ['aria-label', 'aria-labelledby']
- },
- progressbar: {
- type: 'widget',
- allowedAttrs: [
- 'aria-expanded',
- 'aria-valuemax',
- 'aria-valuemin',
- 'aria-valuenow',
- 'aria-valuetext'
- ],
- superclassRole: ['range'],
- accessibleNameRequired: true,
- childrenPresentational: true
- },
- radio: {
- type: 'widget',
- // Note: since the radio role has an implicit
- // aria-check value it is not required to be added by
- // the user
- //
- // Note: aria-required is not in the 1.1 or 1.2 specs but is
- // consistently supported in ATs on the individual radio element
- allowedAttrs: [
- 'aria-checked',
- 'aria-posinset',
- 'aria-setsize',
- 'aria-required'
- ],
- superclassRole: ['input'],
- accessibleNameRequired: true,
- nameFromContent: true,
- childrenPresentational: true
- },
- radiogroup: {
- type: 'composite',
- requiredOwned: ['radio'],
- allowedAttrs: [
- 'aria-readonly',
- 'aria-required',
- 'aria-activedescendant',
- 'aria-expanded',
- 'aria-orientation'
- ],
- superclassRole: ['select'],
- // Note: spec difference
- accessibleNameRequired: false
- },
- range: {
- type: 'abstract',
- superclassRole: ['widget']
- },
- region: {
- type: 'landmark',
- allowedAttrs: ['aria-expanded'],
- superclassRole: ['landmark'],
- // Note: spec difference
- accessibleNameRequired: false
- },
- roletype: {
- type: 'abstract',
- superclassRole: []
- },
- row: {
- type: 'structure',
- requiredContext: ['grid', 'rowgroup', 'table', 'treegrid'],
- requiredOwned: ['cell', 'columnheader', 'gridcell', 'rowheader'],
- allowedAttrs: [
- 'aria-colindex',
- 'aria-level',
- 'aria-rowindex',
- 'aria-selected',
- 'aria-activedescendant',
- 'aria-expanded',
- 'aria-posinset',
- 'aria-setsize'
- ],
- superclassRole: ['group', 'widget'],
- nameFromContent: true
- },
- rowgroup: {
- type: 'structure',
- requiredContext: ['grid', 'table', 'treegrid'],
- requiredOwned: ['row'],
- superclassRole: ['structure'],
- nameFromContent: true
- },
- rowheader: {
- type: 'structure',
- requiredContext: ['row'],
- allowedAttrs: [
- 'aria-sort',
- 'aria-colindex',
- 'aria-colspan',
- 'aria-expanded',
- 'aria-readonly',
- 'aria-required',
- 'aria-rowindex',
- 'aria-rowspan',
- 'aria-selected'
- ],
- superclassRole: ['cell', 'gridcell', 'sectionhead'],
- // Note: spec difference
- accessibleNameRequired: false,
- nameFromContent: true
- },
- scrollbar: {
- type: 'widget',
- requiredAttrs: ['aria-valuenow'],
- // Note: since the scrollbar role has implicit
- // aria-orientation, aria-valuemax, aria-valuemin values it
- // is not required to be added by the user
- //
- // Note: because aria-controls is not well supported we will not
- // make it a required attribute even though it is required in the
- // spec
- allowedAttrs: [
- 'aria-controls',
- 'aria-orientation',
- 'aria-valuemax',
- 'aria-valuemin',
- 'aria-valuetext'
- ],
- superclassRole: ['range'],
- childrenPresentational: true
- },
- search: {
- type: 'landmark',
- allowedAttrs: ['aria-expanded'],
- superclassRole: ['landmark']
- },
- searchbox: {
- type: 'widget',
- allowedAttrs: [
- 'aria-activedescendant',
- 'aria-autocomplete',
- 'aria-multiline',
- 'aria-placeholder',
- 'aria-readonly',
- 'aria-required'
- ],
- superclassRole: ['textbox'],
- accessibleNameRequired: true
- },
- section: {
- type: 'abstract',
- superclassRole: ['structure'],
- // Note: spec difference
- nameFromContent: true
- },
- sectionhead: {
- type: 'abstract',
- superclassRole: ['structure'],
- // Note: spec difference
- nameFromContent: true
- },
- select: {
- type: 'abstract',
- superclassRole: ['composite', 'group']
- },
- separator: {
- type: 'structure',
- // Note: since the separator role has implicit
- // aria-orientation, aria-valuemax, aria-valuemin, and
- // aria-valuenow values it is not required to be added by
- // the user
- allowedAttrs: [
- 'aria-valuemax',
- 'aria-valuemin',
- 'aria-valuenow',
- 'aria-orientation',
- 'aria-valuetext'
- ],
- superclassRole: ['structure', 'widget'],
- childrenPresentational: true
- },
- slider: {
- type: 'widget',
- requiredAttrs: ['aria-valuenow'],
- // Note: since the slider role has implicit
- // aria-orientation, aria-valuemax, aria-valuemin values it
- // is not required to be added by the user
- allowedAttrs: [
- 'aria-valuemax',
- 'aria-valuemin',
- 'aria-orientation',
- 'aria-readonly',
- 'aria-valuetext'
- ],
- superclassRole: ['input', 'range'],
- accessibleNameRequired: true,
- childrenPresentational: true
- },
- spinbutton: {
- type: 'widget',
- requiredAttrs: ['aria-valuenow'],
- // Note: since the spinbutton role has implicit
- // aria-orientation, aria-valuemax, aria-valuemin values it
- // is not required to be added by the user
- allowedAttrs: [
- 'aria-valuemax',
- 'aria-valuemin',
- 'aria-readonly',
- 'aria-required',
- 'aria-activedescendant',
- 'aria-valuetext'
- ],
- superclassRole: ['composite', 'input', 'range'],
- accessibleNameRequired: true
- },
- status: {
- type: 'widget',
- allowedAttrs: ['aria-expanded'],
- superclassRole: ['section']
- },
- strong: {
- type: 'structure',
- superclassRole: ['section'],
- prohibitedAttrs: ['aria-label', 'aria-labelledby']
- },
- structure: {
- type: 'abstract',
- superclassRole: ['roletype']
- },
- subscript: {
- type: 'structure',
- superclassRole: ['section'],
- prohibitedAttrs: ['aria-label', 'aria-labelledby']
- },
- superscript: {
- type: 'structure',
- superclassRole: ['section'],
- prohibitedAttrs: ['aria-label', 'aria-labelledby']
- },
- switch: {
- type: 'widget',
- requiredAttrs: ['aria-checked'],
- allowedAttrs: ['aria-readonly'],
- superclassRole: ['checkbox'],
- accessibleNameRequired: true,
- nameFromContent: true,
- childrenPresentational: true
- },
- tab: {
- type: 'widget',
- requiredContext: ['tablist'],
- allowedAttrs: [
- 'aria-posinset',
- 'aria-selected',
- 'aria-setsize',
- 'aria-expanded'
- ],
- superclassRole: ['sectionhead', 'widget'],
- nameFromContent: true,
- childrenPresentational: true
- },
- table: {
- type: 'structure',
- requiredOwned: ['rowgroup', 'row'],
- allowedAttrs: ['aria-colcount', 'aria-rowcount', 'aria-expanded'],
- // NOTE: although the spec says this is not named from contents,
- // the accessible text acceptance tests (#139 and #140) require
- // table be named from content (we even had to special case
- // table in commons/aria/named-from-contents)
- superclassRole: ['section'],
- // Note: spec difference
- accessibleNameRequired: false,
- nameFromContent: true
- },
- tablist: {
- type: 'composite',
- requiredOwned: ['tab'],
- // NOTE: aria-expanded is from the 1.0 spec but is still
- // consistently supported in ATs
- allowedAttrs: [
- 'aria-level',
- 'aria-multiselectable',
- 'aria-orientation',
- 'aria-activedescendant',
- 'aria-expanded'
- ],
- superclassRole: ['composite']
- },
- tabpanel: {
- type: 'widget',
- allowedAttrs: ['aria-expanded'],
- superclassRole: ['section'],
- // Note: spec difference
- accessibleNameRequired: false
- },
- term: {
- type: 'structure',
- allowedAttrs: ['aria-expanded'],
- superclassRole: ['section'],
- // Note: spec difference
- nameFromContent: true
- },
- text: {
- type: 'structure',
- superclassRole: ['section'],
- nameFromContent: true
- },
- textbox: {
- type: 'widget',
- allowedAttrs: [
- 'aria-activedescendant',
- 'aria-autocomplete',
- 'aria-multiline',
- 'aria-placeholder',
- 'aria-readonly',
- 'aria-required'
- ],
- superclassRole: ['input'],
- accessibleNameRequired: true
- },
- time: {
- type: 'structure',
- superclassRole: ['section']
- },
- timer: {
- type: 'widget',
- allowedAttrs: ['aria-expanded'],
- superclassRole: ['status']
- },
- toolbar: {
- type: 'structure',
- allowedAttrs: [
- 'aria-orientation',
- 'aria-activedescendant',
- 'aria-expanded'
- ],
- superclassRole: ['group'],
- accessibleNameRequired: true
- },
- tooltip: {
- type: 'structure',
- allowedAttrs: ['aria-expanded'],
- superclassRole: ['section'],
- nameFromContent: true
- },
- tree: {
- type: 'composite',
- requiredOwned: ['group', 'treeitem'],
- allowedAttrs: [
- 'aria-multiselectable',
- 'aria-required',
- 'aria-activedescendant',
- 'aria-expanded',
- 'aria-orientation'
- ],
- superclassRole: ['select'],
- // Note: spec difference
- accessibleNameRequired: false
- },
- treegrid: {
- type: 'composite',
- requiredOwned: ['rowgroup', 'row'],
- allowedAttrs: [
- 'aria-activedescendant',
- 'aria-colcount',
- 'aria-expanded',
- 'aria-level',
- 'aria-multiselectable',
- 'aria-orientation',
- 'aria-readonly',
- 'aria-required',
- 'aria-rowcount'
- ],
- superclassRole: ['grid', 'tree'],
- // Note: spec difference
- accessibleNameRequired: false
- },
- treeitem: {
- type: 'widget',
- requiredContext: ['group', 'tree'],
- allowedAttrs: [
- 'aria-checked',
- 'aria-expanded',
- 'aria-level',
- 'aria-posinset',
- 'aria-selected',
- 'aria-setsize'
- ],
- superclassRole: ['listitem', 'option'],
- accessibleNameRequired: true,
- nameFromContent: true
- },
- widget: {
- type: 'abstract',
- superclassRole: ['roletype']
- },
- window: {
- type: 'abstract',
- superclassRole: ['roletype']
- }
- };
- export default ariaRoles;
|