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.

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

Add speak messages to the feature toggle component. #13385

Merged
merged 2 commits into from Jan 24, 2019

Conversation

Projects
None yet
2 participants
@afercia
Copy link
Contributor

afercia commented Jan 20, 2019

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

This comment has been minimized.

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.

@gziolo

This comment has been minimized.

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.

@afercia afercia force-pushed the update/feature-toggle-speak-messages branch from 1960f94 to f6084bc Jan 21, 2019

@afercia

This comment has been minimized.

Copy link
Contributor Author

afercia commented Jan 21, 2019

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

@@ -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={ {

This comment has been minimized.

@gziolo

gziolo Jan 22, 2019

Member

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?

This comment has been minimized.

@afercia

afercia Jan 23, 2019

Author Contributor

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.

This comment has been minimized.

@gziolo

gziolo Jan 24, 2019

Member

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

This comment has been minimized.

Copy link
Contributor Author

afercia commented Jan 23, 2019

@gziolo Done.

@gziolo

gziolo approved these changes Jan 24, 2019

Copy link
Member

gziolo left a comment

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

1 check passed

continuous-integration/travis-ci/pr The Travis CI build passed
Details

@gziolo gziolo deleted the update/feature-toggle-speak-messages branch Jan 24, 2019

daniloercoli added a commit that referenced this pull request Jan 24, 2019

Merge branch 'master' of https://github.com/WordPress/gutenberg into …
…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)
  ...
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment