IntenseWebs/discourse
3
0
Fork 0
mirror of https://github.com/discourse/discourse.git synced 2025-02-25 18:55:32 -06:00
Code Issues 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", "ariaOwns:aria-owns",
"ariaHasPopup:aria-haspopup", "ariaHasPopup:aria-haspopup",
"ariaIsExpanded:aria-expanded", "ariaIsExpanded:aria-expanded",
"roleButton:role", "headerRole:role",
"selectedValue:data-value", "selectedValue:data-value",
"selectedNames:data-name", "selectedNames:data-name",
"buttonTitle:title", "buttonTitle:title",
@ -72,7 +72,7 @@ export default Component.extend(UtilsMixin, {
return `${this.selectKit.uniqueID}-body`; return `${this.selectKit.uniqueID}-body`;
}), }),
roleButton: "button", headerRole: "listbox",
tabindex: 0, tabindex: 0,

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

@ -1,5 +1,5 @@
{{#if selectKit.options.showFullTitle}} {{#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}} {{#if item.icon}}
{{d-icon item.icon}} {{d-icon item.icon}}
{{/if}} {{/if}}

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

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