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

Accessibility on Notifications

XMLWordPrintable

    • 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.

      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
         

            Unassigned Unassigned
            guillalva06 Guillermo Leon Alvarez Salamanca
            Votes:
            10 Vote for this issue
            Watchers:
            7 Start watching this issue

              Created:
              Updated:
              Resolved:

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