Add aria-labelledby and move button up

[compulim]

Fixes #4609.

Changelog Entry

Fixed

• Fixes #4561. Header title of keyboard help dialog should be the aria-labelledby of the dialog and close button should be the first element of the header, by @compulim in PR #4609

Description

We should have aria-label or aria-labelledby for the dialog header.

We should put close button (<button>) before the dialog header (<h2>). So, when the end-user press DOWN arrow key from the close button, screen reader would narrate "Keyboard controls".

Design

Assume the screen reader cursor lands on the close button thru TAB, when the user press DOWN to instruct the screen reader to read the content (of the dialog), the user expects the screen reader to narrate the title of the dialog.

This means, close button would need to locate in front of the <h2>.

However, when the screen reader cursor lands on the close button from the transcript (or out of page), since the button resides inside the dialog, screen reader will narrate landmark role as well. Screen reader will narrate "keyboard controls dialog banner header close button". Then, when DOWN is pressed, it will narrate "heading level 2 keyboard controls".

I think both narration design is compliant to ARIA. This is just matter of taste.

The following video shows accessibility experience with this pull request.

2023-01-11.Web.Chat.Keyboard.Help.Screen.Banner.Header.mp4

In the future, we could consider using <dialog>/HTMLDialogElement to host the dialog. This needs more investigation.

Specific Changes

• Add aria-labelledby to <div role="dialog"> and points it to <h2>
• Move <button> inside the <header> container and before the <h2>

• I have added tests and executed them locally
• I have updated CHANGELOG.md
• I have updated documentation

Review Checklist

This section is for contributors to review your work.

• Accessibility reviewed (tab order, content readability, alt text, color contrast)
• Browser and platform compatibilities reviewed
• CSS styles reviewed (minimal rules, no z-index)
• Documents reviewed (docs, samples, live demo)
• Internationalization reviewed (strings, unit formatting)
• package.json and package-lock.json reviewed
• Security reviewed (no data URIs, check for nonce leak)
• Tests reviewed (coverage, legitimacy)