ckeditor4 icon indicating copy to clipboard operation
ckeditor4 copied to clipboard
verified publisher icon ckeditor

Screen readers in browse mode can navigate outside of dropdowns to random elements

Open f1ames opened this issue 6 years ago • 0 comments

Type of report

Bug

Provide detailed reproduction steps (if any)

  1. Go to https://ckeditor.com/ckeditor-4/demo/#document.
  2. Enable screen reader.
  3. Focus or Tab to editor content.
  4. Press Alt + F10 to navigate to editor toolbar.
  5. Press Tab until the font toolbar group is focused.
  6. Press Down or Right arrow to reach Size dropdown.
  7. Press Enter to open dropdown. Focus moves to the first option in the dropdown.
  8. Ensure screen reader is in browse mode.
  9. Press Up arrow repeatedly to navigate contents.

Expected result

Screen reader does not navigate out of dropdown. Or, it navigates to the button that triggered the dropdown.

Actual result

Screen reader navigates to bottom of DOM.

Other details

Screen readers in browse-mode allow users to navigate the DOM without restrictions. And the dropdown element is placed on the end of DOM tree which makes screen reader to navigate to other elements than dropdown button.

Possible solutions

  1. Add aria-modal to the dropdown container. This may not work for all screen readers because the spec says Assistive technologies MAY limit navigation to the modal element's contents. (https://www.w3.org/TR/wai-aria-1.1/#aria-modal)
  2. When the dropdown is opened, add aria-hidden to all children of <body>, except the dropdown.
  3. Insert the dropdown as a sibling or an immediate child of the button that opens it. This way, even if screen reader users navigate outside the dropdown, they will land on adjacent DOM elements and not some far away place.
  • Browser: All
  • OS: All
  • CKEditor version: 4.5.0+
  • Installed CKEditor plugins: font, stylescombo

f1ames avatar Sep 30 '19 07:09 f1ames