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

Icons in component library examples for link accessibility are missing an image role

XMLWordPrintable

    • MOODLE_400_STABLE
    • MOODLE_400_STABLE
    • MDL-72805-master
    • Hide
      Prerequisites
      • axe DevTools
      • grunt
      • Moodle instance's developer mode turned on
      Test
      1. Install the axe DevTools.
      2. Open your browser's "Manage extensions" page.
      3. Open the details for the axe DevTools.
      4. Make sure that its "Allow access to file URLs" setting is enabled.
      5. On a terminal, go to your moodle instance's root directory. Run "grunt componentlibrary".
      6. On your browser, go to Site administration > Development > UI Component library
      7. On the component library's page, go to Moodle > Accessibility > Links
      8. Open your browser's dev tools and go to the axe DevTools tab.
      9. On the axe DevTools interface, press "Scan all of my page"
      10. Click on the "Elements must only use allowed ARIA attributes" (there will be elements with this error until MDL-72412 gets resolved)
      11. Under the issue details window, press "highlight".
      12. Press the arrow keys near to check which UI element is being highlighted with the invalid ARIA attribute error.
      13. Confirm that the following don't get highlighted:
        • The "Opens in new window" icon in the Moodle.org link under the "Using an image icon with alt text to indicate that the link opens in a new window" example
        • The "PDF document" icon in the "File type indicated via an icon/image's alt text" example.
        • The "Link leads to external site" icon under the "Links that lead to an external site" example.
      Show
      Prerequisites axe DevTools grunt Moodle instance's developer mode turned on Test Install the axe DevTools. Open your browser's "Manage extensions" page. Open the details for the axe DevTools. Make sure that its "Allow access to file URLs" setting is enabled. On a terminal, go to your moodle instance's root directory. Run " grunt componentlibrary ". On your browser, go to Site administration > Development > UI Component library On the component library's page, go to Moodle > Accessibility > Links Open your browser's dev tools and go to the axe DevTools tab. On the axe DevTools interface, press " Scan all of my page " Click on the " Elements must only use allowed ARIA attributes " (there will be elements with this error until MDL-72412 gets resolved) Under the issue details window, press "highlight". Press the arrow keys near to check which UI element is being highlighted with the invalid ARIA attribute error. Confirm that the following don't get highlighted: The "Opens in new window" icon in the Moodle.org link under the " Using an image icon with alt text to indicate that the link opens in a new window " example The "PDF document" icon in the " File type indicated via an icon/image's alt text " example. The " Link leads to external site " icon under the " Links that lead to an external site " example.

      Icon fonts used as informative images should have an image role.

      The example markup of the icon fonts in the Component library's Moodle > Accessibility > Links page should have an image role.

        1. MDL-72805_3.png
          245 kB
          Angelia Dela Cruz
        2. MDL-72805_1.png
          241 kB
          Angelia Dela Cruz
        3. MDL-72805_2.png
          242 kB
          Angelia Dela Cruz

            jpataleta Jun Pataleta
            jpataleta Jun Pataleta
            Simey Lameze Simey Lameze
            Eloy Lafuente (stronk7) Eloy Lafuente (stronk7)
            Angelia Dela Cruz Angelia Dela Cruz
            Votes:
            0 Vote for this issue
            Watchers:
            4 Start watching this issue

              Created:
              Updated:
              Resolved:

                Estimated:
                Original Estimate - Not Specified
                Not Specified
                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.