Semantic elements for non-link links: update-core.php (show/hide hidden updates)

[Cheffheid]

This toggle is a link with simply href="#". Should be a button.

Related: #26504, #35126

[Cheffheid]

Much like #38671, I'll make two patches. One that relies on .button-link and one that's its own entity with styles included.

[Cheffheid]

markup update, no style changes

[Cheffheid]

Markup update, full styles update

[audrasjb]

Hi,
Tested on 4.9.4.
The patch looks good to me.

Cheers,
Jb

[afercia]

For reference, this link-that-should-be-a-button appears only when the site language is other than en-US and there is a core update. At that point, users have the ability to hide updates:

Once updates are hidden, a link to toggle the hidden updates visibility appears: this link should be a button:

[afercia]

Looking back at this, I think the link should be a button and also look like a button. There's no reason why it should look like a link, as it just toggles the visibility of the hidden updates container.

38674.diff​ also adds an aria-expanded attribute, improves the distance between the buttons, and fixes the toggle animation "jump" due to the top margin on the animated div.

Some testing would be nice.

Screenshot:

[afercia]

In 42785:

Accessibility: Change the "Show / Hide dismissed updates" link to a button.

For better accessibility and semantics, user interface controls that perform an
action should be buttons. Links should exclusively be used for navigation.
Also, adds an aria-expanded attribute to communicate the expandable panel state
and improves the buttons spacing.

Props Cheffheid, audrasjb, afercia.
Fixes #38674.