Further aria roles

This commit is contained in:
Josh Johnson 2016-08-08 17:45:47 +01:00
parent ba659351a6
commit fd8b594568
2 changed files with 6 additions and 6 deletions

File diff suppressed because one or more lines are too long

View file

@ -1546,14 +1546,14 @@ export class Choices {
item: (data) => { item: (data) => {
if(this.config.removeItemButton && this.passedElement.type !== 'select-one') { if(this.config.removeItemButton && this.passedElement.type !== 'select-one') {
return strToEl(` return strToEl(`
<div class="${ classNames.item } ${ data.highlighted ? classNames.highlightedState : ''} ${ !data.disabled ? classNames.itemSelectable : '' }" data-item data-id="${ data.id }" data-value="${ data.value }" data-deletable> <div class="${ classNames.item } ${ data.highlighted ? classNames.highlightedState : ''} ${ !data.disabled ? classNames.itemSelectable : '' }" data-item data-id="${ data.id }" data-value="${ data.value }" ${ data.active ? 'aria-selected="true"' : '' } ${ data.disabled ? 'aria-disabled="true"' : '' } data-deletable>
${ data.label } ${ data.label }
<button class="${ classNames.button }" data-button>Remove item</button> <button class="${ classNames.button }" data-button>Remove item</button>
</div> </div>
`); `);
} else { } else {
return strToEl(` return strToEl(`
<div class="${ classNames.item } ${ data.highlighted ? classNames.highlightedState : classNames.itemSelectable }" data-item data-id="${ data.id }" data-value="${ data.value }"> <div class="${ classNames.item } ${ data.highlighted ? classNames.highlightedState : classNames.itemSelectable }" data-item data-id="${ data.id }" data-value="${ data.value }" ${ data.active ? 'aria-selected="true"' : '' } ${ data.disabled ? 'aria-disabled="true"' : '' }>
${ data.label } ${ data.label }
</div> </div>
`); `);
@ -1561,7 +1561,7 @@ export class Choices {
}, },
choiceList: () => { choiceList: () => {
return strToEl(` return strToEl(`
<div class="${ classNames.list }" dir="ltr"></div> <div class="${ classNames.list }" dir="ltr" role="listbox" ${ this.passedElement.type !== 'select-one' ? 'aria-multiselectable="true"' : ''}></div>
`); `);
}, },
choiceGroup: (data) => { choiceGroup: (data) => {
@ -1580,7 +1580,7 @@ export class Choices {
}, },
input: () => { input: () => {
return strToEl(` return strToEl(`
<input type="text" class="${ classNames.input } ${ classNames.inputCloned }" autocomplete="off" autocapitalize="off" spellcheck="false" role="textbox"> <input type="text" class="${ classNames.input } ${ classNames.inputCloned }" autocomplete="off" autocapitalize="off" spellcheck="false" role="textbox" aria-autocomplete="list">
`); `);
}, },
dropdown: () => { dropdown: () => {