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

WCAG 4.1.2: aria-hidden elements contain focusable elements

XMLWordPrintable

    • MOODLE_310_STABLE, MOODLE_37_STABLE, MOODLE_38_STABLE, MOODLE_39_STABLE
    • MOODLE_310_STABLE
    • MDL-68390-master
    • 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"
    • 0
    • International 4.0 - Sprint 1, International 4.0 - Sprint 2, International 4.0 - Sprint 3

      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

        1. activity-chooser-info-region.png
          activity-chooser-info-region.png
          166 kB
        2. image-2020-07-30-10-43-51-528.png
          image-2020-07-30-10-43-51-528.png
          155 kB
        3. Screenshot_1.png
          Screenshot_1.png
          210 kB
        4. Screenshot_2.png
          Screenshot_2.png
          205 kB
        5. Screenshot_3.png
          Screenshot_3.png
          160 kB
        6. Screenshot_4.png
          Screenshot_4.png
          120 kB
        7. Screenshot_5.png
          Screenshot_5.png
          63 kB
        8. Screenshot_6.png
          Screenshot_6.png
          155 kB
        1.
        		 Message-drawer gets focus while hidden Sub-task Closed Unassigned

            dobedobedoh Andrew Lyons
            dobedobedoh Andrew Lyons
            Jun Pataleta Jun Pataleta
            Eloy Lafuente (stronk7) Eloy Lafuente (stronk7)
            Janelle Barcega Janelle Barcega
            Votes:
            2 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 - 1 day, 5 hours, 31 minutes
                1d 5h 31m

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