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

Checkmarks on tertiarynavigation display inconsistently after navigating via back button (bfcache)

XMLWordPrintable

    • MOODLE_401_STABLE, MOODLE_403_STABLE, MOODLE_405_STABLE
    • MDL-82625-main
    • Hide

      Test combobox with redirect (Tertiary Navigation)

      1. Navigate to a course in Moodle.
      2. Go to the "Grades" page from the secondary navigation.
      3. Open the "Grader report" combobox and select "Export" from the menu.
      4. Verify that you have been redirected to the Export page and that the Export menu item is active with a checkmark.
      5. Select "Gradebook setup" from the "Export" combobox
      6. Verify that you have been redirected to the "Gradebook setup" page and that the Gradebook setup menu item is active with a checkmark.
      7. Select "Import" from the "Gradebook setup" combobox
      8. Verify that you have been redirected to the "Import" page and that the "Import" menu item is active with a checkmark.
      9. Press the back button.
      10. Verify that you are now on the "Gradebook setup" page and that the "Gradebook setup" menu item is active with a checkmark.
      11. Press the back button.
      12. Verify that you are now on the "Export" page and that the "Export" menu item is active with a checkmark.
      13. Perform exploratory testing on other pages with tertiary navigation, such as Participants, Grades, Reports, and Course reuse.

      Test normal combobox with no redirect

      1. Go to Site administration > Development > Template library
      2. Search for 'select_menu' template
      3. Click on "core/select_menu"
      4. Open the combobox 
      5. Select any option
      6. Verify that the option you selected is marked as active with a checkmark
      Show
      Test combobox with redirect (Tertiary Navigation) Navigate to a course in Moodle. Go to the "Grades" page from the secondary navigation. Open the "Grader report" combobox and select "Export" from the menu. Verify that you have been redirected to the Export page and that the Export menu item is active with a checkmark. Select "Gradebook setup"  from the  "Export" combobox Verify that you have been redirected to the "Gradebook setup" page and that the Gradebook setup menu item is active with a checkmark. Select "Import"  from the  "Gradebook setup" combobox Verify that you have been redirected to the "Import" page and that the "Import" menu item is active with a checkmark. Press the back button. Verify that you are now on the "Gradebook setup" page and that the "Gradebook setup" menu item is active with a checkmark. Press the back button. Verify that you are now on the "Export" page and that the "Export" menu item is active with a checkmark. Perform exploratory testing on other pages with tertiary navigation, such as Participants, Grades, Reports, and Course reuse. Test normal combobox with no redirect Go to Site administration > Development > Template library Search for 'select_menu' template Click on "core/select_menu" Open the combobox  Select any option Verify that the option you selected is marked as active with a checkmark
    • Hide

      Code verified against automated checks.

      Checked MDL-82625 using repository: https://github.com/tsmilan/moodle.git

      More information about this report

      Built on: Tue 05 Nov 2024 06:59:56 AM UTC

      Show
      Code verified against automated checks. Checked MDL-82625 using repository: https://github.com/tsmilan/moodle.git main (0 errors / 0 warnings) [branch: MDL-82625-main | CI Job ] More information about this report Built on: Tue 05 Nov 2024 06:59:56 AM UTC
    • Hide

      Launching automatic jobs for branch MDL-82625-main

      Built on: Mon Oct 21 10:25:13 PM UTC 2024

      Show
      Launching automatic jobs for branch MDL-82625 -main https://ci.moodle.org/view/Testing/job/DEV.02%20-%20Developer-requested%20PHPUnit/17077/ PHPUnit (sqlsrv) https://ci.moodle.org/view/Testing/job/DEV.01%20-%20Developer-requested%20Behat/58142/ Behat (NonJS - boost and classic) https://ci.moodle.org/view/Testing/job/DEV.01%20-%20Developer-requested%20Behat/58143/ Behat (Firefox - boost) https://ci.moodle.org/view/Testing/job/DEV.01%20-%20Developer-requested%20Behat/58144/ Behat (Firefox - classic) https://ci.moodle.org/view/Testing/job/DEV.01%20-%20Developer-requested%20Behat/58145/ App tests (stable app version) Built on: Mon Oct 21 10:25:13 PM UTC 2024

      Bug Description

      There is an observed bug in the tertiary menu navigation functionality of Moodle where checkmarks indicating the current menu item active does not correspond with the current page after bfcache.

      This issue arises specifically when using the back and forward buttons in the browser. As a result, the previous menu item stays active (with checkmarks) when the current page is actually different which represents a significant accessibility issue.

      Steps to Reproduce

      1. Navigate to a course in Moodle (single activity format / multitopic).
      2. Click on a menu with tertiary menu navigation item (e.g., "Grades", "Results", "Question Bank", "Course reuse").
      3. Click now on one of the options in the dropdown menu.
      4. Use the browser's back button to return to the previous page.
      5. Observe the checkmarks remains on the previous menu item selected.
      6. Observe the top menu item remains unchanged.

      Following pictures showing an example with the Grades menu item:

      • Single view report is selected on this scree.

      • Then, 'Grade summary' is selected from the tertiary menu navigation and page changes as expected.

      • User navigates by clicking on the browser's back button. Page changes as expected to the single view report. However, the top menu displayed belongs to the previous page 'Grade summary'

      • Expanding the dropdown, it can be seen that 'Grade summary' is shown as active.

      Analysis

      The root cause of the issue here is similar but distinct to that reported in MDL-82298. In this instance the checkmarks are controlled by aria.js in theme_boost. The dropdown itself is a "combobox", which in of itself does not redirect to another page. So adding the checkmarks is totally valid, and it's done here: https://github.com/moodle/moodle/blob/a320dff7362544349f884a423319148a259cdad3/theme/boost/amd/src/aria.js#L373-L377

      However, in this instance (and probably others in core) there is additional JavaScript which redirects the user when the item is selected.

      This results in exactly the same situation as MDL-82298. i.e., the checkmark is added and then the user is immediately navigated away from the page. If they press the back button and the previous page is served from the browser's cache, then the erroneously added checkmark is still present.

      Solution

      Unfortunately theme_boost's aria.js does not have a mechanism to disable the adding of checkmarks. So probably we'd have to implement something similar to  the disableactive thing which was used in MDL-82298.

        1. Screenshot from 2024-07-29 07-58-41.png
          43 kB
          Jose Pico
        2. Screenshot from 2024-07-29 07-59-47.png
          11 kB
          Jose Pico
        3. Screenshot from 2024-07-29 08-00-29.png
          20 kB
          Jose Pico
        4. Screenshot from 2024-07-29 08-02-01.png
          31 kB
          Jose Pico

            trishamilan Trisha Milan
            josepico Jose Pico
            cameron1729 cameron1729
            Jun Pataleta Jun Pataleta
            Votes:
            0 Vote for this issue
            Watchers:
            5 Start watching this issue

              Created:
              Updated:

                Estimated:
                Original Estimate - Not Specified
                Not Specified
                Remaining:
                Remaining Estimate - 0 minutes
                0m
                Logged:
                Time Spent - 1 hour, 41 minutes
                1h 41m

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