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

Add comment to issue : Non-modal dialog inaccessible for screen reader and keyboard only user

XMLWordPrintable

      Issue Summary

      The element uses device-dependent event handlers and is therefore not accessible by keyboard alone.

      Element name:

      • "Admin Admin" popup content with "Activity" link and "More" menu button.

      Location of the element: Popup, on each "Admin Admin" link, in the "All" tab section, in the "Activity" heading section, in the main content.

      Additional details: While hovering on any "Admin Admin" link, display "Admin Admin" popup content. But this content is not available to keyboard users.

      Note: The same issue applies to all user links (Admin Admin) links.

      Steps to Reproduce

      1. Open the JSM homepage.
      2. Navigate to the "Project" link in the header and activate it.
      3. Select any project link and activate it.
      4. Navigate to the main content and activate the present issue links
      5. Navigate to the "All" tab and activate it.
      6. navigate to the "admin admin" link and hover over it
      7. Observe that the non-modal dialog is not accessible to users 

      Actual Results

      The modal dialog becomes available when the user hovers over the "admin admin" link present after the page by having keyboard support.

      However, in order to make the modal dialog available mouse hover is the only option with no alternative method for the keyboard only user provided. hence modal dialog is not available for keyboard-only users.

      Expected Results

      An alternate method should be provided for the keyboard-only user in order to make modal dialog available.

      Additionally, the focus should move to the non-modal dialog when it is activated so that keyboard-only users won't have to tab repeatedly to access content available inside the modal. This would also help screen reader users to navigate properly. 

      Alternatively,

      1. Provide an "i" image button beside of "admin admin" link using the native <button> element.
      2. Provide a descriptive label as "Show user information" for the button.
      3. Provide "aria-haspopup" attribute with the value "dialog".
      4. Ensure that the focus should move to the non-modal dialog when it is activated so that keyboard-only users won't have to tab repeatedly to access content available inside the modal. This would also help screen reader users to navigate properly. 

      Screenshot

      Workaround

      Not Available

      Bug Ref: 746057

      Bulldog Ref:

          Form Name

            [JSDSERVER-12086] Add comment to issue : Non-modal dialog inaccessible for screen reader and keyboard only user

            No work has yet been logged on this issue.

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

                Created:
                Updated: