Uploaded image for project: 'Jira Software Data Center'
  1. Jira Software Data Center
  2. JSWSERVER-25733

Refine Issues Displayed : Identical label used for the buttons

    XMLWordPrintable

Details

    Description

      Issue Summary

      On the "Refine Issues Displayed" page, similar labels such as “Close” are provided for the multiple buttons.

      Steps to Reproduce

      1. Open the "Refine Issues Displayed" page.
      2. Navigate and activate the "Type" button.
      3. Navigate and select any option from the "Choose issue type" combobox.
      4. Navigate to the mentioned instance.
      5. Inspect the code.
      6. Observe that identical and non-descriptive label is given to the multiple buttons.

      Screenshot 1

      Screenshot 2

      Actual Results

      The identical and non-descriptive labels such as "Close” are provided for multiple buttons which are available by selecting any options from the "Choose issue type" and "Choose issue status" comboboxes.

      As a result, screen reader users will not understand the purpose of these buttons. 

      Also, screen reader users tend to pull a list of buttons for faster navigation, thus the buttons with similar labels appearing multiple times in their list will create confusion for them.

      Expected Results

      Unique and descriptive labels should be provided for the “Close” buttons.

      This can be achieved by linking the id of "Story", “Epic”, and so on, texts with respective "Close” buttons by using the aria-labelledby attribute. Reference the id attributes of both via aria-labelledby attribute respectively.

      Code snippet

      <div id="two" class="sc-cBrjTV gIHTxC"><img src="/images/icons/issuetypes/epic.svg"> &nbsp; Epic</div>
      <button aria-labelledby="one two" class="css-fbv3aj" data-testid="exclude-issue-type_remove_1" type="button" tabindex="0">
      <span id="one" role="img" aria-label="close" class="css-pxzk9z" style="--icon-primary-color: currentColor; --icon-secondary-color: var(--background-default, #FFFFFF);">
      (...)
      </span>
      </button> 

      Workaround

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

      Environment

      MacBook Pro (13-inch, 2018)
      macOs Ventura 13.3.1
      Chrome - Version 109.0.5414.119 (Official Build) (64-bit)
      Firefox- Version 92.0 (64-bit)
      Safari- Version 16.4 (18615.1.26.110.1)
      JAWS- Version 2022
      NVDA- Version 2021.2
      Voiceover - Version Latest

      Attachments

        Activity

          People

            Unassigned Unassigned
            2b8a2d42df1b Yash Pawar
            Votes:
            0 Vote for this issue
            Watchers:
            2 Start watching this issue

            Dates

              Created:
              Updated: