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

Link boundaries don't work with Safari 11.0.1 when using VoiceOver #3373

Closed
afercia opened this issue Nov 7, 2017 · 5 comments
Closed

Link boundaries don't work with Safari 11.0.1 when using VoiceOver #3373

afercia opened this issue Nov 7, 2017 · 5 comments
Labels
Browser Issues Issues or PRs that are related to browser specific problems [Feature] Rich Text Related to the Rich Text component that allows developers to render a contenteditable [Focus] Accessibility (a11y) Changes that impact accessibility and need corresponding review (e.g. markup changes). [Type] Bug An existing feature does not function as intended

Comments

@afercia
Copy link
Contributor

afercia commented Nov 7, 2017

Noticed while testing #3343

On Safari 11.0.1 and only when using VoiceOver, the boundaries don't work at all for me: no highlighting is displayed on both user names and links. No "link modal" appears.

They work on Safari Technology Preview – Release 43 (Safari 11.1, WebKit 12605.1.12).

I understand this is an edge case and tricky to investigate. However, boundaries works nicely in the Classic Editor so I'm wondering if there's any obvious, easy to spot difference (events or something) in the Gutenberg implementation that prevents them to work correctly.

Screenshots:

screen shot 2017-11-07 at 16 30 42

screen shot 2017-11-07 at 16 30 54

screen shot 2017-11-07 at 16 31 33

@BoardJames
Copy link

It still seems to work for me though you have to click twice because the first click moves the box and the second click moves the cursor.

@afercia
Copy link
Contributor Author

afercia commented Nov 8, 2017

Oh yes clicking on it works (at the second click). But moving the caret from surrounding text within a link doesn't.

@afercia
Copy link
Contributor Author

afercia commented Nov 8, 2017

Just noticed one more thing not working well when using Safari 11 + VoiceOver that maybe can help understand what's going on. To reproduce:

Move the caret at the end of a paragraph that ends with a link:

screen shot 2017-11-08 at 09 19 41

Press Cmd + A:

  • expected: the paragraph content should be selected
  • actual: all the blocks get selected

screen shot 2017-11-08 at 09 20 03

Even in this case, can't reproduce with Safari Technology Preview.

@mtias mtias added [Focus] Accessibility (a11y) Changes that impact accessibility and need corresponding review (e.g. markup changes). [Component] TinyMCE [Feature] Rich Text Related to the Rich Text component that allows developers to render a contenteditable Browser Issues Issues or PRs that are related to browser specific problems labels Jan 18, 2018
@jeffpaul jeffpaul added the [Type] Bug An existing feature does not function as intended label Jan 19, 2018
@karmatosed karmatosed added this to the Merge Proposal milestone Jan 25, 2018
@jeffpaul
Copy link
Member

This ticket was mentioned in Slack in #core-editor by jeffpaul. View the logs.

@karmatosed karmatosed modified the milestones: Merge Proposal, Merge Proposal: Accessibility Apr 12, 2018
@afercia
Copy link
Contributor Author

afercia commented May 9, 2018

A few things have changed:

  • user mentions don't use links any longer since Insert @username for user mention autocomplete #4444
  • more importantly, current Safari stable is 11.1 (which was Safari Technology Preview at the time this issue was created) so now boundaries work when using VoiceOver

I've tested also the boundaries used on bold and italic text, they work correctly.
Closing.

@afercia afercia closed this as completed May 9, 2018
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Browser Issues Issues or PRs that are related to browser specific problems [Feature] Rich Text Related to the Rich Text component that allows developers to render a contenteditable [Focus] Accessibility (a11y) Changes that impact accessibility and need corresponding review (e.g. markup changes). [Type] Bug An existing feature does not function as intended
Projects
None yet
Development

No branches or pull requests

5 participants