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

A11Y: welcome banner heading should not be an H1 (#32420)

Browse Source 
The H1 doesn't work here because the same text appears on all top level
discovery pages and it doesn't describe the page content or purpose.

So for example, navigating from heading to heading with a screen
reader... on every discovery page you'd end up hitting "welcome back,
username" before jumping to the next heading level (which are topic
titles) — this is undesirable.

The H1 was adding bold and margin, so I've added that to the class.
There are no visual changes.
This commit is contained in:
Kris
2025-04-23 13:43:09 -04:00
committed by GitHub
parent c696a03232
commit d3af1abf70
2 changed files with 7 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
app/assets/javascripts/discourse/app/components/welcome-banner.gjs
View File

@ -96,7 +96,9 @@ export default class WelcomeBanner extends Component {
>
<div class="custom-search-banner welcome-banner__inner-wrapper">
<div class="custom-search-banner-wrap welcome-banner__wrap">
<h1 class="welcome-banner__title">{{htmlSafe this.headerText}}</h1>
<div class="welcome-banner__title">
{{htmlSafe this.headerText}}
</div>
<PluginOutlet @name="welcome-banner-below-headline" />
<div class="search-menu welcome-banner__search-menu">
<DButton

6
app/assets/stylesheets/common/components/welcome-banner.scss
View File

@ -68,9 +68,11 @@
}
}
h1 {
.welcome-banner__title {
font-size: var(--font-up-6);
line-height: $line-height-medium;
font-weight: bold;
margin-bottom: 0.5rem;
@include breakpoint(tablet) {
font-size: var(--font-up-4);
@ -81,7 +83,7 @@
}
}
h1,
.welcome-banner__title,
p {
text-align: center;
}