Uploaded image for project: 'Moodle'
  1. Moodle
  2. MDL-74701

Notification popover elements are focusable even when hidden

    XMLWordPrintable

Details

    • MOODLE_311_STABLE, MOODLE_400_STABLE
    • MOODLE_311_STABLE, MOODLE_400_STABLE
    • MDL-74701-master
    • Hide
      1. Log in as a user (admin).
      2. Go the the notification settings (click on the notification bell and then settings)
      3. Enable the "New login notifications" (System) on the Web
      4. In a new anonymous session, login as this user
      5. In the original window, refresh the page and you should see a new notification message
      6. Navigate to the notification popover button via the keyboard.
      7. Press Enter key to expand the notification popover.
      8. Verify that you and use Tab/Shift + Tab/Down arrow/Up arrow keys to navigate through the notifications.
      9. Press the Escape key to close the notification popover.
      10. Verify that the notification popover button will be focused.
      11. Press the Tab key.
      12. Verify that the messaging button will be focused.

       

      Show
      Log in as a user (admin). Go the the notification settings (click on the notification bell and then settings) Enable the "New login notifications" (System) on the Web In a new anonymous session, login as this user In the original window, refresh the page and you should see a new notification message Navigate to the notification popover button via the keyboard. Press Enter key to expand the notification popover. Verify that you and use Tab/Shift + Tab/Down arrow/Up arrow keys to navigate through the notifications. Press the Escape key to close the notification popover. Verify that the notification popover button will be focused. Press the Tab key. Verify that the messaging button will be focused.  
    • 1
    • HQ Team International CIH2-225, HQ Team International CIH2-226

    Description

      Identified as Common issue #3 from the audit:

      JavaScript issues with visible focus

      Focus is lost when escaping from the notification block, and the user has to tab multiple times before they arrive at the next focusable element. From observation, JavaScript is being used to make the message elements and the “see all” link focusable; however, this state is not disabled when the block is hidden.

      Guidelines affected:
      • 1.3.1 Info and Relationships (A)
      • 2.4.7 Focus Visible (AA)
      • 4.1.2 Name, Role, Value (A)
      To reproduce:
      1. Log in as a user.
      2. Navigate to the notifications popover button via keyboard.
      3. Expand the popover by pressing enter
      4. Close the popover by pressing the Escape key
      5. Press tab.
      6. Expected: The focus will move to the messaging icon
      7. Actual: It will take several tabs to be able to focus on the messaging icon (usually the number of focusable items within the notifications popover).

      Attachments

        1. MDL-74701_v400.mp4
          287 kB
        2. MDL-74701_v311.mp4
          335 kB
        3. MDL-74701_master.mp4
          268 kB

        Activity

          People

            huongn@moodle.com Huong Nguyen
            jpataleta Jun Pataleta
            Laurent David Laurent David
            Jun Pataleta Jun Pataleta
            John Edward Pedregosa John Edward Pedregosa
            Votes:
            0 Vote for this issue
            Watchers:
            5 Start watching this issue

            Dates

              Created:
              Updated:
              Resolved:

              Time Tracking

                Estimated:
                Original Estimate - Not Specified
                Not Specified
                Remaining:
                Remaining Estimate - 0 minutes
                0m
                Logged:
                Time Spent - 1 day, 4 hours, 45 minutes
                1d 4h 45m

                Clockify

                  Error rendering 'clockify-timesheets-time-tracking-reports:timer-sidebar'. Please contact your Jira administrators.