Commit Graph

34 Commits

Author SHA1 Message Date
Maribeth Moffatt
27fe764428 fix: improve screenreader output for workspace comments (#9351)
* fix: improve screenreader output for workspace comments

* fix: run npm run messages to fully add new message

* fix: remove useless bubble label

* fix: use roledescription instead of description
2025-09-18 14:27:41 -07:00
Maribeth Moffatt
41b7e9399e chore: merge develop into add-screen-reader
chore: merge develop into add-screen-reader
Merge pull request #9352 from google/develop
2025-09-09 09:37:54 -07:00
Aaron Dodson
405f7da280 fix: Fix positioning of pasted blocks and comments in RTL. (#9302)
* fix: Fix positioning of pasted blocks in RTL.

* fix: Clean up after temporarily making the workspace RTL.

* fix: Remove .only.

* fix: Fix positioning of pasted comments in RTL.

* fix: Fix positioning of text preview on collapsed comments in RTL.
2025-08-19 08:32:31 -07:00
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
Aaron Dodson
f9d0ec9d24 refactor: Associate comment bar buttons with the comment view. (#9278) 2025-08-06 14:04:12 -07:00
Aaron Dodson
e5804e7095 feat: Add support for keyboard navigation in/to workspace comments. (#9182)
* feat: Enhance the Rect API.

* feat: Add support for sorting IBoundedElements in general.

* fix: Improve typings of getTopElement/Comment methods.

* feat: Add classes to represent comment icons.

* refactor: Use comment icons in comment view.

* feat: Update navigation policies to support workspace comments.

* feat: Make the navigator and workspace handle workspace comments.

* feat: Visit workspace comments when navigating with the up/down arrows.

* chore: Make the linter happy.

* chore: Rename comment icons to bar buttons.

* refactor: Rename CommentIcons to CommentBarButtons.

* chore: Improve docstrings.

* chore: Clarify unit type.

* refactor: Remove workspace argument from `navigateStacks()`.

* fix: Fix errant find and replace in CSS.

* fix: Fix issue that could cause delete button to become misaligned.
2025-07-01 15:13:13 -07:00
Maribeth Moffatt
eaf5eea98e feat: make comment editor separately focusable from comment itself (#9154)
* feat: make comment editor separately focusable from comment itself

* feat: improve design and add styling

* chore: fix lint

* fix: add event listeners to focus parent comment

* fix: export CommentEditor

* fix: export CommentEditor

* fix: extract comment identifier to constant
2025-06-24 12:40:23 -07:00
Aaron Dodson
22dbd75bd4 refactor: make CommentView more amenable to subclassing. (#8783) 2025-02-24 08:17:38 -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
Richard Knoll
6a674002cc fix: clear touch identifier on comment icon down (#8627) 2024-10-28 13:05:31 -07:00
Aaron Dodson
aeb1a80672 feat: Allow specifying the default size of comments. (#8618) 2024-10-14 08:20:34 -07:00
Aaron Dodson
2dfd8c30ad feat: Allow specifying the placeholder text of workspace comments. (#8608) 2024-10-02 10:32:44 -07:00
John Nesky
561b4189fb fix: Factor out workspace drag methods into utils. (#8566) 2024-09-13 12:53:37 -07:00
John Nesky
17e4f1c966 Fix: let workspace comment have delete cursor over trash. (#8477) 2024-08-15 11:41:22 -07: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
Chang Min Bark
4cdca28fe5 fix: added id to rendered ws comments; made getCommentById public; added blocklyDraggable class to ws comments (#8358) 2024-07-15 18:39:39 -07:00
Aaron Dodson
21a73c463f fix: correctly report the pre-resize-drag size to workspace comment size change listeners (#8240)
* fix: correctly report the pre-resize-drag size to workspace comment size change listeners

* chore: run formatter

* refactor: implicitly use the presence of preResizeSize to identify a drag.
2024-07-02 14:42:47 -07:00
John Nesky
9a0619aa2a fix: Drag and Resize events for workspace comments (#8217)
* feat: Added a comment_drag event.

* Add workspace comment resize events.

* Addressing PR feedback.

* Fixed chai imports in new test files.

* Addressing more PR feedback.
2024-06-26 12:16:56 -07:00
Neil Fraser
fcdb8fc33d fix: Normalize CSS between comment types (#8161)
Merge the CSS so that both comment types (block and workspace) are the same -- other than a border.
2024-05-20 18:59:24 +02:00
Neil Fraser
70ca676c24 fix: Properly size comments. (#8158)
* Properly size comments.

Fixes multiple rendering and sizing issues across different browsers.

Tip: `text-overflow: hidden;` is not legal CSS and did nothing.

Resolves #8142
2024-05-20 09:30:38 -07:00
Beka Westberg
36b75696a2 fix: comment text area bottom border hidden (#8152) 2024-05-20 09:03:59 -07:00
Beka Westberg
69db8a63d6 fix: comment size not respecting collapsed-ness (#8136)
* fix: comment size not respecting collapsed-ness

* chore: fix tests the only way I know how, by adding explicit clock ticks
2024-05-17 13:23:13 -07:00
Maribeth Moffatt
e4b734c0db fix: change cursor to grab on ws comment bar 2024-05-16 17:54:28 -07:00
Beka Westberg
93c4d75fbd fix: comment highlight being positioned incorrectly in RTL (#8044) 2024-04-19 11:33:25 -07:00
Beka Westberg
69c5557e4f chore: fix comments being resizable when readonly (#8043) 2024-04-19 11:15:56 -07:00
Beka Westberg
7246bbc0d1 fix: comment text input size in samples (#8042) 2024-04-19 08:37:35 -07:00
Beka Westberg
70f3f52911 fix: CSS for selected collapsed comments (#8039) 2024-04-17 09:48:43 -07:00
Beka Westberg
e1cbddd860 feat: visual comment selection (#7996)
* feat: add visually highlighting selected comment

* chore: TSDoc
2024-04-05 13:39:20 -07:00
Beka Westberg
3988e13fbc chore: fix comment colours disappearing when dragging (#7978) 2024-04-02 14:37:54 -07:00
Beka Westberg
3ea330b981 fix: comment view styling (#7965) 2024-03-27 11:19:00 -07:00
Beka Westberg
d01f9a73fe fix: comment position in RTL (#7934)
* fix: how comments are laid out in RTL

* fix: comment positioning with JSON

* fix: comment positioning with XML
2024-03-22 10:46:42 -07:00
Beka Westberg
5462b21b15 fix: comment have XML save and load new workspace comments classes (#7931)
* fix: have XML save and load new comment classes

* chore: fix imports to resolve circular dependencies

* chore: add round-trip tests

* chore: skip failing test

* fixup: PR comments
2024-03-20 16:25:41 -07:00
Beka Westberg
30127db35f fix: comment min size (#7915)
* feat: add min and max to size

* fix: properly calculate the minimum size of the comment

* fix: inline docs
2024-03-11 20:57:47 +00:00
Beka Westberg
fc4228ce03 feat: add comment view (for workspace comments, and block comments for partners) (#7914)
* feat: add basic comment view

* feat: add icons to comment

* chore: add text area to comment view

* feat: add getting size

* feat: add collapsing comment view

* feat: add setting editability

* feat: add location and text hooks.

* feat: add changing the size

* feat: resizing

* feat: add collapsing

* feat: add disposing

* feat: add cursors

* feat: add moving to the front

* chore: split construction into subprocedures

* chore: split resizing into subprocedures

* feat: handle RTL

* chore: add doc comments throughout file

* chore: reduce css specificity where possible

* chore: format

* feat: add remove change listener methods

* chore: add tests for listeners

* feat: add disposing accessors

* chore: add coordinate system notes

* chore: add issues to TODOs where possible

* chore: remove suite.only
2024-03-11 12:12:35 -07:00