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

WCAG 4.1.2: aria-hidden elements contain focusable elements

    XMLWordPrintable

    Details

    • Testing Instructions:
      Hide
      1. Install the "Axe" plugin for Google Chrome or Firefox
      2. Open your site dashboard
      3. Open developer tools
      4. Run Axe tool
        1. Confirm that there are no findings of the error: "aria-hidden elements do not contain focusable elements"
      5. Navigate to a course
      6. Re-run Axe
        1. Confirm that there are no findings of the error: "aria-hidden elements do not contain focusable elements"
      7. Turn editing on
      8. Re-run Axe
        1. Confirm that there are no findings of the error: "aria-hidden elements do not contain focusable elements"
      9. Open the activity chooser
      10. Re-run Axe
        1. Confirm that there are no findings of the error: "aria-hidden elements do not contain focusable elements"
      11. Close the activity chooser
      12. Re-run Axe
        1. Confirm that there are no findings of the error: "aria-hidden elements do not contain focusable elements"
      13. Re-open the activity chooser
      14. In the Developer tools console, run:

        newLink = document.createElement('a'); newLink.href="#"; newLink.innerHTML="Click me"; document.querySelector('#page-wrapper').appendChild(newLink); console.log(newLink);
        

        1. *Confirm that the Console shows something like the following:

          <a href="#" data-aria-hidden-tab-index="" tabindex="-1">Click me</a>
          undefined
          

      15. Right-click on the "<a href..." part and choose "Reveal in elements panel"
        1. Confirm that the tabindex has a value of "-1"
      16. Re-run Axe
        1. Confirm that there are no findings of the error: "aria-hidden elements do not contain focusable elements"
      17. Close the activity chooser
      18. Find the new link in the Elements panel of the developer tools again
        1. Confirm that the tabindex has gone
      1. Open the messaging drawer
      2. Re-run Axe
        1. Confirm that there are no findings of the error: "aria-hidden elements do not contain focusable elements"
      1. Click on the name of your user
      2. Re-run Axe
        1. Confirm that there are no findings of the error: "aria-hidden elements do not contain focusable elements"
      3. Open the menu for that user (three dots)
      4. Click on the "Delete user" option
      5. Re-run Axe
        1. Confirm that there are no findings of the error: "aria-hidden elements do not contain focusable elements"
      6. Close messaging
      7. With the navigation drawer (Boost) open
      8. Re-run Axe
        1. Confirm that there are no findings of the error: "aria-hidden elements do not contain focusable elements"
      9. Close the navigation drawer
      10. Re-run Axe
        1. Confirm that there are no findings of the error: "aria-hidden elements do not contain focusable elements"
      11. Re-open the navigation drawer
      12. Navigate to your Dashboard
      13. Visit at least 4 courses so that the "Recently accessed courses block" has some content
      14. Navigate to your Dashboard
      15. (You should now have at least 4 courses visible*
      16. Re-run Axe
        1. Confirm that there are no findings of the error: "aria-hidden elements do not contain focusable elements"
      17. Go to the next page in the Recently access courses block
      18. Re-run Axe
        1. Confirm that there are no findings of the error: "aria-hidden elements do not contain focusable elements"
      19. At the bottom of the page choose the "Reset user tour on this page"
        Note: If you have disabled this default tour, then you will need to enable it from Site administration -> Appearance -> User tours
      20. Re-run Axe
        1. Confirm that there are no findings of the error: "aria-hidden elements do not contain focusable elements"
      21. Step through each part of the user tour
      22. Between each step:
        1. Re-run Axe
          1. Confirm that there are no findings of the error: "aria-hidden elements do not contain focusable elements"
      23. End the tour
      24. Re-run Axe
        1. Confirm that there are no findings of the error: "aria-hidden elements do not contain focusable elements"
      Show
      Install the "Axe" plugin for Google Chrome or Firefox Open your site dashboard Open developer tools Run Axe tool Confirm that there are no findings of the error: "aria-hidden elements do not contain focusable elements" Navigate to a course Re-run Axe Confirm that there are no findings of the error: "aria-hidden elements do not contain focusable elements" Turn editing on Re-run Axe Confirm that there are no findings of the error: "aria-hidden elements do not contain focusable elements" Open the activity chooser Re-run Axe Confirm that there are no findings of the error: "aria-hidden elements do not contain focusable elements" Close the activity chooser Re-run Axe Confirm that there are no findings of the error: "aria-hidden elements do not contain focusable elements" Re-open the activity chooser In the Developer tools console, run: newLink = document.createElement('a'); newLink.href="#"; newLink.innerHTML="Click me"; document.querySelector('#page-wrapper').appendChild(newLink); console.log(newLink); *Confirm that the Console shows something like the following: <a href="#" data-aria-hidden-tab-index="" tabindex="-1">Click me</a> undefined Right-click on the " <a href... " part and choose "Reveal in elements panel" Confirm that the tabindex has a value of " -1 " Re-run Axe Confirm that there are no findings of the error: "aria-hidden elements do not contain focusable elements" Close the activity chooser Find the new link in the Elements panel of the developer tools again Confirm that the tabindex has gone Open the messaging drawer Re-run Axe Confirm that there are no findings of the error: "aria-hidden elements do not contain focusable elements" Click on the name of your user Re-run Axe Confirm that there are no findings of the error: "aria-hidden elements do not contain focusable elements" Open the menu for that user (three dots) Click on the "Delete user" option Re-run Axe Confirm that there are no findings of the error: "aria-hidden elements do not contain focusable elements" Close messaging With the navigation drawer (Boost) open Re-run Axe Confirm that there are no findings of the error: "aria-hidden elements do not contain focusable elements" Close the navigation drawer Re-run Axe Confirm that there are no findings of the error: "aria-hidden elements do not contain focusable elements" Re-open the navigation drawer Navigate to your Dashboard Visit at least 4 courses so that the "Recently accessed courses block" has some content Navigate to your Dashboard (You should now have at least 4 courses visible* Re-run Axe Confirm that there are no findings of the error: "aria-hidden elements do not contain focusable elements" Go to the next page in the Recently access courses block Re-run Axe Confirm that there are no findings of the error: "aria-hidden elements do not contain focusable elements" At the bottom of the page choose the "Reset user tour on this page" Note: If you have disabled this default tour, then you will need to enable it from Site administration -> Appearance -> User tours Re-run Axe Confirm that there are no findings of the error: "aria-hidden elements do not contain focusable elements" Step through each part of the user tour Between each step: Re-run Axe Confirm that there are no findings of the error: "aria-hidden elements do not contain focusable elements" End the tour Re-run Axe Confirm that there are no findings of the error: "aria-hidden elements do not contain focusable elements"
    • Affected Branches:
      MOODLE_310_STABLE, MOODLE_37_STABLE, MOODLE_38_STABLE, MOODLE_39_STABLE
    • Fixed Branches:
      MOODLE_310_STABLE
    • Pull Master Branch:
      MDL-68390-master
    • Story Points:
      0
    • Sprint:
      International 4.0 - Sprint 1, International 4.0 - Sprint 2, International 4.0 - Sprint 3

      Description

      WCAG: 4.1.2
      User impact: Serious

      Using the aria-hidden="true" attribute on an element hides the element and all its children from screen readers and other assistive technologies. If the hidden element contains a focusable element, assistive technologies won't read the focusable element, but keyboard users will still be able to navigate to it, which can cause confusion.

      References:
      https://web.dev/aria-hidden-focus/
      https://dequeuniversity.com/rules/axe/3.5/aria-hidden-focus?application=AxeChrome

      Affects:

      • all modals created from core/modal AMD module

        Attachments

        1. activity-chooser-info-region.png
          166 kB
          Jun Pataleta
        2. image-2020-07-30-10-43-51-528.png
          155 kB
          Janelle Barcega
        3. Screenshot_1.png
          210 kB
          Janelle Barcega
        4. Screenshot_2.png
          205 kB
          Janelle Barcega
        5. Screenshot_3.png
          160 kB
          Janelle Barcega
        6. Screenshot_4.png
          120 kB
          Janelle Barcega
        7. Screenshot_5.png
          63 kB
          Janelle Barcega
        8. Screenshot_6.png
          155 kB
          Janelle Barcega

          Activity

            People

            Assignee:
            dobedobedoh Andrew Nicols
            Reporter:
            dobedobedoh Andrew Nicols
            Peer reviewer:
            Jun Pataleta
            Integrator:
            Eloy Lafuente (stronk7)
            Tester:
            Janelle Barcega
            Participants:
            Component watchers:
            Adrian Greeve, Jake Dallimore, Mathew May, Mihail Geshoski, Peter Dias
            Votes:
            2 Vote for this issue
            Watchers:
            6 Start watching this issue

              Dates

              Created:
              Updated:
              Resolved:
              Fix Release Date:
              9/Nov/20

                Time Tracking

                Estimated:
                Original Estimate - Not Specified
                Not Specified
                Remaining:
                Remaining Estimate - 0 minutes
                0m
                Logged:
                Time Spent - 1 day, 5 hours, 31 minutes
                1d 5h 31m