Uploaded image for project: 'Bitbucket Data Center'
  1. Bitbucket Data Center
  2. BSERV-13390

Pull request Diff : Users list inaccessible for the screen reader users when the user tries to tag another user in comments.

    XMLWordPrintable

Description

    Issue Summary

    In the comment text area, the screen reader does not announce the options in the list which is available when the user tries to tag a user in a comment.

    Steps to Reproduce

    1. In Bitbucket, select a repository and in the sidebar section, navigate to the pull request link.
    2. On the Pull Request page, for the Overview section, navigate to the Activity section and try adding a comment.
    3. In the text field for comment, try to tag a user using the "@" and the name with it, a menu will appear containing the users.
    4. With the screen reader on, using the Up/Down arrow keys try to navigate between the menu.

    Actual Results

    In the comment text area for the pull request, when the user tries to tag a user by entering the character "@" and the name further of the user, a list of users is available. When the screen reader user tries to interact with the list with the Up/Down arrow keys, the screen reader does not announce the options of users in the list. This makes the screen reader difficult to access the list of users are would have to go back to check the users' names they have entered in the comment again for verification, which consumes time and becomes a hectic process.

    Expected Results

    When the user tries to navigate between the list of users available when the user tries to tag one in a comment, the screen reader should announce the options. The list of options should be announced when the user navigates between the options using the Up/Down arrow key.

    To make the component more accessible, try implementing the following:

    • Add role="combobox" and an aria-autocomplete="list" to the <input> element of the element.
    • Add a role="listbox" to the <ul> element of the list and role="option" to the options of the list.

    Refer to the following example for the list implementation: https://www.w3.org/WAI/ARIA/apg/example-index/combobox/combobox-autocomplete-list 

    Screenshot

     

    Screen recording

    Screen Recording 2022-07-19 at 6.54.32 PM.mov

    Workaround

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

    Attachments

      Issue Links

        Activity

          People

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

            Dates

              Created:
              Updated: