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

Accessibility on Notifications

    XMLWordPrintable

Details

    • Bug
    • Status: Open
    • Minor
    • Resolution: Unresolved
    • 3.3.4, 3.4.1, 3.5, 3.10.6
    • None
    • Accessibility, Other
    • MOODLE_310_STABLE, MOODLE_33_STABLE, MOODLE_34_STABLE, MOODLE_35_STABLE
    • Hide

      Scenario 1:

      • Log in as any user
      • Inspect notification icon's HTML (See attached screenshot for reference)

      Expected - Valid ARIA attribute is assigned

      Scenario 2:

      Pre-conditions:

      Notifications exist in list

      Steps

      • Log in as any user
      • Click notifications bell icon
      • Inspect notification element (see below pictures for reference)

      Expected - Parent role in notifications list element is not missing.

      Show
      Scenario 1: Log in as any user Inspect notification icon's HTML (See attached screenshot for reference) Expected - Valid ARIA attribute is assigned Scenario 2: Pre-conditions: Notifications exist in list Steps Log in as any user Click notifications bell icon Inspect notification element (see below pictures for reference) Expected - Parent role in notifications list element is not missing.

    Description

      According to an audit made over Accessibility, there are a few violations on some ARIA attributes and its values on the 'Notifications' bar icon an 'Notifications' pop up list. The list with the violations and a screenshot of them is:

      • Invalid 'aria-role' attribute for notifications icon is assigned. Instead, 'role' attribute must be used. 'aria-role' doesn't exist.

        <div class="popover-region-toggle nav-link"data-region="popover-region-toggle"
        aria-role="button" aria-controls="popover-region-container-5a731177b7d795a731176f170814" 
        aria-haspopup="true" aria-label="Show message window with no new messages" tabindex="0">

        Solution is change the attribute "aria-role" to "role" 

                

      • Parent role is missing for list elements in notifications list. This error happens in two different views.

        <div class="content-item-container notification unread"
        data-region="notification-content-item-container" data-id="6" role="listitem">
        

        Solution is add the role="list" attribute to the parent element in both views. In the first view, the role of the parent container is "log"

        On the second view, parent container does not have the role attribute.

                

      These three ARIA issues could be solved updating the mustache templates were those attributes are been generated. The files are:

      • lib/templates/popover_region.mustache
      • message/output/popup/templates/notification_area.mustache
      • message/output/popup/templates/notification_popover.mustache
         

      Attachments

        Activity

          People

            Unassigned Unassigned
            guillalva06 Guillermo Leon Alvarez Salamanca
            Andrew Lyons, Huong Nguyen, Jun Pataleta, Michael Hawkins, Shamim Rezaie, Simey Lameze, Adrian Greeve, Jake Dallimore, Mathew May, Mihail Geshoski, Peter Dias, Sujith Haridasan
            Votes:
            10 Vote for this issue
            Watchers:
            6 Start watching this issue

            Dates

              Created:
              Updated: