github-mirror/discourse
github-mirror/discourse
2
0
Fork 0
mirror of https://github.com/discourse/discourse.git synced 2025-03-22 16:45:32 +08:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

A11Y: makes select-kit header a listbox (#12078)

Browse Source 
Note that for now pressing enter doesn’t make anything, this is awaiting another change.
This commit is contained in:
Joffrey JAFFEUX 2021-02-15 18:22:10 +01:00 committed by GitHub
parent 85c4e8fd32
commit 323a5f22e7
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 7 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
app/assets/javascripts/select-kit/addon/components/select-kit/select-kit-header.js
View File

@ -28,7 +28,7 @@ export default Component.extend(UtilsMixin, {
"ariaOwns:aria-owns",
"ariaHasPopup:aria-haspopup",
"ariaIsExpanded:aria-expanded",
"roleButton:role",
"headerRole:role",
"selectedValue:data-value",
"selectedNames:data-name",
"buttonTitle:title",
@ -72,7 +72,7 @@ export default Component.extend(UtilsMixin, {
return `${this.selectKit.uniqueID}-body`;
}),
roleButton: "button",
headerRole: "listbox",
tabindex: 0,

2
app/assets/javascripts/select-kit/addon/templates/components/selected-name.hbs
View File

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

4
app/assets/stylesheets/common/select-kit/select-kit.scss
View File

@ -72,6 +72,10 @@
display: flex;
outline: none;
&:focus .d-icon-times {
color: var(--danger);
}
.d-icon + .name {
margin-left: 0.5em;
}