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

XMLWordPrintable

    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.

      1. Screen Recording 2022-07-21 at 11.46.41 AM.mov
        13.17 MB
        Akhilesh Paradhi
      2. Screen Recording 2025-04-08 at 1.41.53 pm.mov
        8.74 MB
        Navpreet Ahuja
      3. Screen Shot 2022-07-21 at 11.49.06 AM.png
        316 kB
        Akhilesh Paradhi

          Assignee:
          Navpreet Ahuja
          Reporter:
          Akhilesh Paradhi (Inactive)
          Votes:
          0 Vote for this issue
          Watchers:
          3 Start watching this issue

            Created:
            Updated:
            Resolved: