Olivero: Ensure proper visual hierarchy between headings

The design of Olivero has been finalized and the font size of the headings is not a bug or accessibility concern. Closing this ticket.

But I'd argue that there is some accessibility concern here.
Someone with a slightly blurred vision, or someone with watering eyes might not be able to clearly identify between a h3 and h2 tag.

The importance of difference between h2 and h3 is minimal for sighted users as their position on the page and within the flow of the content helps differentiate them and define their role as headings. The more important reason to have H2 vs H3 is to allow assistive tech users to differentiate because they might not have those other visual cues.

I'd also like to upgrade this from 'minor' to 'normal' if not 'major' as headings are very important part of design. They should be hierarchical not only in importance for screen readers but also in terms of design for vision.

I don't disagree in principle, but the design is finalized and without pointing to a specific rule to support that this is in fact a WCAG violation, it won't be addressed.

This page doesn't show the issue https://tugboat-aqrmztryfqsezpvnghut1cszck2wwasr.tugboat.qa/admin/appear...

I wonder if the reason the h2 font is smaller is because it's a block title. If so, we should be styling against that CSS class.

That styling is coming from text-content.css and was committed as part of issue #3111409: Add new Olivero frontend theme to Drupal 9.1 core as beta It's also in Lullabot's olivero-poc repository (git blame), but I'm not sure why it was originally authored that way.

Yeah, that was over a year ago. I'll look back through that commit log to see see what problem I was solving. Either way, I do agree we need to resolve this. Adding to #3177296: [META] Make Olivero stable as a should have.

Did a bit of comparison between the .text-content style headings and the generic ones:

Note that the "default" styling for h3, h4, h5, and h6 is just the user agent styling!

The relevant Figma file is at https://www.figma.com/file/RZvmE8xMixA4NWGmPphija/D9-Theme---Design-Revi..., but it appears to be outdated. We've since ditched the all caps variant, and they don't match with the article mock at https://www.figma.com/file/r8uq72Q9weTMVsNUFZKEYH/D9-Theme-Master?node-i...

Talked with @jwitkowski79, and she said to yank the special h2 styling for the text-content. We will also then explicitly style all of the other headings. After this is done, she will need to give approval

The hard core attitude of @andy-blum that is so widespread among Drupal projects and Drupal core is the main reason why many juniors are afraid to even try to help and others are just repulsed.

I would suggest refraining from such a stance and offer a polite explanation and a hand in understanding the rationale behind any decision.

Like many of the developers in the Bootstrap issue queue about including Bootstrap 4 in the theme, I was repulsed by a maintainer who had that God attitude and happily switched to Radix which is a much better choice anyway and maintainers are very positive about any issue and he also accepted co-maintainers to help with development.

With great respect for the work poured into the theme from the whole team and the great attitude of @mhercel I would plea that anyone should learn and try to follow the same principle while trying to make both Olivero and Drupal a better thing.

Having a good pace by addressing issues and not allowing them years to hold on with a wide community and efficient contribution handling is a key for a theme that will truly live a good life on the core (as it does not need to fight for the position anymore).

Patch attached. I'll be going over this with our designer later today.

Going over this with @jwitkowski79 right now. Tugboat link https://headings-otwsr9tpcot5mdxbhmtwrvmvvhxj3vy2.tugboat.qa/node/61

@mherchel This looks good!

Thanks! The code in the patch still needs to be reviewed if anyone wants to take a look.

RTBC +1. Now the heading are following visual hierarchy between them.

h1: font-size: 3.75rem;
h2: font-size: 2.25rem;
h3: font-size: 1.5rem;
h4: font-size: 1.125rem;
h5: font-size: 1rem;
h6: font-size: 0.875rem;

Unrelated test failure.

Committed 45d92a9 and pushed to 9.3.x. Also cherry-picked to 9.2.x because Olivero is experimental. Thanks!