Fixed Group Headings in Content

[tiffy74]

Prerequisites

• I have added steps to test this contribution in the description below

If there's an existing issue for this PR then this fixes umbraco/Umbraco-CMS.Accessibility.Issues#44

Description

When a group is created on a document type - in the content view the name of the group appears at the top of the group.

This is styled to appear as a heading - but it has no correspending H tag or role=heading in the html - this means it does not get announced as a heading to assistive technology. The impact is that those unable to visually perceive the text will be unaware that they are in a group entitled 'Content'. This is the same for any new group created in the same way:

Therefore I have submitted a PR that fixes this issue by adding a H2 tag to the group header. H2 because if the associated PR for issue 42 is accepted then it makes sense that the group headings are the next level after the H1 that should be the overall heading for the page (eg content)

Further I have attached additional styling to the section header to match it's previous style so there is minimal impact upon how the groups look visually.

In order to do this - the CSS properties need to be removed from the parent element and placed upon the H2 within. Futher the original CSS also had an absolute value for the font-size. This has now been amended to use the same .Less variable that is used elsewhere on the site.

.umb-group-panel__header {
padding: 12px 20px;
display: flex;
align-items: center;
justify-content: space-between;
color: @grayDarker;
border-bottom: 1px solid @gray-9;
}

.umb-group-panel__header h2 {
font-size: @fontSizeMedium;
font-weight: bold;
}

Testing

In order to test this:

• Create a dummy site with a basic document type to represent a content or home page
• Add some groups such as 'Content' and 'Header' as per images above
• Go to the content editing section of the backoffice
• Create a new page and use whichever browser's 'inspect' tool over the content groups. These should now be H2
• This also works correctly with a screen reader: note - in order for the headings to be nested correctly this PR should only be merged after issue 42

[github-actions]

Hi there @tiffy74, thank you for this contribution! 👍

While we wait for one of the Core Collaborators team to have a look at your work, we wanted to let you know about that we have a checklist for some of the things we will consider during review:

• It's clear what problem this is solving, there's a connected issue or a description of what the changes do and how to test them
• The automated tests all pass (see "Checks" tab on this PR)
• The level of security for this contribution is the same or improved
• The level of performance for this contribution is the same or improved
• Avoids creating breaking changes; note that behavioral changes might also be perceived as breaking
• If this is a new feature, Umbraco HQ provided guidance on the implementation beforehand
• 💡 The contribution looks original and the contributor is presumably allowed to share it

Don't worry if you got something wrong. We like to think of a pull request as the start of a conversation, we're happy to provide guidance on improving your contribution.

If you realize that you might want to make some changes then you can do that by adding new commits to the branch you created for this work and pushing new commits. They should then automatically show up as updates to this pull request.

Thanks, from your friendly Umbraco GitHub bot 🤖 🙂

[mikecp]

Hi @tiffy74 ,

Thanks for this other accessibility PR! I merged the one linked to issue 42 just before this one, so it's looking all fine!

Cheers!

[bjarnef]

I think after changing the group headings to actually heading-element, it is taking too much vertical space.

Previous it looked something like this:

When using e.g. a laptop I think the group header is taking too much valuable space especially with many groups.

It also seems it has some odd styling now as the elements have changed.

where the tree group headers doesn't have same sizes.

[tiffy74]

Yes I agree. I noticed this at the weekend. I have created a new issue on our accessibility issues log and will resolve this asap