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

Search - Advanced Search: Form elements must have labels

    XMLWordPrintable

Details

    Description

      Issue Summary

      On 'Advanced search' page, the search input field does not have an accessible label.

      Tested URL:

      https://confsrva11ya.instenv.atl-test.space/dosearchsite.action?includeArchivedSpaces=false 

      Steps to reproduce

      1. Navigate to the confluence homepage.
      2. Navigate to the Search image button inside header section & activate it.
      3. Navigate to 'Advanced search' link inside search modal & activate it.
      4. Navigate to the 'search' input field.

      Actual Results

      While navigating with screen reader turned on, when user navigate to the 'search' input field screen reader announces as 'Edit text blank'. An accessible label is not provided on the page.

      This makes screen reader users difficult to understand the purpose of input field.

      Expected Results

      The H2 element with text 'Search for pages, files, people and more' can be used as label to the search input.

      So the H2 element & the description element 'Refine your search using...' Should be placed above the search input. Mark the text 'Search for pages, files, people and more' in HTML label element & associate it with the input field. Also associate the description element with input field via aria-describedby attribute.

      Screenshots:

      Workaround

      As mentioned by the design team that providing visible label is not possible currently. So as a workaround we can add “aria-label” attribute to the <input> fields as an Accessible label.
       
       For Example : aria-label=“Search for pages, files, people and more”
       
      Additionally the instruction “Refine your search using the filters on the left, or use syntax to create an advanced query.” can be provided near the <input> field but it can be off-screen & it should be connected to the <input> element via “aria-describedby” attribute.

      Attachments

        1. QA CONFSERVER-77300.mov
          5.38 MB
        2. QA CONFSERVER-77300.png
          QA CONFSERVER-77300.png
          289 kB
        3. Screenshot 2022-01-28 at 5.17.52 PM.png
          Screenshot 2022-01-28 at 5.17.52 PM.png
          388 kB

        Issue Links

          Activity

            People

              d6590bcebf54 Denys Savin (Inactive)
              4b5b126a48d0 ssuryavanshi
              Votes:
              0 Vote for this issue
              Watchers:
              7 Start watching this issue

              Dates

                Created:
                Updated:
                Resolved: