From da2f2c9c4593c3ca6d74914350edd2918900642b Mon Sep 17 00:00:00 2001 From: Laurent David Date: Wed, 24 May 2023 10:29:14 +0200 Subject: [PATCH] MDL-75762 core_courseformat: Fix accessibility issue * Reverse the changes in MDL-74740 to fix left drawer issue (drawer was scrolling with the page) --- grade/tests/behat/behat_grade.php | 2 ++ grade/tests/behat/behat_grades.php | 4 +++- lib/tests/behat/behat_navigation.php | 33 +++++++++++++++++++++++++++- lib/upgrade.txt | 3 +++ theme/boost/layout/drawers.php | 2 +- theme/boost/scss/moodle/drawer.scss | 16 +++++++------- theme/boost/style/moodle.css | 13 +++++------ theme/classic/style/moodle.css | 13 +++++------ 8 files changed, 59 insertions(+), 27 deletions(-) diff --git a/grade/tests/behat/behat_grade.php b/grade/tests/behat/behat_grade.php index 72cc3e67743..42d3a0ae48d 100644 --- a/grade/tests/behat/behat_grade.php +++ b/grade/tests/behat/behat_grade.php @@ -40,6 +40,7 @@ class behat_grade extends behat_base { * @param string $itemname */ public function i_give_the_grade($grade, $userfullname, $itemname) { + $this->execute('behat_navigation::i_close_block_drawer_if_open'); $gradelabel = $userfullname . ' ' . $itemname; $fieldstr = get_string('useractivitygrade', 'gradereport_grader', $gradelabel); @@ -58,6 +59,7 @@ class behat_grade extends behat_base { * @param TableNode $data */ public function i_set_the_following_settings_for_grade_item(string $gradeitem, string $type, string $page, TableNode $data) { + $this->execute("behat_navigation::i_close_block_drawer_if_open"); if ($this->running_javascript()) { $this->execute("behat_grades::i_click_on_grade_item_menu", [$gradeitem, $type, $page]); diff --git a/grade/tests/behat/behat_grades.php b/grade/tests/behat/behat_grades.php index 9deeef2762b..655048dfc33 100644 --- a/grade/tests/behat/behat_grades.php +++ b/grade/tests/behat/behat_grades.php @@ -225,7 +225,7 @@ class behat_grades extends behat_base { * @throws Exception */ public function i_click_on_grade_item_menu(string $itemname, string $itemtype, string $page) { - + $this->execute("behat_navigation::i_close_block_drawer_if_open"); if ($itemtype == 'gradeitem') { $itemid = $this->get_grade_item_id($itemname); } else if ($itemtype == 'category') { @@ -253,6 +253,8 @@ class behat_grades extends behat_base { } else { throw new Exception('Unknown page: ' . $page); } + $node = $this->get_selected_node("xpath_element", $this->escape($xpath)); + $this->execute_js_on_node($node, '{{ELEMENT}}.scrollIntoView({ block: "center", inline: "center" })'); $this->execute("behat_general::i_click_on", [$this->escape($xpath), "xpath_element"]); } } diff --git a/lib/tests/behat/behat_navigation.php b/lib/tests/behat/behat_navigation.php index f14bcbf4cd0..891c434c9a8 100644 --- a/lib/tests/behat/behat_navigation.php +++ b/lib/tests/behat/behat_navigation.php @@ -29,7 +29,6 @@ require_once(__DIR__ . '/../../behat/behat_base.php'); use Behat\Mink\Element\NodeElement; use Behat\Mink\Exception\ExpectationException as ExpectationException; -use Behat\Mink\Exception\DriverException as DriverException; use Behat\Mink\Exception\ElementNotFoundException as ElementNotFoundException; /** @@ -1510,4 +1509,36 @@ class behat_navigation extends behat_base { ); } } + + /** + * Close the block drawer if it is open. + * + * This is necessary as in Behat the block drawer is open at each page load (disregarding user's settings) + * As the block drawer is positioned at the front of some contextual dialogs on the grade report for example. + * @Given I close block drawer if open + * @return void + */ + public function i_close_block_drawer_if_open() { + if ($this->running_javascript()) { + $xpath = "//button[contains(@data-action,'closedrawer')][contains(@data-placement,'left')]"; + $node = $this->getSession()->getPage()->find('xpath', $xpath); + if ($node && $node->isVisible()) { + $ishidden = $node->getAttribute('aria-hidden-tab-index'); + if (!$ishidden) { + $this->execute('behat_general::i_click_on', [$node, 'NodeElement']); + } + } + } + } + + /** + * I close the block drawer and keep it closed. + * + * @Given I keep block drawer closed + * @return void + */ + public function i_keep_block_drawer_closed() { + set_user_preference('behat_keep_drawer_closed', 1); + $this->i_close_block_drawer_if_open(); + } } diff --git a/lib/upgrade.txt b/lib/upgrade.txt index d3b98f88f60..668dbab053a 100644 --- a/lib/upgrade.txt +++ b/lib/upgrade.txt @@ -71,6 +71,9 @@ information provided here is intended especially for developers. * The moodle-core-notification-confirm module, found under the M.core.confirm namespace, has been deprecated. Any code using it should be rewritten as an ESM and use the core/notification module instead. See MDL-77174 for further information. +* New behat behat_navigation::i_close_block_drawer_if_open() and behat_navigation::i_keep_block_drawer_closed() +to ensure in some test that the block drawer is closed. This helps with random failures due to the block drawer +being forced open in all behat tests. === 4.2 === diff --git a/theme/boost/layout/drawers.php b/theme/boost/layout/drawers.php index bd8b502d43c..d442c4d0736 100644 --- a/theme/boost/layout/drawers.php +++ b/theme/boost/layout/drawers.php @@ -41,7 +41,7 @@ if (isloggedin()) { $blockdraweropen = false; } -if (defined('BEHAT_SITE_RUNNING')) { +if (defined('BEHAT_SITE_RUNNING') && get_user_preferences('behat_keep_drawer_closed') != 1) { $blockdraweropen = true; } diff --git a/theme/boost/scss/moodle/drawer.scss b/theme/boost/scss/moodle/drawer.scss index a8cc7020975..c915b397d8c 100644 --- a/theme/boost/scss/moodle/drawer.scss +++ b/theme/boost/scss/moodle/drawer.scss @@ -161,7 +161,7 @@ $right-drawer-width: 320px; @mixin drawer() { @include transition(left 0.2s ease, right 0.2s ease, top 0.2s ease, bottom 0.2s ease, visibility 0.2s ease); background-color: $drawer-bg-color; - z-index: $zindex-modal; + z-index: $zindex-fixed; position: fixed; height: 100vh; top: 0; @@ -221,15 +221,15 @@ $right-drawer-width: 320px; @include media-breakpoint-up(lg) { .drawer { - z-index: inherit; - + // Make sure that in large screens the drawer goes under the drop down menus. + z-index: $zindex-dropdown - 1; // Workaround to display the skip link elements from the blocks drawer infront of the navbar. + // As the skip link is in a fixed position and z-index for this element is ignored + // then it is hidden behind the top navbar. + // The workaround is to actually give a z-index to the drawer so it appears in front of the + // navbar (https://developer.mozilla.org/en-US/docs/Web/CSS/z-index). &#theme_boost-drawers-blocks:focus-within { - position: absolute; - - .drawercontent { - z-index: auto; - } + z-index: $zindex-fixed + 1; } &.not-initialized { diff --git a/theme/boost/style/moodle.css b/theme/boost/style/moodle.css index cb6d04b3119..c800a9e3a8d 100644 --- a/theme/boost/style/moodle.css +++ b/theme/boost/style/moodle.css @@ -29726,7 +29726,7 @@ body.drawer-ease { .drawer { transition: left 0.2s ease, right 0.2s ease, top 0.2s ease, bottom 0.2s ease, visibility 0.2s ease; background-color: #f8f9fa; - z-index: 1050; + z-index: 1030; position: fixed; height: 100vh; top: 0; @@ -29776,13 +29776,10 @@ body.drawer-ease { @media (min-width: 992px) { .drawer { - z-index: inherit; + z-index: 999; } .drawer#theme_boost-drawers-blocks:focus-within { - position: absolute; - } - .drawer#theme_boost-drawers-blocks:focus-within .drawercontent { - z-index: auto; + z-index: 1031; } .drawer.not-initialized { display: block; @@ -29809,7 +29806,7 @@ body.drawer-ease { display: block; transition: left 0.2s ease, right 0.2s ease, top 0.2s ease, bottom 0.2s ease, visibility 0.2s ease; background-color: #f8f9fa; - z-index: 1050; + z-index: 1030; position: fixed; height: 100vh; top: 0; @@ -29870,7 +29867,7 @@ body.drawer-ease { display: block; transition: left 0.2s ease, right 0.2s ease, top 0.2s ease, bottom 0.2s ease, visibility 0.2s ease; background-color: #f8f9fa; - z-index: 1050; + z-index: 1030; position: fixed; height: 100vh; top: 0; diff --git a/theme/classic/style/moodle.css b/theme/classic/style/moodle.css index dbfdc71d402..5a7103ffcd3 100644 --- a/theme/classic/style/moodle.css +++ b/theme/classic/style/moodle.css @@ -29726,7 +29726,7 @@ body.drawer-ease { .drawer { transition: left 0.2s ease, right 0.2s ease, top 0.2s ease, bottom 0.2s ease, visibility 0.2s ease; background-color: #f8f9fa; - z-index: 1050; + z-index: 1030; position: fixed; height: 100vh; top: 0; @@ -29776,13 +29776,10 @@ body.drawer-ease { @media (min-width: 992px) { .drawer { - z-index: inherit; + z-index: 999; } .drawer#theme_boost-drawers-blocks:focus-within { - position: absolute; - } - .drawer#theme_boost-drawers-blocks:focus-within .drawercontent { - z-index: auto; + z-index: 1031; } .drawer.not-initialized { display: block; @@ -29809,7 +29806,7 @@ body.drawer-ease { display: block; transition: left 0.2s ease, right 0.2s ease, top 0.2s ease, bottom 0.2s ease, visibility 0.2s ease; background-color: #f8f9fa; - z-index: 1050; + z-index: 1030; position: fixed; height: 100vh; top: 0; @@ -29870,7 +29867,7 @@ body.drawer-ease { display: block; transition: left 0.2s ease, right 0.2s ease, top 0.2s ease, bottom 0.2s ease, visibility 0.2s ease; background-color: #f8f9fa; - z-index: 1050; + z-index: 1030; position: fixed; height: 100vh; top: 0;