Uploaded image for project: 'Jira Service Management Data Center'
  1. Jira Service Management Data Center
  2. JSDSERVER-12097

Approval Queue : Missing keyboard support for the Text formatting dropdown

XMLWordPrintable

      Issue Summary

      Missing keyboard support for the text formatting dropdown in the toolbar section for the comment on this page section.

      Element name: Buttons

      • Text styles button
      • Bold button
      • More options button
      • Bullet list button
      • Attach file
      • --etc.,
        ---------------------------------
        Element name: Submenus of the below menu buttons
      • Text styles button
      • More options button.

      Location: Present in the "Comment on this request" edit field, on the main page.

      Steps to Reproduce

      1. In the Help portal, select the My request button and select All Requests.
      2. In the available request, select any 1 request.
      3. In the Available page, select the Comment tab.
      4. In the comment toolbar, try to select the Heading level with the keyboard and screen reader.

      Actual Results

      In the editor toolbar section, for the selection for the more formatting button, the dropdown list is not accessible to keyboard-only users. This makes the keyboard users inaccessible to the interactive content available.
      Additionally, the dropdown list is missing list markup, as a result, screen reader users find it difficult to understand the information effectively. 

      Expected Results

      Ensure the keyboard and screen reader focus is received to the dropdown menu.

      Refer to the following code implementation:

      <button type="button"            
