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

CSS changes for the moremenu

    XMLWordPrintable

Details

    • MOODLE_400_STABLE
    • MOODLE_311_STABLE
    • MDL-70792-311-2
    • 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

    Description

      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.

      Attachments

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

        Issue Links

          Activity

            People

              jpataleta Jun Pataleta
              basbrands Bas Brands
              Huong Nguyen Huong Nguyen
              Andrew Lyons Andrew Lyons
              Amaia Anabitarte Amaia Anabitarte
              Andrew Lyons, Huong Nguyen, Jun Pataleta, Michael Hawkins, Shamim Rezaie, Simey Lameze, Stevani Andolo, Andrew Lyons, Huong Nguyen, Jun Pataleta, Michael Hawkins, Shamim Rezaie, Simey Lameze, Stevani Andolo, Adrian Greeve, Jake Dallimore, Mathew May, Mihail Geshoski, Sujith Haridasan, Huong Nguyen, Bas Brands, Mathew May
              Votes:
              0 Vote for this issue
              Watchers:
              12 Start watching this issue

              Dates

                Created:
                Updated:
                Resolved:
                14/Mar/22

                Time Tracking

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