DEV: implements combobox roles for select-kit (#11769)

https://www.w3.org/TR/wai-aria-practices-1.1/#wai-aria-roles-states-and-properties-6
This commit is contained in:
Joffrey JAFFEUX 2021-01-20 15:50:53 +01:00 committed by GitHub
parent 6667f1a008
commit a8169e93c2
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 19 additions and 4 deletions

View File

@ -6,12 +6,14 @@ import layout from "select-kit/templates/components/select-kit/select-kit-body";
export default Component.extend({
layout,
classNames: ["select-kit-body"],
attributeBindings: ["selectKitId:data-select-kit-id"],
attributeBindings: ["role", "selectKitId:data-select-kit-id"],
selectKitId: computed("selectKit.uniqueID", function () {
return `${this.selectKit.uniqueID}-body`;
}),
rootEventType: "click",
role: "listbox",
init() {
this._super(...arguments);

View File

@ -11,11 +11,13 @@ export default Component.extend(UtilsMixin, {
layout,
classNames: ["select-kit-filter"],
classNameBindings: ["isExpanded:is-expanded"],
attributeBindings: ["selectKitId:data-select-kit-id"],
attributeBindings: ["role", "selectKitId:data-select-kit-id"],
selectKitId: computed("selectKit.uniqueID", function () {
return `${this.selectKit.uniqueID}-filter`;
}),
role: "searchbox",
isHidden: computed(
"selectKit.options.{filterable,allowAny,autoFilterable}",
"content.[]",

View File

@ -18,8 +18,10 @@ export default Component.extend(UtilsMixin, {
"rowValue:data-value",
"rowName:data-name",
"ariaLabel:aria-label",
"ariaSelected:aria-selected",
"guid:data-guid",
"rowLang:lang",
"role",
],
classNameBindings: [
"isHighlighted",
@ -45,6 +47,8 @@ export default Component.extend(UtilsMixin, {
return this.rowValue === this.getValue(this.selectKit.noneItem);
}),
role: "option",
guid: computed("item", function () {
return guidFor(this.item);
}),
@ -55,6 +59,10 @@ export default Component.extend(UtilsMixin, {
return this.getProperty(this.item, "ariaLabel") || this.title;
}),
ariaSelected: computed("isSelected", function () {
return this.isSelected ? "true" : "false";
}),
title: computed("rowTitle", "item.title", "rowName", function () {
return (
this.rowTitle || this.getProperty(this.item, "title") || this.rowName

View File

@ -5,4 +5,7 @@ import layout from "select-kit/templates/components/select-kit/single-select-hea
export default SelectKitHeaderComponent.extend(UtilsMixin, {
layout,
classNames: ["single-select-header"],
attributeBindings: ["role"],
role: "combobox",
});

View File

@ -1,5 +1,5 @@
{{#if selectKit.options.showFullTitle}}
<div lang={{lang}} {{action "onSelectedNameClick"}} tabindex="0" title={{title}} data-value={{value}} data-name={{name}} class="select-kit-selected-name selected-name choice">
<div role="textbox" lang={{lang}} {{action "onSelectedNameClick"}} tabindex="0" title={{title}} data-value={{value}} data-name={{name}} class="select-kit-selected-name selected-name choice">
{{#if item.icon}}
{{d-icon item.icon}}
{{/if}}
@ -23,7 +23,7 @@
</div>
{{else}}
{{#if item.icon}}
<div lang={{lang}} tabindex="0" class="select-kit-selected-name selected-name choice">
<div role="textbox" lang={{lang}} tabindex="0" class="select-kit-selected-name selected-name choice">
{{d-icon item.icon}}
</div>
{{/if}}