In the Moodle additions for the Bootstrap Dropdown we update the focus
after a 50ms delay. This is presumably because the targetted focus point
may not have shown yet and may be opened in a separate thread, though
sadly the original reasoning is not documented, and is not mentioned in
the original issues.
As a result of this delay, it was possible for the user to start to
interact and then have focus stolen from them. In reality this does not
happen often - 50ms is simply too short a time for a human to do so, but
it is plenty of time for Behat to do so and we have seen some random
fails as other parts of the UI become faster. When this happens,
keyboard focus tests are broken by this 50ms behaviour.
The fix here updates the shift focus function when closing the menu to
check whether the focus has changed from the previous location already
before setting the focus.
* The scroll value is not restored when we navigate into activities as only a
section of the page was scrolled.
* Remove the overflow for the page section so the full page is scrolled
* Restore side menu navigation synchronisation
Drawers have several JS logic depending on the screen size. However,
some generic components like action menu subpanels require fake drawers
to test the behaviour when it is displayed in a drawer (for example in a
block). This patch allow a behat page to have a div with data-region as
fixed-drawer so the component can detect as it is inside a a drawer but
without the autoclose on small screens.
Add a new global module to get information from the page. Some methods
are just local functions moved to as a global library. For example, the
drawers isSmall or isLarge to detect the page width. The other funcionts
added are to detect focusable elements and they are needed to loop on
elements, especially when accessibility keyboard navigation is implemented.
- It was a mistake to assume the listbox is always within
combobox.parentElement
- Take into account that the popup of the combobox is not necessarily a
listbox
- Update combobox fix so that it also work with comboboxes that are not
select-menu
- Update combobox fix so that it also support editable comboboxes
- Update click listener to take into account that the event's target
might be one of the option element
- Having a hidden input element for comboboxes was not an ARIA
requirement and was added by us. I added data-input-element to the
combobox element to specify the input element related to it.
Disables filipping the dropdowns up or dynamically repositioning
them along the y-axis to prevent them getting hidden behind the
navbar or them covering the trigger element.
The custom handling of Space and Enter for dropdowns that was added to
aria.js were not needed in the latests Bootstrap versions. So removed
them. Vanilla Bootstrap emulates click when Space or Enter keys are
pressed on a tab.
* Move the focus to the last menu item when the menu is displayed by
pressing the Up arrow key.
* When the menu is open and Tab/Shift-Tab is pressed, focus on the
next/previous focusable element on the DOM instead of focusing back on
the menu trigger.
* Combine event handling for the dropdown menu trigger.
Moodle announced that support for IE would be dropped back in August
2020 with Moodle 3.9 but not active steps were taken at that time. That
decision was made in MDLSITE-6109 and this particular step was meant to
be taken in Moodle 3.10.
This is the first step taken to actively drop support for IE.
This commit also bumps the browser support pattern from 0.25% to 0.3%.
The percentage here includes any browser where at least this percentage
of users worldwide may be using a browser. In this case it causes
support for Android 4.3-4.4 to be dropped, which relate to Android
KitKat (released 2013).
This combination of changes means that all of the supported browsers in
our compatibility list support modern features including async,
for...of, classes, native Promises, and more which has a huge impact on
the ease of debugging code, and drastically reduces the minified file
size because a number of native Polyfills included by Babel are no
longer included.
Unfortunately the babel minify-mangle plugin seems to be abandoned and
in certain circumstances can be very buggy. The only safe options are to
disable it, or to switch to a different minification library.
Not minifying our javascript is not ideal, so this commit updates the
javascript tasks to use a rollup, combined with babel, and terser.
Babel still converts code from ES/UMD/AMD to AMD modules with the
relevant browser support, whilst terser minifies the code.
The rollup bundler handles tracking and creation of sourcemaps, and
supports better parallelisation of the tasks.
Since the upgrade to Node LTS/Gallium requires an upgrade to @babel/core
and eslint, which change the built files anyway, this seems like the
ideal time to make this change.
