-
Improvement
-
Resolution: Fixed
-
Major
-
4.3
-
MOODLE_403_STABLE
-
MOODLE_403_STABLE
-
MDL-78954-master -
To the testers: Please be aware that there were some bugs in the action menu for RLT languages that were not related to this patch. I will provide further details about these issues in the testing instructions.
Tests setup
- Install an RTL language like Hebrew but keep the main language in english.
- Copy the attached MDL-78954-testpage.php
to the root of your instance - Log in to the instance and go to your LOCAL/
MDL-78954-testpage.php to display the test page.
LTR test
- Open the first action menu (Basic example)
- Check the last two items have a > chevron.
- Put the mouse over the "Subpanel example" on the opened menu
- Check the subpanel has a poping effect when appears.
- Check the subpanel drops shadow
- Now click the second action menu (Menu left)
- Check the last two items have a > chevron.
- Click the third action menu (Menu item with icon)
- Check the last two items have a > chevron.
- Click the fourth action menu (Drawer like example)
- Check the last two items have a > chevron.
- Click "Subpanel example" on the opened menu
- Check the subpanel has a poping effect when appears.
- Check the subpanel drops shadow
Test reduced motion
You can either test in reduced motion by:
Option A: Emulating reduced motion
- Emulate the prefers-reduced-motion media in the browser. Each browser do it differently (and it is not easy to find):
- Chrome (extract form https://learn.microsoft.com/en-us/microsoft-edge/devtools-guide-chromium/accessibility/reduced-motion-simulation ):
- Open the inspector (F12)
- Press Ctrl+Shift+P on Windows/Linux or Command+Shift+P on macOS to open the Command Menu.
- Write "reduced" and select "Emulate CSS prefers-reduced-motion"
- Refresh the page.
- Firefox:
- Open a new tab and go the direction "about:config"
- In the search bar, type "ui.prefersReducedMotion"
- If the value is already created, set it to 1
- If the value is not created, create as a number and set it to 1
- Refresh the page
- Chrome (extract form https://learn.microsoft.com/en-us/microsoft-edge/devtools-guide-chromium/accessibility/reduced-motion-simulation ):
Note: Most probably you want to restore the browser motion. Do do so:
- Chrome:
- Open the inspector (F12)
- Press Ctrl+Shift+P on Windows/Linux or Command+Shift+P on macOS to open the Command Menu.
- Write "reduced" and select any option similar to "Disable Emulate CSS prefers-reduced-motion"
- Firefox:
- Open a new tab and go the direction "about:config"
- In the search bar, type "ui.prefersReducedMotion"
- Remove the entry
Option B: Turning off animation (Windows)
- If you can access your Moodle instance via Windows, you can go to Settings > Ease of Access > Display
- Turn off "Show animations in Windows"
Testing in reduced motion
- Open the first action menu (basic example)
- Hover the "subpanel example" item to open the subpanel
- Check the subpanel opens with no pop effect
Test RTL
- Change the language to any RTL language like Hebrew
- Open the first action menu (Basic example)
- Check the last two items have a < chevron.
- Now click the second action menu (Menu left). Note: the action menu width is not displayed correctly in RTL but is unrelated to this issue.
- Check the last two items have a < chevron.
- Click the third action menu (Menu item with icon)
- Check the last two items have a < chevron.
- Click the fourth action menu (Drawer like example)
- Check the last two items have a < chevron.
To the testers: Please be aware that there were some bugs in the action menu for RLT languages that were not related to this patch. I will provide further details about these issues in the testing instructions. Tests setup Install an RTL language like Hebrew but keep the main language in english. Copy the attached MDL-78954-testpage.php to the root of your instance Log in to the instance and go to your LOCAL/ MDL-78954 -testpage.php to display the test page. LTR test Open the first action menu (Basic example) Check the last two items have a > chevron. Put the mouse over the "Subpanel example" on the opened menu Check the subpanel has a poping effect when appears. Check the subpanel drops shadow Now click the second action menu (Menu left) Check the last two items have a > chevron. Click the third action menu (Menu item with icon) Check the last two items have a > chevron. Click the fourth action menu (Drawer like example) Check the last two items have a > chevron. Click "Subpanel example" on the opened menu Check the subpanel has a poping effect when appears. Check the subpanel drops shadow Test reduced motion You can either test in reduced motion by: Option A: Emulating reduced motion Emulate the prefers-reduced-motion media in the browser. Each browser do it differently (and it is not easy to find): Chrome (extract form https://learn.microsoft.com/en-us/microsoft-edge/devtools-guide-chromium/accessibility/reduced-motion-simulation ): Open the inspector (F12) Press Ctrl+Shift+P on Windows/Linux or Command+Shift+P on macOS to open the Command Menu. Write "reduced" and select "Emulate CSS prefers-reduced-motion" Refresh the page. Firefox: Open a new tab and go the direction " about:config " In the search bar, type " ui.prefersReducedMotion " If the value is already created, set it to 1 If the value is not created, create as a number and set it to 1 Refresh the page Note: Most probably you want to restore the browser motion. Do do so: Chrome: Open the inspector (F12) Press Ctrl+Shift+P on Windows/Linux or Command+Shift+P on macOS to open the Command Menu. Write "reduced" and select any option similar to "Disable Emulate CSS prefers-reduced-motion" Firefox: Open a new tab and go the direction " about:config " In the search bar, type " ui.prefersReducedMotion " Remove the entry Option B: Turning off animation (Windows) If you can access your Moodle instance via Windows, you can go to Settings > Ease of Access > Display Turn off " Show animations in Windows " Testing in reduced motion Open the first action menu (basic example) Hover the "subpanel example" item to open the subpanel Check the subpanel opens with no pop effect Test RTL Change the language to any RTL language like Hebrew Open the first action menu (Basic example) Check the last two items have a < chevron. Now click the second action menu (Menu left). Note: the action menu width is not displayed correctly in RTL but is unrelated to this issue . Check the last two items have a < chevron. Click the third action menu (Menu item with icon) Check the last two items have a < chevron. Click the fourth action menu (Drawer like example) Check the last two items have a < chevron.
-
3
-
HQ 2023 Sprint I3.1 Moppies
In MDL-78290, a new action menu subpanel was introduced. The new component adds subpanels associated with action menu items displayed on hover, focus or click.
After a UX review, the current visualizations of the subpanels should have some improvements to make them more consistent and noticeable.
The complete list of the proposed improvements are:
- The menu item shows a chevron pointing to the position where the sub panel will open. However, when the menu item has an icon, the item is displaced to the right and not correctly aligned. This is not correct. It is considered a UX standard that when a menu item has a subpanel, the chevron always points to the right (or left in RTL), no matter where the subpanel opens.
- There is no effect when the subpanels open. and it is noticeable enough. Showing a sub-panel should have some effect.
- The panel is floating over the content, but it should have a shadow.
