Discource-C/discourse
1
0
Fork 0
mirror of https://github.com/discourse/discourse.git synced 2025-02-08 12:24:55 +00:00
Code Issues Packages Projects Releases Wiki Activity

A11Y: Improve user card accessibility (#18348)

Browse Source
This commit is contained in:
Keegan George 2022-09-27 10:06:20 -07:00 committed by GitHub
parent 2ee721f8aa
commit ca1038187f
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 14 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
app/assets/javascripts/discourse/app/mixins/card-contents-base.js
View File

@ -1,5 +1,5 @@
import { alias, match } from "@ember/object/computed"; import { alias, match } from "@ember/object/computed";
import { next, schedule, throttle } from "@ember/runloop"; import { schedule, throttle } from "@ember/runloop";
import DiscourseURL from "discourse/lib/url"; import DiscourseURL from "discourse/lib/url";
import Mixin from "@ember/object/mixin"; import Mixin from "@ember/object/mixin";
import afterTransition from "discourse/lib/after-transition"; import afterTransition from "discourse/lib/after-transition";
@ -7,6 +7,7 @@ import { escapeExpression } from "discourse/lib/utilities";
import { inject as service } from "@ember/service"; import { inject as service } from "@ember/service";
import { wantsNewWindow } from "discourse/lib/intercept-click"; import { wantsNewWindow } from "discourse/lib/intercept-click";
import { bind } from "discourse-common/utils/decorators"; import { bind } from "discourse-common/utils/decorators";
import discourseLater from "discourse-common/lib/later";
const DEFAULT_SELECTOR = "#main-outlet"; const DEFAULT_SELECTOR = "#main-outlet";
@ -279,10 +280,10 @@ export default Mixin.create({
// note: we DO NOT use afterRender here cause _positionCard may // note: we DO NOT use afterRender here cause _positionCard may
// run afterwards, if we allowed this to happen the usercard // run afterwards, if we allowed this to happen the usercard
// may be offscreen and we may scroll all the way to it on focus // may be offscreen and we may scroll all the way to it on focus
next(null, () => { discourseLater(() => {
const firstLink = this.element.querySelector("a"); const firstLink = this.element.querySelector("a");
firstLink && firstLink.focus(); firstLink && firstLink.focus();
}); }, 350);
} }
}); });
}, },
@ -364,8 +365,8 @@ export default Mixin.create({
@bind @bind
_escListener(event) { _escListener(event) {
if (this.visible && event.key === "Escape") { if (this.visible && event.key === "Escape") {
this._close();
this.cardTarget?.focus(); this.cardTarget?.focus();
this._close();
return; return;
} }
}, },

4
app/assets/javascripts/discourse/app/templates/components/user-card-contents.hbs
View File

@ -36,12 +36,12 @@
<div class="names"> <div class="names">
<h1 class="{{this.staff}} {{this.newUser}} {{if this.nameFirst "full-name" "username"}}"> <h1 class="{{this.staff}} {{this.newUser}} {{if this.nameFirst "full-name" "username"}}">
{{#if this.user.profile_hidden}} {{#if this.user.profile_hidden}}
<span class="name-username-wrapper"> <span id="discourse-user-card-title" class="name-username-wrapper">
{{if this.nameFirst this.user.name (format-username this.user.username)}} {{if this.nameFirst this.user.name (format-username this.user.username)}}
</span> </span>
{{else}} {{else}}
<a href={{this.user.path}} {{action "showUser" this.user}} class="user-profile-link"> <a href={{this.user.path}} {{action "showUser" this.user}} class="user-profile-link">
<span class="name-username-wrapper"> <span id="discourse-user-card-title" class="name-username-wrapper">
{{if this.nameFirst this.user.name (format-username this.user.username)}} {{if this.nameFirst this.user.name (format-username this.user.username)}}
</span> </span>
{{user-status this.user currentUser=this.currentUser}} {{user-status this.user currentUser=this.currentUser}}

3
app/assets/javascripts/discourse/app/templates/user-card.hbs
View File

@ -2,6 +2,5 @@
<div class="card-cloak hidden"></div> <div class="card-cloak hidden"></div>
{{/if}} {{/if}}
<UserCardContents @topic={{this.topic.model}} @showUser={{action "showUser"}} @filterPosts={{action "filterPosts"}} @composePrivateMessage={{route-action "composePrivateMessage"}} @createNewMessageViaParams={{route-action "createNewMessageViaParams"}} /> <UserCardContents @topic={{this.topic.model}} @showUser={{action "showUser"}} @filterPosts={{action "filterPosts"}} @composePrivateMessage={{route-action "composePrivateMessage"}} @createNewMessageViaParams={{route-action "createNewMessageViaParams"}} role="dialog" aria-labelledby="discourse-user-card-title"/>
<GroupCardContents @topic={{this.topic.model}} @showUser={{action "showUser"}} @showGroup={{action "showGroup"}} @createNewMessageViaParams={{route-action "createNewMessageViaParams"}} /> <GroupCardContents @topic={{this.topic.model}} @showUser={{action "showUser"}} @showGroup={{action "showGroup"}} @createNewMessageViaParams={{route-action "createNewMessageViaParams"}} />

7
app/assets/stylesheets/common/components/user-card.scss
View File

@ -53,7 +53,7 @@ $avatar_margin: -50px; // negative margin makes avatars extend above cards
clear: both; clear: both;
} }
a.card-huge-avatar { a.card-huge-avatar {
outline: none; display: block;
} }
.bio { .bio {
@include line-clamp(2); @include line-clamp(2);
@ -70,6 +70,11 @@ $avatar_margin: -50px; // negative margin makes avatars extend above cards
.user-profile-link { .user-profile-link {
display: flex; display: flex;
align-items: center; align-items: center;
&:focus {
border: 1px solid;
@include default-focus;
}
} }
.d-icon { .d-icon {