Home page lacks an h1 since page title does not display

This is clearly a bug and is therefore a candidate for backport to 1.0.x.

Maybe we could add the H1 to the regular page content (the body text) and assign the visually-hidden class to it?

Yeah, just wondered if anyone can verify that's the right approach as I am not sure.

Isn't the site name usually the h1 on the homepage?

To fix this, we'll want to add the `.visually-hidden` CSS class to an H1 page title that's always on the page. Checking to see what's there now.

After further checking, I can see that the page title is completely hidden from the <front> page in the block settings at /admin/structure/block/manage/drupal_cms_olivero_page_title?destination=/admin/structure/block

So I think the best high-level fix would be to:

1. Make the page title block required on every page
2. Make sure that its value matches the page title used within the <title></title> tag
3. When it is hidden on a page like the <front> page, add the .visually-hidden CSS class to properly hide it → from sighted users and let it get read aloud to screen readers
4. Do this all through the already-existing Blocks UI > Content Above > Page Title at /admin/structure/block/manage/drupal_cms_olivero_page_title?destination=/admin/structure/block

If we're conditionally adding classes, I'm thinking this is probably something we need to do in our Olivero subtheme.

Isn't the site name usually the h1 on the homepage?

Visibly? No, not usually. I can see that Drupal.org uses the visually-hidden class.

So yes we need to update the block config and preprocess the title on home to add this class.

Created an MR, had to add home-specific CSS for an extremely annoying bug. There was a horizontal scroll on smaller screens with this change because there's a width: 100% coming from another place that is overriding the width: 1px that is set in visually-hidden. So overrode that with a width: auto for this block only. But there may be a better way to fix this, I'm not sure.

Seems like a lot of work to add a class, and will only be available in the Drupal CMS Olivero theme.

I think how it is implemented is the Drupal way, but I would like to propose a alternate solutions.

Option 1 - Block Class

If we added the block class module, we could add a second Page Title block for the home page with the .visually-hidden and .sr-only classes, which are the most common classes in css frameworks.

Pros:
No theme hardcoding/custom code

Cons:
Ongoing support for block_class, but it really is a useful no-code tool.
Duplication of Page title block config.

Option 2 - ECA

Using the Render: add class action, we may be able to add the class to the home page block.

Pros:
No theme hardcoding/custom code
No additional modules

Cons:
Not as visible to site builders as block class.

I think I actually prefer ECA in this situation, because it's a one-off in the Olivero subtheme. While I agree that Block Class is a good module and would be a safe inclusion in Drupal CMS, it's unclear how it would work in the context of Experience Builder, and we should be generally leaning towards being XB-ready.

Left a review. The CSS specific to the frontpage is unneeded.

I'm fine with either ECA or preprocess.

I lean towards preprocess because it means no additional dependencies, and is fine for this subtheme, which is a kludge anyway and not something we will maintain long-term. If the preprocess method is somehow insufficient, ECA would be my second choice.

@mherchel

had to add home-specific CSS for an extremely annoying bug. There was a horizontal scroll on smaller screens with this change because there's a width: 100% coming from another place that is overriding the width: 1px that is set in visually-hidden. So overrode that with a width: auto for this block only.

Do you have another suggestion for how to fix this? (Note that there's an issue with the MR, I'll fix the path -- I was testing it just in base.css and didn't properly update it).

Screencast of the scroll without the CSS fix.

I prefer to keep this in the theme over ECA or Block Class mainly because it is theme-specific, and it's a one-off. We want to avoid adding modules that will possibly conflict with XB. And although I love a good ECA fix, this feels pretty random. I don't think we want to add the class always, and if we end up just adding it for this theme then that seems like it should just be in the theme where it's easier to find.

Do you have another suggestion for how to fix this?

Ahh didn't know this. Will take a look.

The root of the problem is that Olivero's CSS specificity on that page title block is greater then core's visually-hidden CSS class, so the Olivero width is taking priority.

I added a utility CSS file with an !important flag on the width property.

This should be good to go, but leaving it at NR since I added the most recent code.

Ahh thank you!

Merged into 1.x and cherry-picked to 1.0.x. Thanks!

Automatically closed - issue fixed for 2 weeks with no activity.