IntenseWebs/discourse
3
0
Fork 0
mirror of https://github.com/discourse/discourse.git synced 2024-11-28 19:53:53 -06:00
Code Issues Packages Projects Releases Wiki Activity

A11Y: remove heading tags from usercards (#27926)

Browse Source
This commit is contained in:
Kris 2024-07-16 12:32:53 -04:00 committed by GitHub
parent 0d4492c7b7
commit d4ade75583
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
6 changed files with 80 additions and 72 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
app/assets/javascripts/discourse/app/components/group-card-contents.hbs
View File

@ -30,17 +30,19 @@
</div>
<div class="names">
<span>
<h1 class={{this.group.name}}>
<div class="names__primary {{this.group.name}}">
<a
{{on "click" this.handleShowGroup}}
href={{this.groupPath}}
class="group-page-link"
>{{this.group.name}}</a>
</h1>
</div>
{{#if this.group.full_name}}
<h2 class="full-name">{{this.group.full_name}}</h2>
<div class="names__secondary full-name">
{{this.group.full_name}}
</div>
{{else}}
<h2 class="username">{{this.group.name}}</h2>
<div class="names__secondary username">{{this.group.name}}</div>
{{/if}}
</span>
</div>

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

@ -52,8 +52,9 @@
</div>
</div>
<div class="names">
<h1
class="{{this.staff}}
<div
class="names__primary
{{this.staff}}
{{this.newUser}}
{{if this.nameFirst 'full-name' 'username'}}"
>
@ -87,33 +88,33 @@
{{user-status this.user currentUser=this.currentUser}}
</a>
{{/if}}
</h1>
</div>
<PluginOutlet
@name="user-card-after-username"
@connectorTagName="div"
@outletArgs={{hash user=this.user showUser=this.handleShowUser}}
/>
{{#if this.nameFirst}}
<h2 class="username">{{this.user.username}}</h2>
<div class="names__secondary username">{{this.user.username}}</div>
{{else}}
{{#if this.user.name}}
<h2 class="full-name">{{this.user.name}}</h2>
<div class="names__secondary full-name">{{this.user.name}}</div>
{{/if}}
{{/if}}
{{#if this.user.title}}
<h2>{{this.user.title}}</h2>
<div class="names__secondary">{{this.user.title}}</div>
{{/if}}
{{#if this.user.staged}}
<h2 class="staged">{{i18n "user.staged"}}</h2>
<div class="names__secondary staged">{{i18n "user.staged"}}</div>
{{/if}}
{{#if this.hasStatus}}
<h3 class="user-status">
<div class="user-status">
{{html-safe this.userStatusEmoji}}
<span class="user-status__description">
{{this.user.status.description}}
</span>
{{format-date this.user.status.ends_at format="tiny"}}
</h3>
</div>
{{/if}}
<div>
<PluginOutlet
@ -296,25 +297,29 @@
{{#unless this.contentHidden}}
<div class="metadata">
{{#if this.user.last_posted_at}}
<h3><span class="desc">{{i18n "last_post"}}</span>
{{format-date this.user.last_posted_at leaveAgo="true"}}</h3>
<div class="metadata__last-posted">
<span class="desc">{{i18n "last_post"}}</span>
{{format-date this.user.last_posted_at leaveAgo="true"}}</div>
{{/if}}
<h3><span class="desc">{{i18n "joined"}}</span>
{{format-date this.user.created_at leaveAgo="true"}}</h3>
<div class="metadata__user-created">
<span class="desc">{{i18n "joined"}}</span>
{{format-date this.user.created_at leaveAgo="true"}}</div>
{{#if this.user.time_read}}
<h3 title={{this.timeReadTooltip}}>
<div class="metadata__time-read" title={{this.timeReadTooltip}}>
<span class="desc">{{i18n "time_read"}}</span>
{{format-duration this.user.time_read}}
{{#if this.showRecentTimeRead}}
<span>({{i18n
<span>
({{i18n
"time_read_recently"
time_read=this.recentTimeRead
}})</span>
}})
</span>
{{/if}}
</h3>
</div>
{{/if}}
{{#if this.showCheckEmail}}
<h3 class="email">
<div class="metadata__email">
{{d-icon "envelope" title="user.email.title"}}
{{#if this.user.email}}
{{this.user.email}}
@ -326,7 +331,7 @@
class="btn-primary"
/>
{{/if}}
</h3>
</div>
{{/if}}
<PluginOutlet
@name="user-card-metadata"

12
app/assets/javascripts/discourse/tests/acceptance/user-card-test.js
View File

@ -57,9 +57,9 @@ acceptance(
await click('a[data-user-card="eviltrout"]');
assert
.dom(".user-card h1.username .name-username-wrapper")
.dom(".user-card .username .name-username-wrapper")
.hasText("eviltrout");
assert.dom(".user-card h2.full-name").hasText("Robin Ward");
assert.dom(".user-card .full-name").hasText("Robin Ward");
});
}
);
@ -79,9 +79,9 @@ acceptance(
await click('a[data-user-card="eviltrout"]');
assert
.dom(".user-card h1.full-name .name-username-wrapper")
.dom(".user-card .full-name .name-username-wrapper")
.hasText("Robin Ward");
assert.dom(".user-card h2.username").hasText("eviltrout");
assert.dom(".user-card .username").hasText("eviltrout");
});
}
);
@ -100,7 +100,7 @@ acceptance("User Card - User Status", function (needs) {
await visit("/t/internationalization-localization/280");
await click('a[data-user-card="charlie"]');
assert.dom(".user-card h3.user-status").exists();
assert.dom(".user-card .user-status").exists();
});
test("doesn't show user status if disabled", async function (assert) {
@ -109,7 +109,7 @@ acceptance("User Card - User Status", function (needs) {
await visit("/t/internationalization-localization/280");
await click('a[data-user-card="charlie"]');
assert.dom(".user-card h3.user-status").doesNotExist();
assert.dom(".user-card .user-status").doesNotExist();
});
});

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

@ -8,7 +8,8 @@
}
}
.user-card {
.user-card,
.group-card {
--card-width: 39em;
--avatar-width: 8em;
--avatar-margin: -3.3em; // extends the avatar above the card
@ -114,15 +115,21 @@
.btn {
margin-bottom: 5px;
}
h1 {
.names__primary {
line-height: var(--line-height-medium);
font-size: var(--font-up-5);
font-weight: bold;
.d-icon {
color: var(--primary);
}
}
h3 {
display: inline;
margin-right: 0.5em;
.names__secondary {
font-size: var(--font-up-1);
}
.metadata {
display: flex;
flex-wrap: wrap;
gap: 0.15em 0.5em;
color: var(--primary);
&.email,
.desc,
@ -130,22 +137,18 @@
color: var(--primary-high);
}
}
h1,
h2,
h3 {
.names__secondary,
[class*="metadata__"] {
margin: 0;
@include ellipsis;
}
h1,
h2 {
.names__primary,
.names__secondary {
a {
color: var(--primary);
}
}
h2,
h3 {
font-weight: normal;
}
p {
margin: 0 0 5px 0;
}
@ -270,6 +273,28 @@
@extend .user-badge;
}
}
.user-status {
display: flex;
img.emoji {
margin-bottom: 1px;
margin-right: 0.3em;
}
.relative-date {
flex: 1 0 auto;
text-align: left;
font-size: var(--font-down-3);
padding-top: 0.5em;
margin-left: 0.6em;
color: var(--primary-medium);
}
&__description {
@include ellipsis;
}
}
}
// styles for group cards only
@ -315,21 +340,3 @@
}
}
}
h3.user-status {
display: flex;
img.emoji {
margin-bottom: 1px;
margin-right: 0.3em;
}
.relative-date {
flex: 1 0 auto;
text-align: left;
font-size: var(--font-down-3);
padding-top: 0.5em;
margin-left: 0.6em;
color: var(--primary-medium);
}
}

10
app/assets/stylesheets/desktop/components/user-card.scss
View File

@ -13,24 +13,18 @@
}
}
}
h1 {
.names__primary {
.d-icon {
font-size: var(--font-down-1);
}
}
h2 {
font-size: var(--font-up-1);
}
h3 {
font-size: var(--font-0);
}
@include breakpoint("mobile-extra-large") {
// important for keeping the usercard uncropped
// at 200% - 400% zoom levels
--avatar-width: 4em;
--avatar-margin: 0;
.names h1 {
.names__primary {
font-size: var(--font-up-2);
}
.first-row {

6
app/assets/stylesheets/mobile/components/user-card.scss
View File

@ -40,16 +40,16 @@
}
}
}
h1 {
.names__primary {
font-size: var(--font-up-3);
.d-icon {
font-size: var(--font-down-2);
}
}
h2 {
.names__secondary {
font-size: var(--font-0);
}
h3 {
.user-status {
font-size: var(--font-down-1);
}
}