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

Dashboard: Search results are not announced to the screen reader users

    XMLWordPrintable

Details

    Description

      Issue Summary

      In the search input field for searching the "Search for code, commits or repositories", the results are not accessible and announced to the screen reader users.

      Steps to Reproduce

      1. In the Bitbucket dashboard, keeping the screen reader on, navigate to the search input field for "Search for code, commits or repositories" in the header section.
      2. Try searching for any "Search for code, commits or repositories" in the input field and observe the results.

      Screenshot

      Screen recording

      Screen Recording 2022-07-21 at 11.46.41 AM.mov

      Actual Results

      In the search input field for the "Search for code, commits, or repositories" in the header section of Bitbucket, when the screen reader tries to search for any code, commit, or repositories, a list of results is available. But the following results are not announced and accessible to the screen reader users. When the user tries to interact with the results with the Up/Down arrow keys the options in the list are not announced to the screen reader users. This makes it the assistive technology user difficult to use the functionality.

      Expected Results

      When the user tries to search for the code, commit, or repositories and the list appears the results should be announced to the screen reader user, such as "5 results found". 
      Ensure when the screen reader tries to interact with the list using the Up/Down arrow keys the results are accessible to the users. Additionally, the focus should not move out of the list.

      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 implementations: https://www.w3.org/WAI/ARIA/apg/example-index/combobox/grid-combo.html and https://www.w3.org/WAI/ARIA/apg/example-index/combobox/combobox-autocomplete-list.html 

      Workaround

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

      Attachments

        Issue Links

          Activity

            People

              91f2c0a8617b Navpreet Ahuja
              2b3f463b7e2d Akhilesh Paradhi (Inactive)
              Votes:
              0 Vote for this issue
              Watchers:
              1 Start watching this issue

              Dates

                Created:
                Updated: