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

Accessibility assessment | Roadmaps : Checkbox group is not associated with its group label

XMLWordPrintable

      Issue Summary

      On the "Accessibility assessment | Roadmaps" page, the "Roll-up" checkbox group is not associated with its visual group label.

      Steps to Reproduce

      1. Navigate onto the above mentioned page.
      2. Navigate onto the "View settings" button and activate it.
      3. Navigate onto the mentioned instances and inspect their code.
      4. Observe that the checkboxes are not associated with their visual group label.

      Screenshot

      Actual Results

      The "Dates", and "Others" checkboxes are not programmatically associated with their visual group label.

      As a result, the purpose of these checkboxes 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 checkboxes created with ARIA.

      Code Snippet 1

       

      (with <fieldset and <legend> elements <fieldset> 
<legend>Roll-up</legend>
<input type="checkbox" name="example" id="example01" checked> 
<label for="example01">Dates</label>
<input type="checkbox" name="example" id="example02"> 
<label for="example02">Others</label> 
(... )
</fieldset>

      Code Snippet 2

       

      (with aria-labelledby attribute)
<div id="groupLabel">Roll-up</div>
<div role="group" aria-labelledby="groupLabel">
  <!-- Custom checkboxes -->
</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. Screenshot 2024-02-07 at 9.46.16 AM.png
          Screenshot 2024-02-07 at 9.46.16 AM.png
          809 kB

            [JSWSERVER-25582] Accessibility assessment | Roadmaps : Checkbox group is not associated with its group label

            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)" [ 963663 ]
            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 ]
            Yash Pawar made changes -
            Description Original: h3. Issue Summary

            On the "Accessibility assessment | Roadmaps" page, the "Roll-up" checkbox group is not associated with its visual group label.
            h3. Steps to Reproduce
             # Navigate onto the above mentioned page.
             # Navigate onto the "View settings" button and activate it.
             # Navigate onto the mentioned instances and inspect their code.
             # Observe that the checkboxes are not associated with their visual group label.

            h3. Screenshot
            h3. Actual Results

            The "Dates", and "Others" checkboxes are not programmatically associated with their visual group label.

            As a result, the purpose of these checkboxes 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 checkboxes created with ARIA.
            Code Snippet 1 (with <fieldset and <legend> elements
            <fieldset>
              <legend>Roll-up</legend>
              <input type="checkbox" name="example" id="example01" checked>
              <label for="example01">Dates</label>
              <input type="checkbox" name="example" id="example02">
              <label for="example02">Others</label>
              ...
            </fieldset>
            Code Snippet 2 (with aria-labelledby attribute)
            <div id="groupLabel">Roll-up</div>
            <div role="group" aria-labelledby="groupLabel">
              <!-- Custom checkboxes -->
            </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 "Roll-up" checkbox group is not associated with its visual group label.
            h3. Steps to Reproduce
             # Navigate onto the above mentioned page.
             # Navigate onto the "View settings" button and activate it.
             # Navigate onto the mentioned instances and inspect their code.
             # Observe that the checkboxes are not associated with their visual group label.

            h3. Screenshot

            !Screenshot 2024-02-07 at 9.46.16 AM.png|width=570,height=329!
            h3. Actual Results

            The "Dates", and "Others" checkboxes are not programmatically associated with their visual group label.

            As a result, the purpose of these checkboxes 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 checkboxes created with ARIA.

            *Code Snippet 1*

             
            {code:java}
            (with <fieldset and <legend> elements <fieldset>
            <legend>Roll-up</legend>
            <input type="checkbox" name="example" id="example01" checked>
            <label for="example01">Dates</label>
            <input type="checkbox" name="example" id="example02">
            <label for="example02">Others</label>
            (... )
            </fieldset> {code}
            *Code Snippet 2*

             
            {noformat}
            (with aria-labelledby attribute)
            <div id="groupLabel">Roll-up</div>
            <div role="group" aria-labelledby="groupLabel">
              <!-- Custom checkboxes -->
            </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
            Yash Pawar made changes -
            Attachment New: Screenshot 2024-02-07 at 9.46.16 AM.png [ 451536 ]
            ssuryavanshi (Inactive) made changes -
            Component/s New: (Advanced Roadmaps) Other [ 73719 ]

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

                Created:
                Updated: