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

Incorrect use of ARIA attributes in the notications popover and messaging drawers

XMLWordPrintable

    • 1
    • Team Dragons 2025 Sprint 1.3, Team Dragons 2025 Sprint 1.4

      From the audit results:

      Incorrect use of ARIA Expanded

      ARIA Expanded has been applied to a div within the "Toggle notification window" and "Toggle message drawer", but that element is not a control element for the expandable content.

      Guidelines affected:

      • SC 4.1.2 Name, Role, Value (AA)

      Impact on users:

      • Assistive technology may not relay the expanded or contracted state of this control to the user.

      Recommendation:

      • Ensure the state of the interface component is described by assistive technology.
      Incorrect use of ARIA label

      An ARIA label has been applied to an element that is not interactive or is a child element within an interactive code block.
      Specifically, the "Toggle Notification" bell icon, "Message drawer" chat-bubble icon, and question-mark tooltip icon.

      Guidelines affected:

      • SC 4.1.2 Name, Role, Value (AA)

      Impact on users:

      • Assistive technology does not read the aria-label content and is subsequently missed by users who rely on this technology to navigate web pages.

      Recommendation:

      • Avoid using ARIA unnecessarily. Semantic HTML should be the first solution.
        Use ARIA-LABEL only on interactive elements or elements that have ARIA roles have made interactive.
        Use ARIA-LABELLEDBY or ARIA-DESCRIBEDBY for non-interactive elements.

        1. On page reload and tab through.png
          On page reload and tab through.png
          6 kB
        2. (1) 4 Passed -- (Main)MDL-84823.png
          (1) 4 Passed -- (Main)MDL-84823.png
          437 kB
        3. (1) 6 Passed -- (Main)MDL-84823.png
          (1) 6 Passed -- (Main)MDL-84823.png
          340 kB
        4. (1) 8 Passed -- (Main)MDL-84823.png
          (1) 8 Passed -- (Main)MDL-84823.png
          280 kB
        5. (2) 2 Passed -- (Main)MDL-84823.png
          (2) 2 Passed -- (Main)MDL-84823.png
          339 kB
        6. (2) 4 Passed -- (Main)MDL-84823.png
          (2) 4 Passed -- (Main)MDL-84823.png
          378 kB

            meirza.arson@moodle.com Meirza
            jpataleta Jun Pataleta
            Stevani Andolo Stevani Andolo
            Jun Pataleta Jun Pataleta
            Kim Jared Lucas Kim Jared Lucas
            Votes:
            0 Vote for this issue
            Watchers:
            6 Start watching this issue

              Created:
              Updated:
              Resolved:

                Estimated:
                Original Estimate - Not Specified
                Not Specified
                Remaining:
                Remaining Estimate - 0 minutes
                0m
                Logged:
                Time Spent - 4 hours, 26 minutes
                4h 26m

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