Contextual links button should use aria-expanded instead of aria-pressed

Problem/Motivation

The contextual links button reveals a menu when pressed. The open/closed state is visually apparent, and this should also be conveyed to assistive technology, in a machine-readable way.

Currently the button uses a combination of aria-pressed and changing the name of the button from "Open blockname configuration options" to "Close blockname configuration options".

Current screen reader announcements:

• "Open blockname configuration options, button, not pressed"
• "Close blockname configuration options, button, pressed"

This has some problems:

• aria-pressed is the wrong property. This is intended for toggle switches which have an on/off behaviour, such as a user preference or UI mode (e.g. "show outlines", or a "mute sound" button). For a button which opens and closes a menu or other container, the appropriate property is aria-expanded.
• The open/closed state is being conveyed by changing the name of the button, which is conflating the button's purpose with it's current state.
• The open and closed states are conveyed using strings which are localized by Drupal, but it would be preferable to let the operating system and/or assistive tech use it's own terms for this.

Proposed resolution

NOTE: this issue is only concerned with contextual links buttons on blocks. We are not changing the behaviour of the toolbar button provided by the Contextual Links module.

1. DONE. Replace the aria-pressed attribute with aria-expanded in contextual links button. Assisitive tech will convey the expanded/collapsed state based on this. The semantics of this also convey that the button causes something else to be revealed, rather than purely reflecting it's own state.
2. Associate the button with the list which it controls:
   • The nested UL list container needs a unique ID attribute. Since there is already a uniquedata-contextual-id on the parent container DIV, we can re-use that with "-menu-list" concatenated on the end as the list ID.
   • The button needs an aria-controls="foo" (foo is the ID of the UL), so that the button is programatically associated with the thing it changes.
   Note: at the present time, this isn't widely supported by assistive technology but it is the correct pattern and we should use this now to future-proof it. JAWS is the only screen reader to handle it so far.
3. Remove the "open " and "closed" phrase from the button name, i.e. stop changing the button text, and just use one name all the time ("blockname configuration options"). The open/closed state is instead conveyed by the screen reader itself, using the localizations from the host OS platform.
4. Expand the FunctionalJavascript test to check for the correct state of aria-expanded, and the correct association via aria-controls.

Proposed screen reader announcements:

• "blockname configuration options, button, collapsed"
• "blockname configuration options, button, expanded"

The exact screen announcements vary between screen readers; the important part is that collapsed/expanded phrases are localized by the OS, not Drupal. This is useful where the web page language differs from the OS interface language.

Remaining tasks

Patch.
Manual testing, confirm it works as intended with assistive technology.

User interface changes

• Improves semantics for assistive technology.
• No visual design changes.

API changes

None.

Data model changes

None.