Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Add speak messages to the feature toggle component. #13385

Merged
merged 2 commits into from
Jan 24, 2019
Merged

Add speak messages to the feature toggle component. #13385

merged 2 commits into from
Jan 24, 2019

Conversation

afercia
Copy link
Contributor

@afercia afercia commented Jan 20, 2019 •
edited
Loading

This PR adds speak() messages to the FeatureToggle component.

screenshot 2019-01-20 at 15 55 37

When toggling one of these features, screen reader users have no clue what happened. The menu closes, focus is moved back to the menu toggle button, and there's no audible feedback.

While the messages could be added to the store effects using TOGGLE_FEATURE, I've opted to add them directly in the component for a few reasons:

  • I'd tend to think sending the messages should be responsibility of the component
  • it makes sense to pass the messages strings as props so they can be easily found in the codebase together with the passed label and they're not buried down in the effects; this will also help maintenance as the strings are all in the same place
  • implementation is similar to the one used for BlockInspectorButton see packages/edit-post/src/components/visual-editor/block-inspector-button.js

I've opted for a polite message instead of an assertive one because focus is moved back to the toggle button and the button needs to be announced. An assertive message would interrupt the screen reader preventing it from announcing where focus has been moved.

To test:

  • activate / deactivate the features
  • verify the polite ARIA live region in the DOM gets the correct messages

Fixes #13384

@afercia
Copy link
Contributor Author

afercia commented Jan 20, 2019

Note: locally, I get 2 tests failures:

  • babel-plugin › .getTranslatorComment() › should not return translator comment on same line but after call expression
  • Babel preset default › transpilation works properly

both seem related to:

    Expected mock function not to be called but it was called with:
    ["Browserslist: caniuse-lite is outdated ...

they happen also on master and seem completely unrelated to the changes in this PR.

@afercia afercia added the [Focus] Accessibility (a11y) Changes that impact accessibility and need corresponding review (e.g. markup changes). label Jan 20, 2019
@gziolo
Copy link
Member

gziolo commented Jan 21, 2019

Note: locally, I get 2 tests failures:

  • babel-plugin › .getTranslatorComment() › should not return translator comment on same line but after call expression
  • Babel preset default › transpilation works properly

both seem related to:

    Expected mock function not to be called but it was called with:
    ["Browserslist: caniuse-lite is outdated ...

they happen also on master and seem completely unrelated to the changes in this PR.

This is something related to npm, I will look into fixing it. I see it on other recently created PRs, too.

@gziolo gziolo mentioned this pull request Jan 21, 2019
Merged
@afercia afercia force-pushed the update/feature-toggle-speak-messages branch from 1960f94 to f6084bc Compare January 21, 2019 18:32
@afercia
Copy link
Contributor Author

afercia commented Jan 21, 2019

Rebased to incorporate the changes from #13395 and pass the tests.

gziolo
gziolo requested changes Jan 22, 2019
View reviewed changes
packages/edit-post/src/components/header/writing-menu/index.js Outdated
@@ -19,17 +19,32 @@ function WritingMenu( { onClose } ) {
feature="fixedToolbar"
label={ __( 'Top Toolbar' ) }
info={ __( 'Access all block and document tools in a single place' ) }
onToggle={ onClose } />
onToggle={ onClose }
messages={ {
Copy link
Member

Choose a reason for hiding this comment

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

My concern here is that we pass an object constructor as prop. This will force FeatureToggle to re-render whenever WritingMenu re-renders which isn't optimal. Can we pass two string props instead to avoid such case?

Copy link
Contributor Author

Choose a reason for hiding this comment

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

I guess we can. Just noting there are many, many, cases in the codebase where this pattern is used. If it's a real concern, then maybe it should be a guideline.

Copy link
Member

Choose a reason for hiding this comment

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

I think there is a post which @youknowriad wants to write about performance and how to optimize towards it. I hope we can use it as a template for guidelines later.

@afercia
Copy link
Contributor Author

afercia commented Jan 23, 2019

@gziolo Done.

gziolo
gziolo approved these changes Jan 24, 2019
View reviewed changes
Copy link
Member

@gziolo gziolo left a comment

Choose a reason for hiding this comment

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

Changes look great. I tested it with VoiceOver enabled and it works properly.

@gziolo gziolo added this to the 5.0 (Gutenberg) milestone Jan 24, 2019
@gziolo gziolo merged commit c153cc4 into master Jan 24, 2019
@gziolo gziolo deleted the update/feature-toggle-speak-messages branch January 24, 2019 15:16
daniloercoli added a commit that referenced this pull request Jan 24, 2019
@daniloercoli
Merge branch 'master' of https://github.com/WordPress/gutenberg into …
b5e679b 
…rnmobile/372-add-title-to-gutenberg-mobile

* 'master' of https://github.com/WordPress/gutenberg: (56 commits)
  Save package-lock.json file changes (#13481)
  Plugin: Deprecate gutenberg_add_responsive_body_class (#13461)
  Add speak messages to the feature toggle component. (#13385)
  Plugin: Deprecate gutenberg_kses_allowedtags (#13460)
  Plugin: Deprecate gutenberg_bulk_post_updated_messages (#13472)
  Plugin: Avoid calling deprecated gutenberg_silence_rest_errors (#13446)
  Plugin: Deprecate gutenberg_remove_wpcom_markdown_support (#13473)
  Fix: Categories block: add custom classes only to wrapper (#13439)
  is-shallow-equal: Use ES5 ruleset from eslint-plugin module (#13428)
  Update and Organize Contributors Guide per #12916 (#13352)
  Dismissible-notices: fix text overlapping icon (X) (#13371)
  Framework: Remove 5.0-merged REST API integrations (#13408)
  Plugin: Remove 5.0-merged block registration functions, integrations (#13412)
  Framework: Bump minimum required WP to 5.x (#13370)
  [Mobile] Improve keyboard hide button (#13415)
  Improve castError handling of non strings (#13315)
  Fix: File block add custom class (#13432)
  Consider making Fullscreen Mode effects visible only on larger screens (#13425)
  Update plugin version to 4.9.0 (#13436)
  DateTimePicker: fix prop warning for (#12933)
  ...
This was referenced Feb 4, 2019
Merged
Closed
Merged
youknowriad pushed a commit that referenced this pull request Mar 6, 2019
@afercia @youknowriad
Add speak messages to the feature toggle component. (#13385)
e0a514d 
* Add speak messages to the feature toggle component.

* Use plain props.
youknowriad pushed a commit that referenced this pull request Mar 6, 2019
@afercia @youknowriad
Add speak messages to the feature toggle component. (#13385)
147d7f7 
* Add speak messages to the feature toggle component.

* Use plain props.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@gziolo gziolo gziolo approved these changes

Assignees
No one assigned
Labels
[Focus] Accessibility (a11y) Changes that impact accessibility and need corresponding review (e.g. markup changes).
Projects
None yet
Milestone
5.0 (Gutenberg)
Development

Successfully merging this pull request may close these issues.

Add speak messages to the editor feature toggles
2 participants
@afercia @gziolo