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

Accessibility assessment | Roadmaps : Related input fields not programmatically determined

      Issue Summary

      On the "Accessibility assessment | Roadmaps" page, the "Show the past" and "Show the next"  input field groups are not associated with their visual group label.

      Steps to Reproduce

      1. Navigate onto the above mentioned page.
      2. Navigate onto the "Filter" button and activate it.
      3. Navigate onto the "Custom" button and activate it.
      4. Navigate onto the mentioned instances in the "Relative" tab and inspect their code.
      5. Observe that the input fields are not associated with their visual group label.

      Screenshot

      Actual Results

      The "Day", and "Period" input fields are not programmatically grouped and associated with their visual group label.

      As a result, the purpose of these input fields may be unclear for the users of a screen reader.

      Expected Results

      Make sure that form fields are associated with their visual labels. This can be done with <fieldset> and <legend> elements. If this is not possible, you can use aria-labelledby. This can be used with custom components created with ARIA.

      Code Snippet

      Code Snippet 1 (with <fieldset and <legend> elements
      <fieldset>
        <legend>Show the next</legend>
        <input type="text" name="example" id="example01" ...>
        <label for="example01">Day</label>
        <input type="text" name="example" id="example02">
        <label for="example02">Period</label>
        ...
      </fieldset>
      Code Snippet 2 (with aria-labelledby attribute)
      <div id="groupLabel">Show the next</div>
      <div role="group" aria-labelledby="groupLabel">
        <!-- Custom input fields -->
      </div>

      Workaround

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

      Environment

      MacBook Pro (16-inch, 2021)
      macOs Ventura 13.3.1
      Chrome - Version 113.0.5672.63 (Official Build) (x86_64)
      Firefox- Version 92.0 (64-bit)
      Safari- Version 16.4 (18615.1.26.110.1)
      JAWS- Version 2023
      NVDA- Version 2023.3
      Voiceover - Version Latest

          Form Name

            [JSWSERVER-25738] Accessibility assessment | Roadmaps : Related input fields not programmatically determined

              Unassigned Unassigned
              773dd3a38dd5 Cynthia Singh
              Affected customers:
              0 This affects my team
              Watchers:
              1 Start watching this issue

                Created:
                Updated: