From 29c77d97a3397525d6c295bfd3e34556e220e0bc Mon Sep 17 00:00:00 2001
From: Mihail Geshoski <mihail@moodle.com>
Date: Fri, 1 Jul 2022 01:16:13 +0800
Subject: [PATCH] MDL-74740 boost: Display the skip links from the blocks
 drawer

Due to fixed positioning of the block drawer and the navbar, the
z-index css property on the skip link elements from the drawer
is not respected. This ultimately results in the skip links being
stacked behind the navbar. As a workaround, an absolute positioning
will be temporary applied to the block drawer once the current
focus is on an element within the drawer which will stack the
skip links infront of the navbar.
---
 theme/boost/scss/moodle/drawer.scss | 9 +++++++++
 theme/boost/style/moodle.css        | 4 ++++
 theme/classic/style/moodle.css      | 4 ++++
 3 files changed, 17 insertions(+)

diff --git a/theme/boost/scss/moodle/drawer.scss b/theme/boost/scss/moodle/drawer.scss
index 256fac57fd1..a8cc7020975 100644
--- a/theme/boost/scss/moodle/drawer.scss
+++ b/theme/boost/scss/moodle/drawer.scss
@@ -223,6 +223,15 @@ $right-drawer-width: 320px;
     .drawer {
         z-index: inherit;
 
+        // Workaround to display the skip link elements from the blocks drawer infront of the navbar.
+        &#theme_boost-drawers-blocks:focus-within {
+            position: absolute;
+
+            .drawercontent {
+                z-index: auto;
+            }
+        }
+
         &.not-initialized {
             display: block;
         }
diff --git a/theme/boost/style/moodle.css b/theme/boost/style/moodle.css
index c7f28338393..9d5cc85492c 100644
--- a/theme/boost/style/moodle.css
+++ b/theme/boost/style/moodle.css
@@ -15018,6 +15018,10 @@ body.drawer-ease {
 @media (min-width: 992px) {
   .drawer {
     z-index: inherit; }
+    .drawer#theme_boost-drawers-blocks:focus-within {
+      position: absolute; }
+      .drawer#theme_boost-drawers-blocks:focus-within .drawercontent {
+        z-index: auto; }
     .drawer.not-initialized {
       display: block; } }
 
diff --git a/theme/classic/style/moodle.css b/theme/classic/style/moodle.css
index 13fd887f2c0..e4ac2fa42ad 100644
--- a/theme/classic/style/moodle.css
+++ b/theme/classic/style/moodle.css
@@ -15018,6 +15018,10 @@ body.drawer-ease {
 @media (min-width: 992px) {
   .drawer {
     z-index: inherit; }
+    .drawer#theme_boost-drawers-blocks:focus-within {
+      position: absolute; }
+      .drawer#theme_boost-drawers-blocks:focus-within .drawercontent {
+        z-index: auto; }
     .drawer.not-initialized {
       display: block; } }