Skip to content

Follow-up from "Use tailwind util classes for semantic color usage in What's New"

The following discussions from !160284 (merged) should be addressed:

  • @clavimoniere started a discussion: (+1 comment)

    @annabeldunstone can you give this a UX Paper Cuts review?

  • @vanessaotto started a discussion:

    suggestion(non-blocking): This comment is independent from the changes that you did in this MR. So feel free to ignore it.

    1. Order and nesting of elements

    I wondered what a random h5 is doing within an anchor. Generally, using a headline withing an a element is okay-ish in some cases (https://caninclude.glitch.me/caninclude?child=h5&parent=a), but using an a element within a h5 is more valid: https://caninclude.glitch.me/caninclude?child=a&parent=h5

    So first question: Can we swap h5 and gl-link?

    Screenshot_2024-07-23_at_14.14.54

    2. Heading order

    Then, the headline order seems to be a bit off. I see that the What's new sidebar starts with a h4, so generally the h5 here is fine. But it probably should rather be a h2 followed by an h3.

    3. Heading class

    If we want to use the styles for a h5 (no matter if it's a h2, h3,... schemanticly), we do have specific heading classes for the job. The pendant to gl-font-lg/gl-text-lg is gl-heading-4. So, in this case we can use:

          <h5 class="gl-heading-4 gl-my-0" data-testid="feature-name">{{ feature.name }}</h5>

    I tested it locally, and it looks exactly the same.

  • @vanessaotto started a discussion:

    thought(non-blocking): This comment is independent from the changes that you did in this MR and a very high-level a11y topic. So feel free to ignore it.

    For getting a perfect score in web accessibility, a heading should always come first, with optional paragraph and images below. E.g. when there is a card with a cover image on top, followed by a headline, the HTML should first have the headline, and then the image. Visually the order can be turned around using flex and order styles.

    But also, the image is not an image, but a background image without any alternative text. A screen reader would just read out the same {{ feature.name }} twice. Which isn't bad, but also not helpful. I think in that case, the first link with the background-imgdiv could be set to be completely ignored for screen readers or thegl-sr-onlyspan should at least describe that itImage for {{ feature.name }}. And then the order turned around with e.g. flexandorder`.