Add audible messages to confirm the "move block" actions #24894

enricobattocchi · 2020-08-28T13:50:30Z

Description

Added audible messages to aria-live="assertive" region to confirm the "move" action to the screen reader users.
The messages check for orientation and RTL to make sure they are consistent with the label of the button used to perform the action.

This PR has been created during the Yoast Contributor Day.
The people who worked on it are @jcomack, @afercia, @enricobattocchi.

How has this been tested?

edit a (new) post with a screen reader active
add a number of blocks, plus a button list (which has a horizontal orientation)
move the blocks using the buttons or the keyboard shortcuts and check that the actions are confirmed by the audible messages. Notice that button can be moved left or right and the messages change accordingly.
Try also to select multiple blocks and move them together to hear a message telling the correct number of blocks moved.
Switch to a RTL environment and see that the "move up" action becomes "move right" for the buttons, and the audible messages are correct.
You can also the content of the <div id="a11y-speak-assertive"> to read the messages without a screen reader active.

Types of changes

New feature (non-breaking change which adds functionality)

Checklist:

My code is tested.
My code follows the WordPress code style.
My code follows the accessibility standards.
My code has proper inline documentation.
I've included developer documentation if appropriate.
I've updated all React Native files affected by any refactorings/renamings in this PR.

…left and right

afercia · 2020-08-29T14:37:09Z

To fully test, worth reminding the keyboard shortcuts to move blocks are (on macOS):

Shift Control Option Y: move down (or right for LTR)
Shift Control Option T: move up (or left for LTR)

Moving left or right can be tested on the "Buttons" or "Social icons" blocks:

Screenshot illustrating moving three social icons buttons when using Safari and VoiceOver:

mtias · 2020-08-29T15:50:06Z

packages/block-editor/src/store/effects.js

