Commit Graph

16 Commits

Author SHA1 Message Date
Ben Henning
d0ad9343f0 feat: Add initial support for screen readers (experimental) (#9280)
## The basics

- [x] I [validated my changes](https://developers.google.com/blockly/guides/contribute/core#making_and_verifying_a_change)

## The details
### Resolves

Fixes part of #8207
Fixes part of #3370

### Proposed Changes

This introduces initial broad ARIA integration in order to enable at least basic screen reader support when using keyboard navigation.

Largely this involves introducing ARIA roles and labels in a bunch of places, sometimes done in a way to override normal built-in behaviors of the accessibility node tree in order to get a richer first-class output for Blockly (such as for blocks and workspaces).

### Reason for Changes

ARIA is the fundamental basis for configuring how focusable nodes in Blockly are represented to the user when using a screen reader. As such, all focusable nodes requires labels and roles in order to correctly communicate their contexts.

The specific approach taken in this PR is to simply add labels and roles to all nodes where obvious with some extra work done for `WorkspaceSvg` and `BlockSvg` in order to represent blocks as a tree (since that seems to be the best fitting ARIA role per those available: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Reference/Roles). The custom work specifically for blocks includes:
- Overriding the role description to be 'block' rather than 'tree item' (which is the default).
- Overriding the position, level, and number of sibling counts since those are normally determined based on the DOM tree and blocks are not laid out in the tree the same way they are visually or logically (so these computations were incorrect). This is also the reason for a bunch of extra computation logic being introduced.

One note on some of the labels being nonsensical (e.g. 'DoNotOverride?'): this was done intentionally to try and ensure _all_ focusable nodes (that can be focused) have labels, even when the specifics of what that label should be aren't yet clear. More components had these temporary labels until testing revealed how exactly they would behave from a screen reader perspective (at which point their roles and labels were updated as needed). The temporary labels act as an indicator when navigating through the UI, and some of the nodes can't easily be reached (for reasons) and thus may never actually need a label. More work is needed in understanding both what components need labels and what those labels should be, but that will be done beyond this PR.

### Test Coverage

No tests are added to this as it's experimental and not a final implementation.

The keyboard navigation tests are failing due to a visibility expansion of `connectionCandidate` in `BlockDragStrategy`. There's no way to avoid this breakage, unfortunately. Instead, this PR will be merged and then https://github.com/google/blockly-keyboard-experimentation/pull/684 will be finalized and merged to fix it. There's some additional work that will happen both in that branch and in a later PR in core Blockly to integrate the two experimentation branches as part of #9283 so that CI passes correctly for both branches.

### Documentation

No documentation is needed at this time.

### Additional Information

This work is experimental and is meant to serve two purposes:
- Provide a foundation for testing and iterating the core screen reader experience in Blockly.
- Provide a reference point for designing a long-term solution that accounts for all requirements collected during user testing.

This code should never be merged into `develop` as it stands. Instead, it will be redesigned with maintainability, testing, and correctness in mind at a future date (see https://github.com/google/blockly-keyboard-experimentation/discussions/673).
2025-08-06 15:28:45 -07:00
Ben Henning
4074cee31b feat!: Make everything ISelectable focusable (#9004)
* feat!: Make bubbles, comments, and icons focusable

* feat!: Make ISelectable and ICopyable focusable.

* feat: Consolidate selection calls.

Now everything is based on focus with selection only being used as a
proxy.

* feat: Invert responsibility for setSelected().

Now setSelected() is only for quasi-external use.

* feat: Push up shadow check to getters.

Needed new common-level helper.

* chore: Lint fixes.

* feat!: Allow IFocusableNode to disable focus.

* chore: post-merge lint fixes

* fix: Fix tests + text bubble focusing.

This fixed then regressed a circular dependency causing the node and
advanced compilation steps to fail. This investigation is ongoing.

* fix: Clean up & fix imports.

This ensures the node and advanced compilation test steps now pass.

* fix: Lint fixes + revert commented out logic.

* chore: Remove unnecessary cast.

Addresses reviewer comment.

* fix: Some issues and a bunch of clean-ups.

This addresses a bunch of review comments, and fixes selecting workspace
comments.

* chore: Lint fix.

* fix: Remove unnecessary shadow consideration.

* chore: Revert import.

* chore: Some doc updates & added a warn statement.
2025-05-09 08:16:14 -07:00
Aaron Dodson
bcdb65c623 release: Merge branch 'develop' into rc/v12.0.0 2025-01-10 10:53:09 -08:00
Aaron Dodson
a42c2d1508 feat: Add a BlockSvg.getStyle() method. (#8722)
* feat: Add a BlockSvg.getStyle() method.

* refactor: Remove direct field access to BlockSvg.style.
2025-01-07 14:44:48 -08:00
Aaron Dodson
9fcd5a3037 release: Merge branch 'rc/v11.2.0' into rc/v12.0.0 2024-12-04 12:06:12 -08:00
Christopher Allen
7ccdcc5cef refactor(events): introduce EventType enum in separate module (#8530)
* refactor(events): Use "export ... from" where applicable

* refactor(events): Introduce EventType enum

  Introduce an enum for the event .type values.  We can't actually
  use it as the type of the .type property on Abstract events,
  because we want to allow developers to add their own custom
  event types inheriting from this type, but at least this way we
  can be reasonably sure that all of our own event subclasses have
  distinct .type values—plus consistent use of enum syntax
  (EventType.TYPE_NAME) is probably good for readability overall.

  Put it in a separate module from the rest of events/utils.ts
  because it would be helpful if event utils could use

      event instanceof SomeEventType

  for type narrowing but but at the moment most events are in
  modules that depend on events/utils.ts for their .type
  constant, and although circular ESM dependencies should work
  in principle there are various restrictions and this
  particular circularity causes issues at the moment.

  A few of the event classes also depend on utils.ts for fire()
  or other functions, which will be harder to deal with, but at
  least this commit is win in terms of reducing the complexity
  of our dependencies, making most of the Abstract event subclass
  module dependent on type.ts, which has no imports, rather than
  on utils.ts which has multiple imports.
2024-08-20 08:36:33 +01:00
Christopher Allen
ce22f42868 chore: Organise imports (#8527)
* chore(deps): Add pretter-plugin-organize-imports

* chore: Remove insignificant blank lines in import sections

  Since prettier-plugin-organize-imports sorts imports within
  sections separated by blank lines, but preserves the section
  divisions, remove any blank lines that are not dividing imports
  into meaningful sections.

  Do not remove blank lines separating side-effect-only imports
  from main imports.

* chore: Remove unneded eslint-disable directives

* chore: Organise imports
2024-08-15 03:16:14 +01:00
Gabriel Fleury
9ba791c144 bug: Rename the blockly icon CSS classes to use camelCase (#8329) (#8335) 2024-07-12 09:34:42 -07:00
Beka Westberg
b1ef6ae601 feat!: modify icons to use the rendering queue (#7743) 2024-01-23 08:48:08 -08:00
Maribeth Bottorff
a3053955d3 feat: make fields and icons optionally clickable in flyouts (#7672)
* feat: add ability to click fields in flyouts

* feat: control if icons are clickable in flyouts

* fix: make default icons not clickable in flyout

* fix: use booleans like a real programmer
2023-12-06 19:02:45 +00:00
Siddheya Kulkarni
1b498681dd feat: add css classes to icons (#7626)
* Update comment_icon.ts

* Update mutator_icon.ts

* Update warning_icon.ts

* Update comment_icon.ts

* Update mutator_icon.ts

* Update warning_icon.ts

* Update core/icons/comment_icon.ts

Co-authored-by: Beka Westberg <bwestberg@google.com>

* Update mutator_icon.ts

* Update warning_icon.ts

---------

Co-authored-by: Beka Westberg <bwestberg@google.com>
2023-11-02 08:25:24 -07:00
Christopher Allen
b0a7c004a9 refactor(build): Delete Closure Library (#7415)
* fix(build): Restore erroneously-deleted filter function

  This was deleted in PR #7406 as it was mainly being used to
  filter core/ vs. test/mocha/ deps into separate deps files -
  but it turns out also to be used for filtering error
  messages too.  Oops.

* refactor(tests): Migrate advanced compilation test to ES Modules

* refactor(build): Migrate main.js to TypeScript

  This turns out to be pretty straight forward, even if it would
  cause crashing if one actually tried to import this module
  instead of just feeding it to Closure Compiler.

* chore(build): Remove goog.declareModuleId calls

  Replace goog.declareModuleId calls with a comment recording the
  former module ID for posterity (or at least until we decide
  how to reformat the renamings file.

* chore(tests): Delete closure/goog/*

  For the moment we still need something to serve as base.js for
  the benefit of closure-make-deps, so we keep a vestigial
  base.js around, containing only the @provideGoog declaration.

* refactor(build): Remove vestigial base.js

  By changing slightly the command line arguments to
  closure-make-deps and closure-calculate-chunks the need to have
  any base.js is eliminated.

* chore: Typo fix for PR #7415
2023-08-31 00:24:47 +01:00
dependabot[bot]
2546b01d70 chore(deps): Bump prettier from 2.8.8 to 3.0.0 (#7322)
* chore(deps): Bump prettier from 2.8.8 to 3.0.0

Bumps [prettier](https://github.com/prettier/prettier) from 2.8.8 to 3.0.0.
- [Release notes](https://github.com/prettier/prettier/releases)
- [Changelog](https://github.com/prettier/prettier/blob/main/CHANGELOG.md)
- [Commits](https://github.com/prettier/prettier/compare/2.8.8...3.0.0)

---
updated-dependencies:
- dependency-name: prettier
  dependency-type: direct:development
  update-type: version-update:semver-major
...

Signed-off-by: dependabot[bot] <support@github.com>

* chore: Reformat using Prettier v3.0 defaults

The main change is to add trailing commas to the last line of
block-formatted function calls.

---------

Signed-off-by: dependabot[bot] <support@github.com>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
Co-authored-by: Christopher Allen <cpcallen+git@google.com>
2023-07-25 14:56:10 +00:00
Beka Westberg
91e8105e81 chore: add top-level inline docs to bubbles icons and inputs (#7190)
* chore: add top-level inline docs to bubbles icons and inputs

* chore: fixup for PR comments
2023-06-21 10:14:25 -07:00
Beka Westberg
0cfd388a5d feat: add types for accessing icons. (#7132)
* feat: add types for accessing icons.

* chore: PR comments
2023-06-13 14:39:36 -07:00
Beka Westberg
f4e378d096 fix!: refactor warning icon (#7112)
* feat: add basic warning icon

* feat: work on actually using the warning icon

* chore: add docs

* chore: delete old warning icon

* chore: fix build

* chore: my own comments

* chore: move Warning to icons.WarningIcon

* chore: move properties to the module level

* chore: properly override and call super

* chore: properly use optional chaining

* chore: fixup comment typo

* chore: change imports to import type

* chore: reduces changes in block js files

* chore: add renaming
2023-06-02 09:34:34 -07:00