Skip to content

Replace previous box titles with more accessible version#3633

Merged
shiltemann merged 43 commits intomainfrom
new-boxes2
Oct 18, 2022
Merged

Replace previous box titles with more accessible version#3633
shiltemann merged 43 commits intomainfrom
new-boxes2

Conversation

@hexylena
Copy link
Member

@hexylena hexylena commented Sep 28, 2022

This replaces the previous box titles which required one to type out a lot manually:

> ### {% icon tip %} Tip: Some tip

With a cleaner, "custom element"

> <tip-title>Some tip</tip-title>

Where the icon and styling is done automatically. This is done for all box types, and makes it easier to do bulk updates on them in the future if we need further changes.

It is backwards compatible, old style "icon tip ..." are still functional (until we get e.g. planemo updated + some of #2687 to provide suggestions)

accessibility

There are two a11y reasons to do this:

  1. our previous boxes didn't announce opening/closing, we would have to write a lot of javascript to work around this.
  2. Our previous boxes used an h3 element, which constantly got flagged for incorrect trees of h1/2/3/4/..., having a transition from h1 to h3 is bad, and an h3 inside e.g. an h6 section completely breaks the structure.
  3. We had icons which were completely for decoration in the box titles, it was extremely redundant for screenreaders to read hands on icon Hands-on: title, but we couldn't set aria=false on all of those to make screenreaders ignore them. This allows us to finally do that.

@hexylena hexylena requested review from a team as code owners September 28, 2022 13:47
@hexylena hexylena requested a review from a team as a code owner September 28, 2022 14:49
@hexylena hexylena mentioned this pull request Oct 6, 2022
19 tasks
@shiltemann shiltemann merged commit 7b1e1c0 into main Oct 18, 2022
@shiltemann
Copy link
Member

whoo!! 🎉

@bgruening bgruening deleted the new-boxes2 branch October 18, 2022 09:44
@bgruening
Copy link
Member

💯 🥇

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants