Discource-C
/
discourse
mirror of https://github.com/discourse/discourse.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

A11Y: remove heading tags from user profile (#19935)

This commit is contained in:
Kris 2023-01-20 12:27:07 -05:00 committed by GitHub
parent 1521bace4f
commit f7907a3645
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 82 additions and 89 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

47
app/assets/javascripts/discourse/app/templates/user.hbs
View File

@ -172,7 +172,10 @@
<div class="primary-textual">
<div class="user-profile-names">
<h1 class={{if this.nameFirst "full-name" "username"}}>
<div
class="{{if this.nameFirst 'full-name' 'username'}}
user-profile-names__primary"
>
{{if
this.nameFirst
this.model.name
@ -182,15 +185,22 @@
{{#if this.model.status}}
<UserStatusMessage @status={{this.model.status}} />
{{/if}}
</h1>
<h2 class={{if this.nameFirst "username" "full-name"}}>{{#if
</div>
<div
class="{{if this.nameFirst 'username' 'full-name'}}
user-profile-names__secondary"
>{{#if
this.nameFirst
}}{{this.model.username}}{{else}}{{this.model.name}}{{/if}}</h2>
}}{{this.model.username}}{{else}}{{this.model.name}}{{/if}}</div>
{{#if this.model.staged}}
<h2 class="staged">{{i18n "user.staged"}}</h2>
<div class="staged user-profile-names__secondary">{{i18n
"user.staged"
}}</div>
{{/if}}
{{#if this.model.title}}
<h3>{{this.model.title}}</h3>
<div
class="user-profile-names__title"
>{{this.model.title}}</div>
{{/if}}
<PluginOutlet
@name="user-post-names"
@ -201,9 +211,10 @@
</div>
{{#if this.showFeaturedTopic}}
<h3 class="featured-topic">
<span>{{i18n "user.featured_topic"}}</span>
<LinkTo
<div class="featured-topic user-profile__featured-topic">
<span title={{i18n "user.featured_topic"}}>
{{d-icon "book"~}}
</span><LinkTo
@route="topic"
@models={{array
this.model.featured_topic.slug
@ -212,19 +223,20 @@
>{{html-safe
(replace-emoji this.model.featured_topic.fancy_title)
}}</LinkTo>
</h3>
</div>
{{/if}}
<h3 class="location-and-website">
<div
class="location-and-website user-profile__location-and-website"
>
{{#if this.model.location}}<div
class="user-profile-location"
>{{d-icon "map-marker-alt"}}
>{{d-icon "map-marker-alt"~}}
{{this.model.location}}</div>{{/if}}
{{#if this.model.website_name}}
<div class="user-profile-website">
{{d-icon "globe"}}
{{#if this.linkWebsite}}
{{! template-lint-disable }}
<div class="user-profile-website">{{d-icon "globe"~}}
{{#if this.linkWebsite~}}
{{~! template-lint-disable ~}}
<a
href={{this.model.website}}
rel="noopener {{unless
@ -246,7 +258,7 @@
@connectorTagName="div"
@args={{hash model=this.model}}
/>
</h3>
</div>
<div class="bio">
{{#if this.model.suspended}}
@ -405,7 +417,6 @@
</dl>
<PluginOutlet
@name="user-profile-secondary"
@tagName="span"
@connectorTagName="div"
@args={{hash model=this.model}}
/>

79
app/assets/stylesheets/common/base/user.scss
View File

@ -104,7 +104,7 @@
dl {
margin: 0;
padding: 5px 10px;
padding: 0.25em 0;
div {
display: inline-flex;
align-items: baseline;
@ -148,28 +148,6 @@
background: rgba(var(--secondary-rgb), 0.8);
border-bottom: 1px solid var(--primary-low);
h1 {
font-size: var(--font-up-5);
font-weight: normal;
.d-icon {
font-size: 0.8em;
}
}
h2 {
font-weight: normal;
max-width: 100%;
@include ellipsis;
}
h3 {
font-weight: normal;
margin-bottom: 0.5em;
.d-icon:not(:first-of-type) {
margin-left: 10px;
}
}
.groups {
display: inline;
}
@ -186,10 +164,6 @@
width: 100%;
position: relative;
h1 {
font-weight: bold;
}
.bio {
max-height: 300px;
overflow: auto;
@ -235,15 +209,17 @@
height: 45px;
}
h1 {
.user-profile-names__primary {
font-size: var(--font-up-3);
}
h2 {
.user-profile-names__secondary {
font-size: var(--font-up-1);
}
h3,
h3.location-and-website {
.user-profile-names__title,
.user-profile__location-and-website,
.user-profile__featured-topic {
display: none;
}
}
@ -783,6 +759,47 @@
font-style: italic;
}
.user-profile-names__primary,
.user-profile-names__secondary {
max-width: 100%;
margin: 0;
@include ellipsis;
}
.user-profile-names__primary {
font-weight: bold;
font-size: var(--font-up-5);
line-height: var(--line-height-small);
.d-icon {
font-size: 0.8em;
vertical-align: baseline;
}
}
.user-profile-names__secondary {
font-size: var(--font-up-3);
}
.user-profile__featured-topic,
.user-profile__location-and-website {
font-size: var(--font-0);
margin-top: 0.5em;
@include ellipsis;
.d-icon {
font-size: var(--font-down-1);
color: var(--primary-high);
margin-right: 0.33em;
}
}
.user-profile__location-and-website {
display: flex;
max-width: 100%;
.user-profile-location {
margin-right: 1em;
}
}
.selectable-avatars {
max-height: 350px;
margin-bottom: 1em;

37
app/assets/stylesheets/desktop/user.scss
View File

@ -96,10 +96,6 @@
.btn.right {
float: right;
}
h2 {
margin-bottom: 10px;
}
}
.pref-avatar {
@ -158,30 +154,12 @@ table.user-invite-list {
margin: 0 20px 10px 0;
}
.primary {
.primary-textual {
padding: 0 4px 4px;
h1 {
max-width: 100%;
@include ellipsis;
}
.location-and-website {
display: flex;
max-width: 100%;
@include ellipsis;
.user-profile-location {
margin-right: 1em;
}
}
}
.bio {
max-width: 750px;
}
.primary-textual {
padding: 0 0 0.5em;
}
.secondary {
margin-top: 16px;
.bio {
max-width: 750px;
}
}
@ -198,7 +176,7 @@ table.user-invite-list {
}
.controls {
padding: 0 0 12px 0;
padding: 0;
float: right;
max-width: 13.5em;
@ -283,11 +261,6 @@ table.user-invite-list {
max-width: 100%;
}
h3 {
color: var(--primary);
margin: 20px 0 10px 0;
}
.category-selector,
.tag-chooser,
textarea,

8
app/assets/stylesheets/mobile/user.scss
View File

@ -102,14 +102,6 @@
.details {
margin-bottom: 12px;
h1 {
line-height: var(--line-height-small);
}
h2 {
line-height: var(--line-height-medium);
}
.user-profile-avatar {
.avatar-flair {
right: 2px;