Update `FieldDropdown` aria

[maribethb]

Check for duplicates

• I have searched for similar issues before opening a new one.

Problem

No response

Request

FieldDropdown requires custom setup for both correct and effective ARIA representation. For correctness, the following changes are needed:

• The field's root element needs to have the role button.
• It needs to correctly update an aria-expanded state depending on whether the expanded listbox is open.
• It needs an aria-haspopup attribute set to listbox per https://www.w3.org/WAI/ARIA/apg/patterns/combobox/.
• It needs an aria-controls attribute set to the pop-up menu ID that contains selectable options. This requires additional changes:
  • Menu needs to be updated to expose a Blockly-unique ID set for its root div element.
  • MenuItem needs to be updated to support an optional ARIA label for its root element (and its other content div should be set to have role presentation since it nor any of its descendants should ever be read out by the screen reader).
  • Menu items need to have a good label for readout. At a high-level this requires a change to MenuOption shown below. More specifically, the specific type of menu option dictates the label to use:
    • If an override attribute is defined in the block definition, use that.
    • If the menu option is an image, use its alt text if defined.
• Use the same logic as FieldDropdown.getText_() today for a human-readable string representation.
• If there's no text representation, convert the option directly to a string as a last resort though this may be revisited to instead provide a numeral variant of the option (e.g. "Option Please tag a release #4").

As mentioned, MenuOption needs to be updated to facilitate custom option labels (note that the label is optional for backward compatibility):

export type MenuOption =
  | [string | ImageProperties | HTMLElement, string, string?]
  | 'separator';

Which, in turns, allows the following type of customization (this is an example only and does not need to be implemented as part of fixing this issue):

{
  'type': 'field_dropdown',
  'name': 'OP',
  'ariaTypeName': 'Arithmetic operation',
  'options': [
    ['%{BKY_MATH_ADDITION_SYMBOL}', 'ADD', 'Plus'],
    ['%{BKY_MATH_SUBTRACTION_SYMBOL}', 'MINUS', 'Minus'],
    ['%{BKY_MATH_MULTIPLICATION_SYMBOL}', 'MULTIPLY', 'Times'],
    ['%{BKY_MATH_DIVISION_SYMBOL}', 'DIVIDE', 'Divided by'],
    ['%{BKY_MATH_POWER_SYMBOL}', 'POWER', '%{BKY_MATH_POWER_OPERATOR_ARIA_LABEL}']
  ]
}

Finally, FieldDropdowns are hidden for flyouts to match FieldInput's behavior (since fields are ignored as part of the block label in those cases and polluting the accessibility node tree can confuse screen readers).

Updating the usage of dropdown fields in the built-in blockly blocks will be done in a separate follow up issue

Alternatives considered

No response

Additional context

No response