+
+		announceBlockMoved( state, direction );
+	},
+	MOVE_BLOCKS_UP: ( action, { getState } ) => {


It's odd to read an action type of "UP" while orientation changes it to right / left within. It'd be better to have a single "MOVE_BLOCKS" type and handle all cardinals within. (Alternatively, there could be four action types.)

This just uses the existing actions. Actually, there are no specific actions for "left" and "right". Not opposed to improvements but the current actions implementation is out of the scope of this issue.

mtias · 2020-08-29T15:53:09Z

packages/block-editor/src/store/effects.js

+		let direction = 'down';
+
+		if ( action.orientation === 'horizontal' ) {
+			direction = settings.isRTL ? 'left' : 'right';


Is this correct? Wouldn't the actual move actions still be accurate given left moves to the left regardless of RTL?

It is correct. "down" moves the block to the "following" position, whether it's vertical or horizontal. In LTR, the "following" horizontal position is right, while in RTL is left.

mtias · 2020-08-29T15:58:20Z

packages/block-editor/src/store/effects.js

+	const blockCount = getSelectedBlockCount( state );
+	let message;
+
+	switch ( direction ) {


It seems all these could be inlined and don't need the extra abstraction of announceBlockMoved

I'd disagree. Seems to me it's way more readable this way.

afercia · 2020-09-08T13:35:07Z

I tested again this PR, also on Windows Firefox + NVDA and in RTL. Everything works as expected. Code looks good as is, to me. Kindly asking to have a new review please, when there's a chance 🙂 /Cc @youknowriad @talldan

In RTL: last action was "move to right":

youknowriad · 2020-09-08T15:00:35Z

packages/block-editor/src/store/effects.js

@@ -219,6 +271,30 @@ export default {
 			)
 		);
 	},
+	MOVE_BLOCKS_DOWN: ( action, { getState } ) => {


Can we move away from effects and instead implement these action creator as "generators"? see moveBlocksToPosition as an example of action generator.

Not sure I follow. Maybe I lack context or it's a terminology thing 🙂 In this PR we just reused actions that already exist. Are you suggesting a major refactoring in the way these actions are created?

We're slowly moving away from using "effects" (see effects.js file and the https://github.com/aduth/refx middleware) and instead we're trying to replace them with "generator" actions (consistency with resolvers).

These are just two technologies that allow the same thing: writing complex actions with side effects.
So ideally, new code shouldn't add new effects and use generators instead.

Good to know. Is this documented anywhere? How new contributors are supposed to be informed about this? 🙂 If it's not documented, I'd say it's a barrier to new contributors...

You're right, it should be. We were hoping we could get rid of these files which remove the confusion but the refactor efforts staled.

afercia · 2024-11-22T15:14:22Z

i created a new issue at #67237 to recap the current situation.
@enricobattocchi although this PR can be used as source of inspiration, the codebase has changed significantly in the last 4 years. Do you think it can still be used and rebased or maybe better to start from scratch?

github-actions · 2024-11-22T15:15:23Z

The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the props-bot label.

Unlinked Accounts

The following contributors have not linked their GitHub and WordPress.org accounts: @jimmy@yoast.com.

Contributors, please read how to link your accounts to ensure your work is properly credited in WordPress releases.

If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message.

Unlinked contributors: jimmy@yoast.com.

Co-authored-by: mtias <matveb@git.wordpress.org>
Co-authored-by: afercia <afercia@git.wordpress.org>
Co-authored-by: youknowriad <youknowriad@git.wordpress.org>

To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook.

enricobattocchi · 2024-12-04T07:53:29Z

Thanks @afercia, I think it's better to start from scratch. I'll close this one.

Added functionality to support announcing of moving blocks up, down, …

8b4e68e

…left and right

enricobattocchi requested review from ellatrix and youknowriad as code owners August 28, 2020 13:50

ZebulanStanphill added the [Focus] Accessibility (a11y) Changes that impact accessibility and need corresponding review (e.g. markup changes). label Aug 28, 2020

mtias reviewed Aug 29, 2020

View reviewed changes

talldan added the First-time Contributor Pull request opened by a first-time contributor to Gutenberg repository label Sep 2, 2020

youknowriad reviewed Sep 8, 2020

View reviewed changes

afercia mentioned this pull request Sep 8, 2020

Movers: description text for horizontal movement is incorrect with multiple selection #25158

Closed

Base automatically changed from master to trunk March 1, 2021 15:43

afercia mentioned this pull request Oct 7, 2024

Speak 'Block moved up/down' after using keyboard actions to move up/down #64966

Merged

afercia mentioned this pull request Nov 22, 2024

Announce to screen readers when blocks are moved #67237

Open

6 tasks

enricobattocchi closed this Dec 4, 2024

enricobattocchi deleted the add/audible-messages-to-move-buttons branch December 4, 2024 07:53

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Add audible messages to confirm the "move block" actions #24894

Add audible messages to confirm the "move block" actions #24894

enricobattocchi commented Aug 28, 2020

afercia commented Aug 29, 2020

mtias Aug 29, 2020 •

edited

Loading

afercia Aug 29, 2020

mtias Aug 29, 2020

afercia Aug 29, 2020

mtias Aug 29, 2020

afercia Aug 29, 2020

afercia commented Sep 8, 2020

youknowriad Sep 8, 2020

afercia Sep 8, 2020

youknowriad Sep 8, 2020

afercia Sep 8, 2020

youknowriad Sep 9, 2020

afercia commented Nov 22, 2024

github-actions bot commented Nov 22, 2024

enricobattocchi commented Dec 4, 2024

Add audible messages to confirm the "move block" actions #24894

Add audible messages to confirm the "move block" actions #24894

Conversation

enricobattocchi commented Aug 28, 2020

Description

How has this been tested?

Types of changes

Checklist:

afercia commented Aug 29, 2020

mtias Aug 29, 2020 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

afercia commented Sep 8, 2020

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

afercia commented Nov 22, 2024

github-actions bot commented Nov 22, 2024

Unlinked Accounts

enricobattocchi commented Dec 4, 2024

mtias Aug 29, 2020 •

edited

Loading