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.

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

Improving accessibility on Post Title #916

Merged
merged 5 commits into from
Apr 23, 2019

Conversation

pinarol
Copy link
Contributor

@pinarol pinarol commented Apr 22, 2019

Fixes #912

Changes reside in gutenberg PR: WordPress/gutenberg#15106

This PR improves accessibility (screen reader) for the Post Title. In particular when it's not focused.

Empty title:

Label: "Post title. Empty"

Title with a text:

Label: "Post title. [the text]"

When caret is blinking on Post Title the accessibility behavior is handed over to the OS and the system decides how to handle the accessibility for the text input field.

To test (iOS):

Activate VoiceOver: https://github.com/wordpress-mobile/WordPress-iOS/wiki/Using-VoiceOver

To test (Android):

Activate TalkBack: https://www.wikihow.com/Enable-TalkBack-on-Your-Android
In my case, the system had a handy tutorial on how to use it.
If your version doesn't have it, it's actually very similar to VoiceOver.

Test Steps
Tap on the title when it is empty
It should say: "Post title. Empty"

Double tap to enter some text and focus to another text input
Tap on the title again
It should say: "Post title. [entered text]"

A note on Android

On Android I could only be able to hear "Post title. Empty" when I tap the area out of the text input. It looks like childs continue to be accessible and I am not sure this is sth that can be resolved.

Copy link
Contributor

@etoledom etoledom left a comment

Choose a reason for hiding this comment

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

On iOS it works as expected! ✨

The Android side has two issues:

  1. The Screen Reader automatically focus the Text Field without reading the block's accessibility label. The focus action should happen only after double tapping on the element (PostTitle in this case).

  2. Having a Paragraph block selected, it doesn’t lose its selection when the Title Field get focus.
    This one will probably be fixed after fixing (1.)

After some investigation with @pinarol, we arrive to the conclusion that this issue is external to this PR and should be addressed separately: #918

So let's :shipit:
Great work @pinarol ! 🎉

@pinarol pinarol merged commit 6c39fd5 into develop Apr 23, 2019
@pinarol pinarol deleted the issue/912-post-title-accessiblity branch April 23, 2019 06:53
daniloercoli added a commit that referenced this pull request Apr 23, 2019
…rg-mobile into issue/887-History-stack-is-not-empty-on-a-fresh-start-of-the-editor

* 'develop' of https://github.com/wordpress-mobile/gutenberg-mobile:
  Improving accessibility on Post Title (#916)
  Point to GB master without the list block suppression
  Update JS bundles
  Update Gutenberg hash with lint error fixes
  Update JS bundles
  Suppress the List block on Android
  Updated JS bundles with title focus fix
  Update JS bundles for 1.3.0
  Update version to 1.3.0
  Update AztecEditor-iOS to 1.6.0
  Update gutenberg ref to latest master
  Update gutenberg ref
  Update gutenberg ref

# Conflicts:
#	gutenberg
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Improve Screen Reader support for Post Title.
2 participants