github-mirror/discourse
2
0
Fork 0
mirror of https://github.com/discourse/discourse.git synced 2024-11-25 09:42:07 +08:00
Code Issues Actions 6 Packages Projects Releases Wiki Activity

A11Y: convert sortable topic list headers to proper buttons (#29808)

Browse Source
This commit is contained in:
Kris 2024-11-19 15:38:03 -05:00 committed by GitHub
parent ec7de0fd68
commit 84fecd370c
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
4 changed files with 30 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
app/assets/javascripts/discourse/app/components/topic-list.js
View File

@ -220,6 +220,7 @@ export default class TopicList extends Component.extend(LoadMore) {
}; };
onKeyDown("th.sortable", (element) => { onKeyDown("th.sortable", (element) => {
e.preventDefault();
this.changeSort(element.dataset.sortOrder); this.changeSort(element.dataset.sortOrder);
this.rerender(); this.rerender();
}); });

23
app/assets/javascripts/discourse/app/components/topic-list/topic-list-header-column.gjs
View File

@ -123,20 +123,21 @@ export default class TopicListHeaderColumn extends Component {
@changeNewListSubset={{@changeNewListSubset}} @changeNewListSubset={{@changeNewListSubset}}
/> />
{{else}} {{else}}
<span {{#if @sortable}}
class={{if @screenreaderOnly "sr-only"}} <button aria-pressed={{this.isSorting}}>
tabindex={{if @sortable "0"}} {{this.localizedName}}
role={{if @sortable "button"}} {{#if this.isSorting}}
aria-pressed={{this.isSorting}} {{icon (if @ascending "chevron-up" "chevron-down")}}
> {{/if}}
{{this.localizedName}} </button>
</span> {{else}}
<span class={{if @screenreaderOnly "sr-only"}}>
{{this.localizedName}}
</span>
{{/if}}
{{/if}} {{/if}}
{{/unless}} {{/unless}}
{{#if this.isSorting}}
{{icon (if @ascending "chevron-up" "chevron-down")}}
{{/if}}
<PluginOutlet <PluginOutlet
@name="topic-list-heading-bottom" @name="topic-list-heading-bottom"
@outletArgs={{hash name=@name bulkSelectEnabled=@bulkSelectEnabled}} @outletArgs={{hash name=@name bulkSelectEnabled=@bulkSelectEnabled}}

16
app/assets/javascripts/discourse/app/raw-templates/topic-list-header-column.hbr
View File

@ -17,11 +17,19 @@
{{~#if view.showTopicsAndRepliesToggle}} {{~#if view.showTopicsAndRepliesToggle}}
{{raw "list/new-list-header-controls" current=newListSubset newRepliesCount=newRepliesCount newTopicsCount=newTopicsCount}} {{raw "list/new-list-header-controls" current=newListSubset newRepliesCount=newRepliesCount newTopicsCount=newTopicsCount}}
{{else}} {{else}}
<span {{#if view.screenreaderOnly}}class="sr-only"{{/if}} {{#if sortable}}tabindex="0" role="button" aria-pressed='{{view.ariaPressed}}'{{/if}}>{{view.localizedName}}</span> {{#if sortable}}
<button aria-pressed='{{view.ariaPressed}}'>
{{view.localizedName}}
{{~#if view.isSorting}}
{{d-icon view.sortIcon}}
{{/if ~}}
</button>
{{else}}
<span {{#if view.screenreaderOnly}}class="sr-only"{{/if}}>
{{view.localizedName}}
</span>
{{/if}}
{{/if ~}} {{/if ~}}
{{/unless ~}} {{/unless ~}}
{{~#if view.isSorting}}
{{d-icon view.sortIcon}}
{{/if ~}}
{{~plugin-outlet name="topic-list-heading-bottom" outletArgs=(raw-hash name=view.name bulkSelectEnabled=bulkSelectEnabled)~}} {{~plugin-outlet name="topic-list-heading-bottom" outletArgs=(raw-hash name=view.name bulkSelectEnabled=bulkSelectEnabled)~}}
</th> </th>

5
app/assets/stylesheets/common/base/discourse.scss
View File

@ -312,6 +312,11 @@ textarea {
} }
@include unselectable; @include unselectable;
cursor: pointer; cursor: pointer;
button {
background: none;
border: none;
}
} }
.radio, .radio,