Accessibility: Health Check - unable to navigate to additional options via keyboard

[BatJan]

Prerequisites

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

This fixes issue 99 from #5277

Description

I have added a button beneath the container looping over the health checks and moved the click event onto the button in order to make them keyboard accessible - The styling has been adjusted accordingly and everything looks like it's usual self here 😃

But when tabbing there is a difference illustrated in the below GIF's. Before it was not possible to tab to the checks one would be tabbing through the navigation after tabbing past the link "the documentation for more information" - After one will tab straight through the groups 👍 😃

Also I added aria-hidden to the <i> elements since they don't make sense to screen readers - This means that at some point a visually hidden text fallback needs to be added. But I'm going to wait doing that until I know if my proposed extension of the language files in PR #5905 is accepted 😅

Before

After

[emmaburstow]

Thanks for the work Jan! So nice to see the accessibility of the back office improving one pr at a time :)

We'll shout if we need you

Em

[nul800sebastiaan]

Thanks @BatJan ! 👍