Uploaded image for project: 'Confluence Data Center'
  1. Confluence Data Center
  2. CONFSERVER-79830

Create modal: Templates not able to receive screen reader focus

    XMLWordPrintable

Description

    Issue Summary

    The available templates in the modal are not able to receive screen reader focus.

    Steps to Reproduce

    1. Navigate to the Confluence homepage.
    2. Navigate to the "Create" button inside the header section & activate it.
    3. In the Create modal try to interact with the available template to create a page with a keyboard and screen reader.

    Screenshot

    Screen recording

    CONFSERVER-79830.mov

    Actual Results

    In the Create modal, the template list items receive keyboard focus and the focus is visible when navigated from top to bottom, but the focus is not visible when navigating from bottom to top. Additionally, when the screen reader tries to interact with the list, the list items are announced together to the screen reader user. This makes it for the assistive technology user difficult to make use of these interactive elements.
    Aditionally the list element is coded into an <ol> instead of <ul>.

    Expected Results 

    • The template items in the list should be able to receive keyboard focus and screen reader focus and should be interactive.
    • When the user tries to navigate with the arrow keys or Tab the focus should be visible on the focused element.
    • Remove the tabindex="100" from the <ol> element as the focus is received to the whole group, but not to the individual list element when the screen reader is on.
    • Provide tabindex="0" to the <li> element, so that the items receive the keyboard and screen reader focus on tab and shift+tab.
    • Ensure the list item is coded into an <ul> parent element.

    Workaround

    Currently, there is no known workaround for this behavior. A workaround will be added here when available

    Attachments

      1. CONFSERVER-79830.mov
        14.65 MB
      2. CONFSERVER-79830.png
        CONFSERVER-79830.png
        378 kB
      3. QA CONFSERVER-79830.mov
        27.89 MB

      Issue Links

        Activity

          People

            0e35c5b225a8 Bohdan Hulovatyi
            2b3f463b7e2d Akhilesh Paradhi (Inactive)
            Votes:
            0 Vote for this issue
            Watchers:
            3 Start watching this issue

            Dates

              Created:
              Updated:
              Resolved: