mirror of
https://github.com/discourse/discourse.git
synced 2025-01-16 06:32:42 +08:00
A11Y: Fix screen reader access to user directory (#30499)
This commit is contained in:
parent
429fc91b2e
commit
2ffcb94c8b
|
@ -1,17 +1,17 @@
|
|||
<div class="directory-table__cell">
|
||||
<div class="directory-table__cell" role="rowheader">
|
||||
<UserInfo @user={{this.item.user}} />
|
||||
</div>
|
||||
|
||||
{{#each this.columns as |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>{{column.name}}</span>
|
||||
</span>
|
||||
{{directory-item-user-field-value item=this.item column=column}}
|
||||
</div>
|
||||
{{else}}
|
||||
<div class="directory-table__cell">
|
||||
<div class="directory-table__cell" role="cell">
|
||||
<span class="directory-table__label">
|
||||
<span>
|
||||
{{#if column.icon}}
|
||||
|
@ -27,7 +27,7 @@
|
|||
{{/each}}
|
||||
|
||||
{{#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>{{i18n "directory.time_read"}}</span>
|
||||
</span>
|
||||
|
|
|
@ -1,5 +1,6 @@
|
|||
import Component from "@ember/component";
|
||||
import {
|
||||
attributeBindings,
|
||||
classNameBindings,
|
||||
classNames,
|
||||
tagName,
|
||||
|
@ -9,7 +10,10 @@ import { propertyEqual } from "discourse/lib/computed";
|
|||
@tagName("div")
|
||||
@classNames("directory-table__row")
|
||||
@classNameBindings("me")
|
||||
@attributeBindings("role")
|
||||
export default class DirectoryItem extends Component {
|
||||
role = "row";
|
||||
|
||||
@propertyEqual("item.user.id", "currentUser.id") me;
|
||||
columns = null;
|
||||
}
|
||||
|
|
|
@ -13,7 +13,11 @@
|
|||
<div class="user-detail">
|
||||
<div class="name-line">
|
||||
{{#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"}}>
|
||||
{{if this.nameFirst @user.name (format-username @user.username)}}
|
||||
</span>
|
||||
|
|
|
@ -123,7 +123,9 @@
|
|||
&__header,
|
||||
&__body,
|
||||
&__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,
|
||||
|
|
Loading…
Reference in New Issue
Block a user