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

Primary navigation with custom menu items - Keyboard navigation problem

XMLWordPrintable

    • MOODLE_404_STABLE

      Problems occur navigating with the keyboard in the primary navigation menu when custom items and sub-items are configured using the custommenuitems parameter.

      When custom dropdown items are placed in the "More" item because of the limited screen width, the sub-items can't be accessed with the keyboard, or opening the dropdown item causes the "More" item to be closed, hence disturbing the keyboard navigation.

      In the following screenshot :

      • When trying to open the "Courses" dropdown with the down arrow, the "More" dropdown is closed.
      • When opening the "Courses" dropdown with the Enter key, the sub-items are shown, but when trying to navigate through them with the down arrow, the "More" dropdown is closed.

      Steps to reproduce

      (Discovered on Moodle 4.4.4 installation using Boost theme, but also problematic on a 4.5 installation.)

      • In the site administration, search for the custommenuitems setting (/admin/search.php?query=custommenuitems)
      • Edit the custommenuitems field to be the given example : 

      Courses
      -All courses|/course/
      -Course search|/course/search.php
      -###
      -FAQ|https://example.org/faq
      -Preguntas más frecuentes|https://example.org/pmf||es
      Mobile app|https://example.org/app|Download our app 

      * Save changes.

      • Resize the browser so "Courses" and "Mobile app" get placed in the "More" dropdown (approx. between 775px and 950px).
      • Navigate using the keyboard (Tab) to the primary navigation.
      • When the focus is in the primary navigation, use the right arrow to navigate to "More".
      • Use the down arrow or Enter key to open the "More" dropdown.
      • Navigate to the "Courses" dropdown using the down arrow (if necessary) : 
        • Use the down arrow to open the "Courses" dropdown. The "More" dropdown gets closed.
        • Use Enter key to open the "Courses" dropdown. The sub-items are shown, but when trying to navigate through them with the down arrow, the "More" dropdown gets closed.

            Unassigned Unassigned
            yveshelie Yves Hélie
            Votes:
            1 Vote for this issue
            Watchers:
            5 Start watching this issue

              Created:
              Updated:

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