Accessibility: Fixed reading order of keyboard shortcuts.

[nicolad]

Description

Fixes: #15317

How has this been tested?

This was tested locally.

Types of changes

Replaced description list with unordered list.
Removed order prop and changed the order of elements.

Checklist:

• My code is tested.
• My code follows the WordPress code style.
• My code follows the accessibility standards.
• My code has proper inline documentation.
• I've included developer documentation if appropriate.

[afercia]

Thanks a lot @nicolad for working on this. The native order improves things a lot.

Noticed a couple things that should be addressed:

1
Safari doesn't expose styled lists as lists to assistive technologies. This is a known Safari "feature", which requires to add a redundant role="list" to the <ul> element. As a consequence, the related ESLint rule needs to be disabled with an explanatory comment. See for example:

gutenberg/packages/block-editor/src/components/block-navigation/index.js

Lines 28 to 33 in 761543e

	/*
	* Disable reason: The `list` ARIA role is redundant but
	* Safari+VoiceOver won't announce the list otherwise.
	*/
	/* eslint-disable jsx-a11y/no-redundant-roles */
	<ul className="editor-block-navigation__list block-editor-block-navigation__list" role="list">

2
<li> elements inherit margin-bottom: 6px; from WordPress, this should be reset to not introduce visual changes

Lastly, I've noticed some shortcuts miss the aria-label, which is meant to make the various shortcuts be announced in a more "human friendly" way. This is a pre-existing problem though, will create a separate issue.

[nicolad]

Thank you @afercia, you have 👀 of the 🐯

[afercia]

Looks good to me, thanks! 👍