Skip to content

feat: ARIA for other field classes#9772

Merged
mikeharv merged 2 commits intoRaspberryPiFoundation:v13from
mikeharv:remaining-field-aria
Apr 29, 2026
Merged

feat: ARIA for other field classes#9772
mikeharv merged 2 commits intoRaspberryPiFoundation:v13from
mikeharv:remaining-field-aria

Conversation

@mikeharv
Copy link
Copy Markdown
Contributor

The basics

The details

Resolves

Fixes #9659 and #9658

Proposed Changes

This PR add the ARIA implementation of FieldCheckbox, FieldImage, FieldLabel, and FieldVariable. It also makes some minor adjustments to FieldNumber and other more general changes to how ARIA methods are used.

General updates

  • computeAriaLabel was updated to includeTypeInfo = true by default. Currently, we only exclude type info for move mode announcements, which makes it the clear exception rather than the rule.
  • As a result of the above change, type info is now intentionally included in the labels for a field's focusable element.
  • Changed implementations of recomputeAriaContext() from private to protected. We expect develops may need to extend this method in their custom field subclasses.
  • Added several new translatable strings for describing field ARIA type names and field values.

FieldVariable

  • Use a qualified version of the variable as the field's ARIA value, e.g. 'Variable "i"'
  • Update the renaming option to include the variable name, e.g. 'Rename the "i" variable'

FieldCheckbox

  • Sets the field's focusable element to have the role checkbox.
  • Set its aria-checked state based on whether it's been checked.
  • Sets aria-hidden if in the flyout.
  • Returns an ARIA value of 'checked' or 'not checked' for use with block ARIA labels.
  • Sets the field's label to its provided ARIA type name or 'Checkbox'. (The field label does not include 'checked' or 'unchecked' because this is already provided by the aria-checked state.)
  • Recomputes its ARIA state when its checked state changes.

FieldImage

  • Provides its image's alt text as its ARIA value by default
  • Sets its role to either button or presentation, depending on whether it has a click handler. (Only clickable image fields are navigable.)
  • Sets its label to include its type name (or "image") and alt text.
  • Recomputes its ARIA state when its value changes.

FieldLabel

  • Set itself to always be aria-hidden since it should not be navigable.

FieldNumber

  • Removed its custom aria-valuemin and aria-valuemax logic as it likely never worked. (These properties are for range widgets like sliders.)

Reason for Changes

This change continues the baseline pattern (#9683, #9744, #9766 ) so that fields have meaningful default accessibility behavior without requiring every implementation to solve the same problems independently. It ensures that ARIA labeling stays in sync with field state and that fields communicate their interactivity in a predictable way.

At the same time, this approach intentionally leaves room for customization, allowing specific field types to provide more tailored or context-aware accessibility behavior where needed.

Test Coverage

Added/updated unit tests for ARIA behavior on checkbox, dropdown, image, label, number, textinput, and variable fields.

Tests cover:

  • Role assignment
  • Visibility handling
  • Default and updated ARIA labels
  • Label updates when field values change
  • Type name included in the ARIA label

Notes:

  • Dropdown field ARIA label checks were relaxed from equal to include because the label now also includes the ARIA type name.
  • FieldVariable benefits from the ARIA logic in FieldDropdown, so those tests were written to reinforce that alignment.
  • An existing test was updated to confirm that variable rename/delete option labels include the variable name.

Documentation

Additional Information

@mikeharv mikeharv requested a review from a team as a code owner April 29, 2026 13:37
@mikeharv mikeharv requested a review from gonfunko April 29, 2026 13:37
@github-actions github-actions Bot added the PR: feature Adds a feature label Apr 29, 2026
/** @type {string} */
/// dropdown choice - When the user clicks on a variable block, this is one of the dropdown menu choices. It is used to rename the current variable. See [https://github.com/RaspberryPiFoundation/blockly/wiki/Variables#dropdown-menu https://github.com/RaspberryPiFoundation/blockly/wiki/Variables#dropdown-menu].
Blockly.Msg.RENAME_VARIABLE = 'Rename variable...';
Blockly.Msg.RENAME_VARIABLE = 'Rename the "%1" variable';
Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think it would be safer to add this as a new string since it adds a placeholder where there was none - I'm not sure if interpolating throws or otherwise has issues if a placeholder is/isn't present as expected, but might be best to err on the side of caution?

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Interpolation is done via .replace() which doesn't throw if there's a problem. We discussed this and agreed to leave it as a replacement for an existing string.

Comment thread packages/blockly/core/utils/aria.ts Outdated
Comment thread packages/blockly/core/utils/aria.ts
Comment thread packages/blockly/core/field_label.ts Outdated
Comment on lines +136 to +139
const element = this.getFocusableElement();
if (!element) return;

aria.setState(element, aria.State.HIDDEN, true);
Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Can this just go in createTextElement_?

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Moved to initView() as this class wasn't already extending createTextElement_.

@mikeharv mikeharv merged commit 86fa331 into RaspberryPiFoundation:v13 Apr 29, 2026
4 checks passed
@mikeharv mikeharv deleted the remaining-field-aria branch April 29, 2026 16:18
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

PR: feature Adds a feature

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants