A11Y: makes aria-owns an ID and not a data attribute (#12075)
This commit is contained in:
Joffrey JAFFEUX
GitHub
parent
71e9c2e50b
commit
467b075ef7
|
|
@ -776,10 +776,10 @@ export default Component.extend(
|
|||
|
||||
if (!this.popper) {
|
||||
const anchor = document.querySelector(
|
||||
`[data-select-kit-id=${this.selectKit.uniqueID}-header]`
|
||||
`#${this.selectKit.uniqueID}-header`
|
||||
);
|
||||
const popper = document.querySelector(
|
||||
`[data-select-kit-id=${this.selectKit.uniqueID}-body]`
|
||||
`#${this.selectKit.uniqueID}-body`
|
||||
);
|
||||
|
||||
const inModal = $(this.element).parents("#discourse-modal").length;
|
||||
|
|
@ -954,15 +954,11 @@ export default Component.extend(
|
|||
},
|
||||
|
||||
getFilterInput() {
|
||||
return document.querySelector(
|
||||
`[data-select-kit-id=${this.selectKit.uniqueID}-filter] input`
|
||||
);
|
||||
return document.querySelector(`#${this.selectKit.uniqueID}-filter input`);
|
||||
},
|
||||
|
||||
getHeader() {
|
||||
return document.querySelector(
|
||||
`[data-select-kit-id=${this.selectKit.uniqueID}-header]`
|
||||
);
|
||||
return document.querySelector(`#${this.selectKit.uniqueID}-header`);
|
||||
},
|
||||
|
||||
handleDeprecations() {
|
||||
|
|
|
|||
|
|
@ -6,11 +6,8 @@ import layout from "select-kit/templates/components/select-kit/select-kit-body";
|
|||
export default Component.extend({
|
||||
layout,
|
||||
classNames: ["select-kit-body"],
|
||||
attributeBindings: ["role", "selectKitId:data-select-kit-id"],
|
||||
attributeBindings: ["role"],
|
||||
classNameBindings: ["emptyBody:empty-body"],
|
||||
selectKitId: computed("selectKit.uniqueID", function () {
|
||||
return `${this.selectKit.uniqueID}-body`;
|
||||
}),
|
||||
emptyBody: computed("selectKit.{filter,hasNoContent}", function () {
|
||||
return !this.selectKit.filter && this.selectKit.hasNoContent;
|
||||
}),
|
||||
|
|
@ -50,7 +47,7 @@ export default Component.extend({
|
|||
}
|
||||
|
||||
const headerElement = document.querySelector(
|
||||
`[data-select-kit-id=${this.selectKit.uniqueID}-header]`
|
||||
`#${this.selectKit.uniqueID}-header`
|
||||
);
|
||||
|
||||
if (headerElement && headerElement.contains(event.target)) {
|
||||
|
|
|
|||
|
|
@ -11,10 +11,7 @@ export default Component.extend(UtilsMixin, {
|
|||
layout,
|
||||
classNames: ["select-kit-filter"],
|
||||
classNameBindings: ["isExpanded:is-expanded"],
|
||||
attributeBindings: ["role", "selectKitId:data-select-kit-id"],
|
||||
selectKitId: computed("selectKit.uniqueID", function () {
|
||||
return `${this.selectKit.uniqueID}-filter`;
|
||||
}),
|
||||
attributeBindings: ["role"],
|
||||
|
||||
role: "searchbox",
|
||||
|
||||
|
|
|
|||
|
|
@ -28,7 +28,6 @@ export default Component.extend(UtilsMixin, {
|
|||
"ariaOwns:aria-owns",
|
||||
"ariaHasPopup:aria-haspopup",
|
||||
"ariaIsExpanded:aria-expanded",
|
||||
"selectKitId:data-select-kit-id",
|
||||
"roleButton:role",
|
||||
"selectedValue:data-value",
|
||||
"selectedNames:data-name",
|
||||
|
|
@ -63,10 +62,6 @@ export default Component.extend(UtilsMixin, {
|
|||
return icon.concat(icons).filter(Boolean);
|
||||
}),
|
||||
|
||||
selectKitId: computed("selectKit.uniqueID", function () {
|
||||
return `${this.selectKit.uniqueID}-header`;
|
||||
}),
|
||||
|
||||
ariaIsExpanded: computed("selectKit.isExpanded", function () {
|
||||
return this.selectKit.isExpanded ? "true" : "false";
|
||||
}),
|
||||
|
|
@ -74,7 +69,7 @@ export default Component.extend(UtilsMixin, {
|
|||
ariaHasPopup: "menu",
|
||||
|
||||
ariaOwns: computed("selectKit.uniqueID", function () {
|
||||
return `[data-select-kit-id=${this.selectKit.uniqueID}-body]`;
|
||||
return `${this.selectKit.uniqueID}-body`;
|
||||
}),
|
||||
|
||||
roleButton: "button",
|
||||
|
|
@ -178,7 +173,7 @@ export default Component.extend(UtilsMixin, {
|
|||
|
||||
_focusFilterInput() {
|
||||
const filterContainer = document.querySelector(
|
||||
`[data-select-kit-id=${this.selectKit.uniqueID}-filter]`
|
||||
`#${this.selectKit.uniqueID}-filter`
|
||||
);
|
||||
|
||||
if (filterContainer) {
|
||||
|
|
|
|||
|
|
@ -16,6 +16,7 @@
|
|||
<div class="choice input-wrapper">
|
||||
{{component selectKit.options.filterComponent
|
||||
selectKit=selectKit
|
||||
id=(concat selectKit.uniqueID "-filter")
|
||||
}}
|
||||
</div>
|
||||
{{/unless}}
|
||||
|
|
|
|||
|
|
@ -4,9 +4,10 @@
|
|||
value=value
|
||||
selectedContent=selectedContent
|
||||
selectKit=selectKit
|
||||
id=(concat selectKit.uniqueID "-header")
|
||||
}}
|
||||
|
||||
{{#select-kit/select-kit-body selectKit=selectKit}}
|
||||
{{#select-kit/select-kit-body selectKit=selectKit id=(concat selectKit.uniqueID "-body")}}
|
||||
{{#if selectKit.isLoading}}
|
||||
<span class="is-loading">
|
||||
{{loading-spinner size="small"}}
|
||||
|
|
|
|||
|
|
@ -11,6 +11,7 @@
|
|||
<div class="choice input-wrapper">
|
||||
{{component selectKit.options.filterComponent
|
||||
selectKit=selectKit
|
||||
id=(concat selectKit.uniqueID "-filter")
|
||||
}}
|
||||
</div>
|
||||
{{/unless}}
|
||||
|
|
|
|||
|
|
@ -4,10 +4,11 @@
|
|||
value=value
|
||||
selectedContent=selectedContent
|
||||
selectKit=selectKit
|
||||
id=(concat selectKit.uniqueID "-header")
|
||||
}}
|
||||
|
||||
{{#select-kit/select-kit-body selectKit=selectKit}}
|
||||
{{component selectKit.options.filterComponent selectKit=selectKit}}
|
||||
{{#select-kit/select-kit-body selectKit=selectKit id=(concat selectKit.uniqueID "-body")}}
|
||||
{{component selectKit.options.filterComponent selectKit=selectKit id=(concat selectKit.uniqueID "-filter")}}
|
||||
|
||||
{{#if selectKit.isLoading}}
|
||||
<span class="is-loading">
|
||||
|
|
|
|||
Loading…
Reference in New Issue