github-mirror/discourse
2
0
Fork 0
mirror of https://github.com/discourse/discourse.git synced 2025-01-16 06:42:41 +08:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

A11Y: Fix screen reader access to user directory (#30499)

Browse Source
This commit is contained in:
Penar Musaraj 2024-12-30 16:10:00 -05:00 committed by GitHub
parent 429fc91b2e
commit 2ffcb94c8b
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
4 changed files with 16 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
app/assets/javascripts/discourse/app/components/directory-item.hbs
View File

@ -1,17 +1,17 @@
<div class="directory-table__cell"> <div class="directory-table__cell" role="rowheader">
<UserInfo @user={{this.item.user}} /> <UserInfo @user={{this.item.user}} />
</div> </div>
{{#each this.columns as |column|}} {{#each this.columns as |column|}}
{{#if (directory-column-is-user-field column=column)}} {{#if (directory-column-is-user-field column=column)}}
<div class="directory-table__cell--user-field"> <div class="directory-table__cell--user-field" role="cell">
<span class="directory-table__label"> <span class="directory-table__label">
<span>{{column.name}}</span> <span>{{column.name}}</span>
</span> </span>
{{directory-item-user-field-value item=this.item column=column}} {{directory-item-user-field-value item=this.item column=column}}
</div> </div>
{{else}} {{else}}
<div class="directory-table__cell"> <div class="directory-table__cell" role="cell">
<span class="directory-table__label"> <span class="directory-table__label">
<span> <span>
{{#if column.icon}} {{#if column.icon}}
@ -27,7 +27,7 @@
{{/each}} {{/each}}
{{#if this.showTimeRead}} {{#if this.showTimeRead}}
<div class="directory-table__cell time-read"> <div class="directory-table__cell time-read" role="cell">
<span class="directory-table__label"> <span class="directory-table__label">
<span>{{i18n "directory.time_read"}}</span> <span>{{i18n "directory.time_read"}}</span>
</span> </span>

4
app/assets/javascripts/discourse/app/components/directory-item.js
View File

@ -1,5 +1,6 @@
import Component from "@ember/component"; import Component from "@ember/component";
import { import {
attributeBindings,
classNameBindings, classNameBindings,
classNames, classNames,
tagName, tagName,
@ -9,7 +10,10 @@ import { propertyEqual } from "discourse/lib/computed";
@tagName("div") @tagName("div")
@classNames("directory-table__row") @classNames("directory-table__row")
@classNameBindings("me") @classNameBindings("me")
@attributeBindings("role")
export default class DirectoryItem extends Component { export default class DirectoryItem extends Component {
role = "row";
@propertyEqual("item.user.id", "currentUser.id") me; @propertyEqual("item.user.id", "currentUser.id") me;
columns = null; columns = null;
} }

6
app/assets/javascripts/discourse/app/components/user-info.hbs
View File

@ -13,7 +13,11 @@
<div class="user-detail"> <div class="user-detail">
<div class="name-line"> <div class="name-line">
{{#if this.includeLink}} {{#if this.includeLink}}
<a href={{this.userPath}} data-user-card={{@user.username}}> <a
href={{this.userPath}}
data-user-card={{@user.username}}
role="heading"
>
<span class={{if this.nameFirst "name" "username"}}> <span class={{if this.nameFirst "name" "username"}}>
{{if this.nameFirst @user.name (format-username @user.username)}} {{if this.nameFirst @user.name (format-username @user.username)}}
</span> </span>

4
app/assets/stylesheets/common/base/directory.scss
View File

@ -123,7 +123,9 @@
&__header, &__header,
&__body, &__body,
&__row { &__row {
display: contents; // we'll be able to remove this with subgrid support display: grid;
grid-column: 1 / -1;
grid-template-columns: subgrid;
} }
&__column-header, &__column-header,