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

aria-label attribute is invalid for informative icon fonts

XMLWordPrintable

    • MOODLE_310_STABLE, MOODLE_311_STABLE
    • MOODLE_311_STABLE
    • MDL-72412-master
    • Hide
      Prerequisite
      1. axe DevTools browser extension
      Test
      1. Go to any moodle page. E.g. the Dashboard
      2. Open your browser's developer console.
      3. Select the axe DevTools tab.
      4. Click "Scan all of my page".
      5. Confirm that there are no "Elements must only use allowed ARIA attributes" errors related to the "<i>" element. (see "Element source" in axe DevTool's issue description report)
      Show
      Prerequisite axe DevTools browser extension Test Go to any moodle page. E.g. the Dashboard Open your browser's developer console. Select the axe DevTools tab. Click " Scan all of my page ". Confirm that there are no " Elements must only use allowed ARIA attributes " errors related to the " <i> " element. (see " Element source " in axe DevTool's issue description report)
    • 0
    • HQ Team International Sprint 8

      Informative icon fonts (pix_icons that are rendered as icon fonts with alt text passed to them) have the aria-label attribute which is not valid without the "role="img"" attribute.

      Axe DevTools reports this as a failure. For example:

      Issue Description
      Ensures ARIA attributes are allowed for an element's role
       
      Element location
      .text-success
       
      Element source
      <i class="icon fa fa-check text-success fa-fw " title="Pass" aria-label="Pass"></i>
       
      To solve this issue, you need to...
      Fix the following:
      ARIA attribute cannot be used, add a role attribute or use a different element: aria-label
      

            jpataleta Jun Pataleta
            jpataleta Jun Pataleta
            Shamim Rezaie Shamim Rezaie
            Sara Arjona (@sarjona) Sara Arjona (@sarjona)
            Gladys Basiana Gladys Basiana
            Votes:
            0 Vote for this issue
            Watchers:
            5 Start watching this issue

              Created:
              Updated:
              Resolved:

                Estimated:
                Original Estimate - 0 minutes
                0m
                Remaining:
                Remaining Estimate - 0 minutes
                0m
                Logged:
                Time Spent - 2 hours, 5 minutes
                2h 5m

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