mirror of
https://github.com/discourse/discourse.git
synced 2025-02-25 18:55:32 -06:00
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:
parent
6667f1a008
commit
a8169e93c2
@ -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);
|
||||
|
||||
|
@ -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.[]",
|
||||
|
@ -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
|
||||
|
@ -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",
|
||||
});
|
||||
|
@ -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}}
|
||||
|
Loading…
Reference in New Issue
Block a user