aria-haspopup="true"            
aria-controls="menu1" class="item menu-button"  tabindex="-1" aria-label="Select heading">
<span> Normal text </span>   
</button>    
<ul role="menu" id="menu1" aria-label="Heading levels">      
<li role="menuitemradio"  aria-checked="true"> Heading level 1  </li>      
<li role="menuitemradio"   aria-checked="true"> Heading level 2 </li>    
(...)   
 </ul>

      Refer to the following link:https://www.w3.org/WAI/ARIA/apg/example-index/toolbar/toolbar.html 

      Screenshot

      Workaround

      Can be added with "###" and the space, will add a heading level 3 and with "/heading" in the text area.

      Bug Ref: 745775

      Bulldog Ref:

        1. Screenshot 2022-11-16 at 2.42.22 PM.png
          Screenshot 2022-11-16 at 2.42.22 PM.png
          1.44 MB

          Form Name

            [JSDSERVER-12097] Approval Queue : Missing keyboard support for the Text formatting dropdown

            Marc Dacanay made changes -
            Labels Original: 2.1.1 Accessibility WCAG21 ax-at-JAWS ax-at-NVDA ax-at-VO ax-at-user ax-bug ax-dev-ready ax-jsm ax-kb-user ax-medium-priority ax-platform-dc ax-qa ax-qa-prioritised New: 2.1.1 Accessibility WCAG21 ax-at-JAWS ax-at-NVDA ax-at-VO ax-at-user ax-bug ax-dev-ready ax-jsm ax-kb-user ax-medium-priority ax-platform-dc ax-qa ax-qa-prioritised ril
            Marc Dacanay made changes -
            Remote Link New: This issue links to "Internal ticket (Web Link)" [ 955678 ]
            Divyanshi made changes -
            Remote Link New: This issue links to "Page (Confluence)" [ 912015 ]
            Matthew Brennan made changes -
            Labels Original: 2.1.1 Accessibility WCAG21 ax-at-JAWS ax-at-NVDA ax-at-VO ax-at-user ax-bug ax-dev-ready ax-jsm ax-kb-user ax-platform-dc ax-qa ax-qa-prioritised New: 2.1.1 Accessibility WCAG21 ax-at-JAWS ax-at-NVDA ax-at-VO ax-at-user ax-bug ax-dev-ready ax-jsm ax-kb-user ax-medium-priority ax-platform-dc ax-qa ax-qa-prioritised
            Matthew Brennan made changes -
            Labels Original: 2.1.1 Accessibility WCAG21 ax-at-JAWS ax-at-NVDA ax-at-VO ax-at-user ax-bug ax-dev-ready ax-jsm ax-kb-user ax-platform-dc ax-qa-prioritised New: 2.1.1 Accessibility WCAG21 ax-at-JAWS ax-at-NVDA ax-at-VO ax-at-user ax-bug ax-dev-ready ax-jsm ax-kb-user ax-platform-dc ax-qa ax-qa-prioritised
            Rahil Shaikh made changes -
            Labels Original: 2.1.1 Accessibility WCAG21 ax-at-JAWS ax-at-NVDA ax-at-VO ax-at-user ax-bug ax-dev-ready ax-high-priority ax-jsm ax-kb-user ax-platform-dc ax-qa-prioritised ax-vpat-critical New: 2.1.1 Accessibility WCAG21 ax-at-JAWS ax-at-NVDA ax-at-VO ax-at-user ax-bug ax-dev-ready ax-jsm ax-kb-user ax-platform-dc ax-qa-prioritised
            Akhilesh Paradhi (Inactive) made changes -
            Description Original: h3. Issue Summary

            The visual focus indicator is missing altogether.

            Element name: Buttons
             - Text styles button
             - Bold button
             - More options button
             - Bullet list button
             - Attach file
             - --etc.,
            ---------------------------------
            Element name: Submenus of the below menu buttons
             - Text styles button
             - More options button.

            Location: Present in the "Comment on this request" edit field, on the main page.
            h3. Steps to Reproduce
             # In the Help portal, select the My request button and select All Requests.
             # In the available request, select any 1 request.
             # In the Available page, select the Comment tab.
             # In the comment toolbar, try to select the Heading level with keyboard and screen reader.

            h3. Actual Results

            In the editor toolbar section, for the selection for the more formatting button, the dropdown list is not accessible to keyboard-only users. This makes the keyboard users inaccessible to the interactive content available.
            Additionally, the dropdown list is missing list markup, as a result, screen reader users find it difficult to understand the information effectively. 
            h3. Expected Results

            Ensure the keyboard and screen reader focus is received to the dropdown menu.

            Refer to the following code implementation:
            {code:java}
            <button type="button"
            aria-haspopup="true"
            aria-controls="menu1" class="item menu-button" tabindex="-1" aria-label="Select heading">
            <span> Normal text </span>  
            </button>
            <ul role="menu" id="menu1" aria-label="Heading levels">
            <li role="menuitemradio" aria-checked="true"> Heading level 1 </li>
            <li role="menuitemradio" aria-checked="true"> Heading level 2 </li>
            (...)
             </ul> {code}
            Refer to the following link:[https://www.w3.org/WAI/ARIA/apg/example-index/toolbar/toolbar.html] 
            h3. Screenshot

            !Screenshot 2022-11-16 at 2.42.22 PM.png|width=398,height=219!
            h3. Workaround

            Can be added with "###" and the space, will add a heading level 3 and with "/heading" in the text area.

            Bug Ref: 745775

            Bulldog Ref:             		New: h3. Issue Summary

            Missing keyboard support for the text formatting dropdown in the toolbar section for the comment on this page section.

            Element name: Buttons
             - Text styles button
             - Bold button
             - More options button
             - Bullet list button
             - Attach file
             - --etc.,
            ---------------------------------
            Element name: Submenus of the below menu buttons
             - Text styles button
             - More options button.

            Location: Present in the "Comment on this request" edit field, on the main page.
            h3. Steps to Reproduce
             # In the Help portal, select the My request button and select All Requests.
             # In the available request, select any 1 request.
             # In the Available page, select the Comment tab.
             # In the comment toolbar, try to select the Heading level with the keyboard and screen reader.

            h3. Actual Results

            In the editor toolbar section, for the selection for the more formatting button, the dropdown list is not accessible to keyboard-only users. This makes the keyboard users inaccessible to the interactive content available.
            Additionally, the dropdown list is missing list markup, as a result, screen reader users find it difficult to understand the information effectively. 
            h3. Expected Results

            Ensure the keyboard and screen reader focus is received to the dropdown menu.

            Refer to the following code implementation:
            {code:java}
            <button type="button"
            aria-haspopup="true"
            aria-controls="menu1" class="item menu-button" tabindex="-1" aria-label="Select heading">
            <span> Normal text </span>  
            </button>
            <ul role="menu" id="menu1" aria-label="Heading levels">
            <li role="menuitemradio" aria-checked="true"> Heading level 1 </li>
            <li role="menuitemradio" aria-checked="true"> Heading level 2 </li>
            (...)
             </ul> {code}
            Refer to the following link:[https://www.w3.org/WAI/ARIA/apg/example-index/toolbar/toolbar.html] 
            h3. Screenshot

            !Screenshot 2022-11-16 at 2.42.22 PM.png|width=398,height=219!
            h3. Workaround

            Can be added with "###" and the space, will add a heading level 3 and with "/heading" in the text area.

            Bug Ref: 745775

            Bulldog Ref:
            Akhilesh Paradhi (Inactive) made changes -
            Summary Original: Approval Queue : Focus indicator is missing. New: Approval Queue : Missing keyboard support for the Text formatting dropdown
            ssuryavanshi (Inactive) made changes -
            Labels Original: 2.1.1 4.1.2 Accessibility WCAG21 ax-at-JAWS ax-at-NVDA ax-at-VO ax-at-user ax-bug ax-dev-ready ax-high-priority ax-jsm ax-kb-user ax-platform-dc ax-qa-prioritised ax-vpat-critical New: 2.1.1 Accessibility WCAG21 ax-at-JAWS ax-at-NVDA ax-at-VO ax-at-user ax-bug ax-dev-ready ax-high-priority ax-jsm ax-kb-user ax-platform-dc ax-qa-prioritised ax-vpat-critical
            Marc Dacanay made changes -
            Priority Original: High [ 2 ] New: Low [ 4 ]

              Unassigned Unassigned
              12b69dcabe29 Matthew Brennan
              Affected customers:
              0 This affects my team
              Watchers:
              5 Start watching this issue

                Created:
                Updated: