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

CSS changes for the moremenu

XMLWordPrintable

    • MOODLE_400_STABLE
    • MOODLE_311_STABLE
    • MDL-70792-master-2
    • Hide

      Master

      More menu - Mouse interaction
      1. Navigate to the Site administration page.
      2. Make the browser width a bit narrow to make the More menu appear.
      3. Click the More menu
      4. Confirm that the first nav item is not focused/highlighted
      5. Hover on the items inside the More menu.
      6. Confirm that the item that the mouse is on gets highlighted
      7. Click Development
      8. Open the More menu
      9. Confirm that there is a checkmark beside the Development menu item
      10. Close the More menu
      More menu - Keyboard navigation
      1. Navigate to the More menu with keyboard navigation (e.g. tab to the secondary navigation menubar then press right arrow keys to go to the More menu.)
      2. Confirm that you can open the more menu via the following keys: Up, Down, Enter, Space
      3. Confirm that the following element is being focused on when the More menu is opened:
        • Down, Enter, Space: The first menu item is focused/highlighted
        • Up: The last menu item is focused/highlighted
      4. Inside the More menu, press Up until the first menu gets focused. Press Up again.
      5. Confirm that the focus moves to the last menu item.
      6. Still inside the More menu, press Down until the last menu item gets focused. Press Down again.
      7. Confirm that the focus moves to the first menu item.
      8. Press Escape
      9. Confirm that the More menu closes and the focus outline is on the More menu button.
      10. Confirm you can reopen the More menu via the Up, Down, Space, or Enter keys.
      11. Open the More menu again.
      12. Assuming you're on the Development tab with the More menu open, press the Tab key.
      13. Confirm the More menu closes.
      14. Confirm that the focus goes to the Debugging link.

      311 and master

      Action menu - Mouse interaction
      1. Go to Site administration / Users / Privacy and policies / Data registry
      2. Click the "Edit" menu button right beside the "Set defaults" button
      3. Confirm that the first menu item is not focused/highlighted when the Edit menu opens
      4. Hover on the items inside the Edit menu.
      5. Confirm that the item that the mouse is on gets highlighted
      Action menu - Keyboard navigation
      1. Go to Site administration / Users / Privacy and policies / Data registry
      2. Navigate to the Edit menu button with keyboard navigation (e.g. via tabbing until you reach the Edit menu button)
      3. Confirm that you can open the Edit menu via the following keys: Up, Down, Enter, Space
      4. Confirm that the following element is being focused on when the Edit menu is opened:
        • Down, Enter, Space: The first menu item is focused/highlighted
        • Up: The last menu item is focused/highlighted
      5. Inside the Edit menu, press Up until the first menu gets focused. Press Up again.
      6. Confirm that the focus moves to the last menu item.
      7. Still inside the Edit menu, press Down until the last menu item gets focused. Press Down again.
      8. Confirm that the focus moves to the first menu item.
      9. Press Escape
      10. Confirm that the Edit menu closes and the focus outline is on the Edit menu button.
      11. Confirm you can reopen the Edit menu via the Up, Down, Space, or Enter keys.
      12. Open the Edit menu again.
      13. Press the Tab key.
      14. Confirm the More menu closes.
      15. Confirm that the focus goes to the Site node of the data registry tree.
      16. Go back to the Edit menu button and open it
      17. Press Shift-Tab
      18. Confirm the Edit menu button gets focused and the Edit menu remains open.
      19. Press Shift-Tab again
      20. Confirm that the focus goes to Set defaults and the Edit menu closes.
      Show
      Master More menu - Mouse interaction Navigate to the Site administration page. Make the browser width a bit narrow to make the More menu appear. Click the More menu Confirm that the first nav item is not focused/highlighted Hover on the items inside the More menu. Confirm that the item that the mouse is on gets highlighted Click Development Open the More menu Confirm that there is a checkmark beside the Development menu item Close the More menu More menu - Keyboard navigation Navigate to the More menu with keyboard navigation (e.g. tab to the secondary navigation menubar then press right arrow keys to go to the More menu.) Confirm that you can open the more menu via the following keys: Up, Down, Enter, Space Confirm that the following element is being focused on when the More menu is opened: Down, Enter, Space: The first menu item is focused/highlighted Up: The last menu item is focused/highlighted Inside the More menu, press Up until the first menu gets focused. Press Up again. Confirm that the focus moves to the last menu item. Still inside the More menu, press Down until the last menu item gets focused. Press Down again. Confirm that the focus moves to the first menu item. Press Escape Confirm that the More menu closes and the focus outline is on the More menu button. Confirm you can reopen the More menu via the Up, Down, Space, or Enter keys. Open the More menu again. Assuming you're on the Development tab with the More menu open, press the Tab key. Confirm the More menu closes. Confirm that the focus goes to the Debugging link. 311 and master Action menu - Mouse interaction Go to Site administration / Users / Privacy and policies / Data registry Click the " Edit " menu button right beside the " Set defaults " button Confirm that the first menu item is not focused/highlighted when the Edit menu opens Hover on the items inside the Edit menu. Confirm that the item that the mouse is on gets highlighted Action menu - Keyboard navigation Go to Site administration / Users / Privacy and policies / Data registry Navigate to the Edit menu button with keyboard navigation (e.g. via tabbing until you reach the Edit menu button) Confirm that you can open the Edit menu via the following keys: Up, Down, Enter, Space Confirm that the following element is being focused on when the Edit menu is opened: Down, Enter, Space: The first menu item is focused/highlighted Up: The last menu item is focused/highlighted Inside the Edit menu, press Up until the first menu gets focused. Press Up again. Confirm that the focus moves to the last menu item. Still inside the Edit menu, press Down until the last menu item gets focused. Press Down again. Confirm that the focus moves to the first menu item. Press Escape Confirm that the Edit menu closes and the focus outline is on the Edit menu button. Confirm you can reopen the Edit menu via the Up, Down, Space, or Enter keys. Open the Edit menu again. Press the Tab key. Confirm the More menu closes. Confirm that the focus goes to the Site node of the data registry tree. Go back to the Edit menu button and open it Press Shift-Tab Confirm the Edit menu button gets focused and the Edit menu remains open. Press Shift-Tab again Confirm that the focus goes to Set defaults and the Edit menu closes.
    • 3
    • Navigation push 10, Navigation push 11, HQ Team International CIH2-218

      Apply styles provided by the UX team to the moremenu.

      if the dropdown menu is shown via keyboard, the first item should receive highlight/focus. But when it's opened via mouse, there should be no highlight by default except for the item being hovered by the mouse pointer.

      Mathew pointed me to this issue from MDL-73361 as it covers one of the points. I'll add the other two:

      1. When clicking a tab, there is a blue outline instead of just a line at the bottom. Can we please remove the blue outline?
      2. When something is selected we need a tick (not a highlighted cell).

      All of these changes should also extend to the user menu.

        1. 2022-01-11_09-28-23.mp4
          2.34 MB
        2. double highlights.png
          double highlights.png
          131 kB
        3. image-2022-02-25-09-50-34-675.png
          image-2022-02-25-09-50-34-675.png
          9 kB
        4. image-2022-02-25-09-54-16-770.png
          image-2022-02-25-09-54-16-770.png
          23 kB
        5. image-2022-02-25-09-59-15-039.png
          image-2022-02-25-09-59-15-039.png
          21 kB
        6. image-2022-02-25-10-02-08-722.png
          image-2022-02-25-10-02-08-722.png
          37 kB
        7. image-2022-02-25-11-13-59-065.png
          image-2022-02-25-11-13-59-065.png
          13 kB
        8. image-2022-02-25-11-16-28-144.png
          image-2022-02-25-11-16-28-144.png
          22 kB
        9. image-2022-02-25-11-16-42-489.png
          image-2022-02-25-11-16-42-489.png
          26 kB

            jpataleta Jun Pataleta
            basbrands Bas Brands
            Huong Nguyen Huong Nguyen
            Andrew Lyons Andrew Lyons
            Amaia Anabitarte Amaia Anabitarte
            Votes:
            0 Vote for this issue
            Watchers:
            12 Start watching this issue

              Created:
              Updated:
              Resolved:

                Estimated:
                Original Estimate - 0 minutes
                0m
                Remaining:
                Remaining Estimate - 0 minutes
                0m
                Logged:
                Time Spent - 4 days, 2 hours, 41 minutes
                4d 2h 41m

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