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

XMLWordPrintable

      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

        1. image-2024-02-12-10-23-42-725.png
          image-2024-02-12-10-23-42-725.png
          674 kB

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

            Marc Dacanay made changes -
            Labels Original: 1.3.1 ax-at-user ax-bug ax-desktop ax-high-priority ax-jiradc-arj ax-jiradc-arj-vpat2024 ax-jiradc-vpat ax-jiradc-vpat-accessibilityassessmentroadmaps ax-jiradc-vpat-pg03 ax-qa level-A wcag21 New: 1.3.1 ax-at-user ax-bug ax-desktop ax-high-priority ax-jiradc-arj ax-jiradc-arj-vpat2024 ax-jiradc-vpat ax-jiradc-vpat-accessibilityassessmentroadmaps ax-jiradc-vpat-pg03 ax-qa level-A ril wcag21
            Marc Dacanay made changes -
            Remote Link New: This issue links to "Internal ticket (Web Link)" [ 963910 ]
            Sylwia Mikołajczuk made changes -
            Priority Original: High [ 2 ] New: Medium [ 3 ]
            Stasiu made changes -
            Introduced in Version Original: 9.12 New: 8.2
            Affects Version/s New: 8.20.30 [ 106364 ]
            Affects Version/s New: 9.4.17 [ 106909 ]
            Sylwia Mikołajczuk made changes -
            Labels Original: 1.3.1 ax-at-user ax-bug ax-desktop ax-high-priority ax-jiradc-vpat ax-jiradc-vpat-accessibilityassessmentroadmaps ax-jiradc-vpat-pg03 ax-qa level-A wcag21 New: 1.3.1 ax-at-user ax-bug ax-desktop ax-high-priority ax-jiradc-arj ax-jiradc-arj-vpat2024 ax-jiradc-vpat ax-jiradc-vpat-accessibilityassessmentroadmaps ax-jiradc-vpat-pg03 ax-qa level-A wcag21
            Stasiu made changes -
            Component/s Original: Accessibility [ 62491 ]
            Component/s Original: (Advanced Roadmaps) Other [ 73719 ]
            Component/s New: (Advanced Roadmaps) Accessibility [ 74392 ]
            Stasiu made changes -
            Status Original: Needs Triage [ 10030 ] New: Ready for Development [ 10049 ]
            Varsha Bansode made changes -
            Description Original: h3. 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.
            h3. Steps to Reproduce
             # Navigate onto the above mentioned page.
             # Navigate onto the "Filter" button and activate it.
             # Navigate onto the "Custom" button and activate it.
             # Navigate onto the mentioned instances in the "Relative" tab and inspect their code.
             # Observe that the input fields are not associated with their visual group label.

            h3. Screenshot
            h3. 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.
            h3. 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*
            {noformat}
            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>{noformat}
            h3. Workaround

            Currently there is no known workaround for this behavior. A workaround will be added here when available
            h3. 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             		New: h3. 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.
            h3. Steps to Reproduce
             # Navigate onto the above mentioned page.
             # Navigate onto the "Filter" button and activate it.
             # Navigate onto the "Custom" button and activate it.
             # Navigate onto the mentioned instances in the "Relative" tab and inspect their code.
             # Observe that the input fields are not associated with their visual group label.

            h3. Screenshot

            !image-2024-02-12-10-23-42-725.png|thumbnail!
            h3. 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.
            h3. 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*
            {noformat}
            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>{noformat}
            h3. Workaround

            Currently there is no known workaround for this behavior. A workaround will be added here when available
            h3. 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
            Varsha Bansode made changes -
            Attachment New: image-2024-02-12-10-23-42-725.png [ 451952 ]
            Varsha Bansode made changes -
            Description Original: h3. 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.
            h3. Steps to Reproduce
             # Navigate onto the above mentioned page.
             # Navigate onto the "Filter" button and activate it.
             # Navigate onto the "Custom" button and activate it.
             # Navigate onto the mentioned instances in the "Relative" tab and inspect their code.
             # Observe that the input fields are not associated with their visual group label.

            h3. Screenshot
            h3. 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.
            h3. Expected Results
            {noformat}
            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 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>{noformat}
            h3. Workaround

            Currently there is no known workaround for this behavior. A workaround will be added here when available
            h3. 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             		New: h3. 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.
            h3. Steps to Reproduce
             # Navigate onto the above mentioned page.
             # Navigate onto the "Filter" button and activate it.
             # Navigate onto the "Custom" button and activate it.
             # Navigate onto the mentioned instances in the "Relative" tab and inspect their code.
             # Observe that the input fields are not associated with their visual group label.

            h3. Screenshot
            h3. 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.
            h3. 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*
            {noformat}
            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>{noformat}
            h3. Workaround

            Currently there is no known workaround for this behavior. A workaround will be added here when available
            h3. 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

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

                Created:
                Updated: