[a11y] challeng-the-default page contains aria-hidden elements that are still keyboard focusable

[alexgibson]

Description

Describe the issue that you're seeing.

Steps to reproduce

I tested this using VoiceOver on macOS:

1. Open https://www.mozilla.org/de/firefox/challenge-the-default/
2. Enable VO via command + F5.
3. Observe that the browser close button ("X") is ignored as part of the reading order as expected.
4. Reload the page and start tabbing through focus-able elements.
5. Observe that the "X" button is still focus-able and will be read aloud by the screen reader when focused, despite it containing aria-hidden.

This creates a confusing state: https://dequeuniversity.com/rules/axe/4.10/aria-hidden-focus

Expected result

If an element contains aria-hidden then it should also be removed from the keyboard focus index. The down-side to this is that these "easter eggs" then also become click only.

The other option is to remove aria-hidden and then try and make these things more accessible, but I question whether that would actually improve the experience for assisted technologies. It could make things even worse.

Actual result

There are 4 elements where this problem occurs:

1. The browser "X" close button in the hero.
2. The "smiley face" toggles part way down the page.
3. The cat (=^._.^=) button.
4. The animated "challenge the default" button

Environment

Firefox Nightly
macOS