Skip link: "Skip to the selected block" not highly visible

[anevins12]

Is your feature request related to a problem? Please describe.
When producing the skip link labelled as "Skip to the selected block" (when navigating a WYSIWYG editor control), the position of the skip link is not highly obvious and may be difficult to identify by people using zoom magnifiers. People seeing content in a magnified view don't always notice things that appear in their peripheral vision and may miss this skip link on desktop when the browser does not move viewport.

Describe the solution you'd like
As the skip link only appears on focus, its position does not have to disrupt the visual flow for other users and this should give more freedom to move the link closer to the WYSIWYG trigger.
The position should be near the control that triggers it, not just semantically but also visually.

Describe alternatives you've considered
I haven't tried alternative close-by positions as I think that would be a UX question, however I do think the position of the skip link should relate to its DOM/ keyboard focus order. For instance, if it is accessed when focusing backwards from WYSIWYG control then it should be visually positioned before that item and vice versa.

[karmatosed]

I'm going to loop in @afercia here but I think that position is required to be where it is, making sure to fact check there by the cc though.

[afercia]

The position should be near the control that triggers it, not just semantically but also visually.

Hm, well this component is re-usable so it can be used also in other places. However, my thinking was to make users able to jump back from the sidebar to the selected block. Keyboard users and screen reader users already have tools to jump from the edited block to the sidebar. They needed a way to jump back to the edited block.

Say you want to change color of a paragraph, or enable Drop cap. From the block, you can use the Ctrl + backtick shortcut (see #3218 ) or if using a screen reader you can use ARIA landmarks to jump to the sidebar, change settings and then... how to move back to the edited block?

The only way was to navigate through the whole UI. This "Skip back" tool now empowers users to jump back directly to the edited block.

As mentioned in #5856 I'm unsure the positioning at the right bottom corner though. Proximity of controls matters and ideally it should appear right after the last control in the sidebar. Any improvements welcome.

With regards to the block formatting toolbar pressing Escape already moves focus back to the block editable area. This is how it always worked, also in the current Classic editor. So the "Skip to selected block" button hasn't been designed for this scenario. Instead, it's designed to improve jumping through the main page sections. @anevins12 does this address your concerns or maybe I'm missing something?

[anevins12]

Hi @afercia that's really nice how there's care to get the use to and from the shortcut and it's true that screenreaders have alternative methods to navigate the page.

I'm just thinking of the use case of people who are using a physical magnifier, a zoom tool from their operating system, or just people who are not using tools but may have visual impairments that limit them from seeing a wide point of view (for desktop users).

In their cases, they may not be aware that anything has happened when the skip link is produced and navigated to - as on Desktop, and if the button is in view, the browser doesn't necessarily move the viewport to that section.

[afercia]

Hi @anevins12. Yeah, that's what I meant when I've mentioned proximity of controls, we're on the same line :)

So, say I'm in the sidebar and I've just changed a paragraph font size. Then I keep tabbing and after "Advanced" I get the skip back:

How we could improve its position?

[anevins12]

@afercia Ah I see. I think this is a good example of its position. I think the only problem I have is when you're interacting with things in the main section of content.

I'm sorry for not making this clear, but in the screenshot in the original post, I was interacting with a WYSIWG control and navigating the "Transform into" popup. Navigating this popup would trigger that "Skip to the selected block" link and it's the position of this that is far away from the WYSIWYG popup.

I'm starting to think that I'm just not reading your responses properly. If what I'm saying doesn't make sense or I'm not reading properly then I'll look at this in greater detail later on.

[anevins12]

We actually found out this was a bug produced by incorrect tab order and will be made redundant when resolving #6987.