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

Header : Unordered list semantics used inappropriately

XMLWordPrintable

      Issue Summary

      The "Search issues" button inappropriately uses list semantics.

      Steps to Reproduce

      1. Navigate onto the above mentioned page.
      2. Navigate onto the mentioned instance and observe that the element is not interrelated.
      3. Inspect the code.
      4. Observe that the input field is inappropriately included within the list markup.

      Screenshot

      Actual Results

      The "Search issues" input field in the header inappropriately uses list semantics. However, this input field is not interrelated with the items it has been grouped.

      This might confuse the users of a screen reader. That the unrelated input field uses unordered list semantics may prevent them from efficiently comprehending the page's content structure.

      Expected Results

      Content that is not interrelated, sequenced or paired must not use list semantics. In this case, we would recommend you to move the <input> element out of  the <ul> in the DOM. You can instead wrap this button in any neutral tag that do not have any structural meaning, such as <div>, and <span> tags.

      Code Snippet

      <div>
<label for="i1">Search issues</label>
<input type="text" id="i1"...>
  </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 2024.3
      Voiceover - Version Latest

        1. Screenshot 2024-01-31 at 5.17.59 PM.png
          Screenshot 2024-01-31 at 5.17.59 PM.png
          762 kB

            [JSWSERVER-25548] Header : Unordered list semantics used inappropriately

            Marc Dacanay made changes -
            Labels Original: 1.3.1 a11y-triaged 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-header ax-jiradc-vpat-pg11 ax-qa level-A wcag21 New: 1.3.1 a11y-triaged 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-header ax-jiradc-vpat-pg11 ax-qa level-A ril wcag21
            Marc Dacanay made changes -
            Remote Link New: This issue links to "Internal ticket (Web Link)" [ 963633 ]
            Cynthia Singh made changes -
            Description Original: h3. Issue Summary

            On the "Create/edit page | Status macro" page, the "Refresh" button unnecessarily uses list semantics.

            *Note* that a similar issue was observed with the "Refresh" buttons of all the macro modal dialogs.
            h3. Steps to Reproduce
             # Open confluence.
             # Navigate onto the "Create" link in the header and activate it.
             # Navigate onto the "Insert more content" > "Status" buttons and activate them.
             # Navigate onto the mentioned instance and observe that the element is not interrelated.
             # Inspect the code.
             # Observe that the button is inappropriately included within the list markup.

            h3. Screenshot
            h3. Actual Results

            The "Refresh" Button unnecessarily uses list semantics. However, this button is not interrelated with the items above and below it.

            This might confuse the users of a screen reader. That the button uses unordered list semantics unnecessarily may prevent them from efficiently comprehending the page's content structure.
            h3. Expected Results

            Content that is not interrelated, sequenced or paired must not use list semantics. In this case, we would recommend you to remove the <ul> and <li> elements from the button in the DOM. You can instead wrap this button in any neutral tag that do not have any structural meaning, such as <div>, and <span> tags.
            h3. *Code Snippet*
            {code:java}
            <div>
            <button>Refresh</button>
              </div>{code}
            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 2024.3
            Voiceover - Version Latest             		New: h3. Issue Summary

            The "Search issues" button inappropriately uses list semantics.
            h3. Steps to Reproduce
             # Navigate onto the above mentioned page.
             # Navigate onto the mentioned instance and observe that the element is not interrelated.
             # Inspect the code.
             # Observe that the input field is inappropriately included within the list markup.

            h3. Screenshot
            h3. Actual Results

            The "Search issues" input field in the header inappropriately uses list semantics. However, this input field is not interrelated with the items it has been grouped.

            This might confuse the users of a screen reader. That the unrelated input field uses unordered list semantics may prevent them from efficiently comprehending the page's content structure.
            h3. Expected Results

            Content that is not interrelated, sequenced or paired must not use list semantics. In this case, we would recommend you to move the <input> element out of  the <ul> in the DOM. You can instead wrap this button in any neutral tag that do not have any structural meaning, such as <div>, and <span> tags.
            h3. *Code Snippet*
            {code:java}
            <div>
            <label for="i1">Search issues</label>
            <input type="text" id="i1"...>
              </div>{code}
            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 2024.3
            Voiceover - Version Latest
            Cynthia Singh made changes -
            Description Original: h3. Issue Summary

            The "Search issues" input field in the header section inappropriately uses list semantics.
            h3. Steps to Reproduce
             # Navigate onto the above mentioned page.
             # Navigate onto the mentioned instance and observe the the element is not interrelated.
             # Inspect the code.
             # Observe that the input field is inappropriately included within the list markup.

            h3. Screenshot

            !Screenshot 2024-01-31 at 5.17.59 PM.png|width=610,height=355!
            h3. Actual Results

            The "Search issues" input field in the header inappropriately use list semantics. However, this input field is not interrelated with the items with which it has been grouped.

            This might confuse the users of a screen reader. That the input field is inappropriately included within the list markup may prevent them from efficiently comprehending the page's content structure.
            h3. Expected Results

            Content that is not interrelated, sequenced or paired must not use list semantics. In this case, we would recommend you to move the <input> element from the <ul> tag. You can instead wrap this input field in any neutral tag that do not have any structural meaning, such as <div>, and <span> tags.
            h3. *Code Snippet*
            {code:java}
            <div>
            <label for="a1">Search issues</label>
             <input type="text" id="a1" ...>
            </div>{code}
            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 "Create/edit page | Status macro" page, the "Refresh" button unnecessarily uses list semantics.

            *Note* that a similar issue was observed with the "Refresh" buttons of all the macro modal dialogs.
            h3. Steps to Reproduce
             # Open confluence.
             # Navigate onto the "Create" link in the header and activate it.
             # Navigate onto the "Insert more content" > "Status" buttons and activate them.
             # Navigate onto the mentioned instance and observe that the element is not interrelated.
             # Inspect the code.
             # Observe that the button is inappropriately included within the list markup.

            h3. Screenshot
            h3. Actual Results

            The "Refresh" Button unnecessarily uses list semantics. However, this button is not interrelated with the items above and below it.

            This might confuse the users of a screen reader. That the button uses unordered list semantics unnecessarily may prevent them from efficiently comprehending the page's content structure.
            h3. Expected Results

            Content that is not interrelated, sequenced or paired must not use list semantics. In this case, we would recommend you to remove the <ul> and <li> elements from the button in the DOM. You can instead wrap this button in any neutral tag that do not have any structural meaning, such as <div>, and <span> tags.
            h3. *Code Snippet*
            {code:java}
            <div>
            <button>Refresh</button>
              </div>{code}
            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 2024.3
            Voiceover - Version Latest
            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 a11y-triaged ax-at-user ax-bug ax-desktop ax-high-priority ax-jiradc-vpat ax-jiradc-vpat-accessibilityassessmentroadmaps ax-jiradc-vpat-header ax-jiradc-vpat-pg11 ax-qa level-A wcag21 New: 1.3.1 a11y-triaged 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-header ax-jiradc-vpat-pg11 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 -
            Priority Original: Low [ 4 ] New: High [ 2 ]
            Sylwia Mikołajczuk made changes -
            Labels Original: 1.3.1 a11y-triaged ax-at-user ax-bug ax-desktop ax-high-priority ax-jiradc-vpat ax-jiradc-vpat-header ax-jiradc-vpat-pg11 ax-qa level-A wcag21 New: 1.3.1 a11y-triaged ax-at-user ax-bug ax-desktop ax-high-priority ax-jiradc-vpat ax-jiradc-vpat-accessibilityassessmentroadmaps ax-jiradc-vpat-header ax-jiradc-vpat-pg11 ax-qa level-A wcag21

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

                Created:
                Updated: