Skip to content

Disabled component allows keyboard interaction on links #15799

@ryelle

Description

@ryelle

Describe the bug

In a custom block, I'm using the Disabled component around a ServerSideRendered list, much like the Latest Comments block, when I noticed you can tab to the links that are rendered. Since you can't mouse-click on the links, it seems like keyboard activation should also be prevented.

To reproduce
Steps to reproduce the behavior:

  1. Add a Latest Comments block
  2. You can't click on the rendered links
  3. Tab through the toolbar to the block contents
  4. You'll see your focus move from the links in the Latest Comments content
  5. If you hit enter, you leave the editor and go to that link

Expected behavior

Perhaps removing the href on links contained in Disabled would work? That seems to match with the spec for a:

If the a element has no href attribute, then the element represents a placeholder for where a link might otherwise have been placed
HTML Living Standard for a

A quick test of a with no href in Safari + VoiceOver seems to work okay, but might not be very clear– there's no indication that the item is anything other than text, it does not communicate that "placeholder link" status. Some accessibility team feedback would probably be good here.

Desktop (please complete the following information):

  • OS: Mac
  • Browser: Chrome & Safari
  • Gutenberg: master @ 514e612

Metadata

Metadata

Assignees

No one assigned

    Labels

    [Focus] Accessibility (a11y)Changes that impact accessibility and need corresponding review (e.g. markup changes).[Package] Components/packages/components[Type] EnhancementA suggestion for improvement.

    Type

    No type
    No fields configured for issues without a type.

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions