Merge branch 'MDL-85769-500' of https://github.com/meirzamoodle/moodle into MOODLE_500_STABLE

ai/placement/courseassist/amd/src/placement.js

@@ -32,6 +32,8 @@ import DrawerEvents from 'core/drawer_events';
 import {subscribe} from 'core/pubsub';
 import * as MessageDrawerHelper from 'core_message/message_drawer_helper';
 import {getString} from 'core/str';
+import * as FocusLock from 'core/local/aria/focuslock';
+import {isSmall} from "core/pagehelpers";
 
 const AICourseAssist = class {
 
@@ -63,6 +65,7 @@ const AICourseAssist = class {
         this.aiDrawerCloseElement = this.aiDrawerElement.querySelector(Selectors.ELEMENTS.AIDRAWER_CLOSE);
         this.lastAction = '';
         this.responses = new Map();
+        this.isDrawerFocusLocked = false;
 
         this.registerEventListeners();
     }
@@ -110,6 +113,12 @@ const AICourseAssist = class {
             }
         });
 
+        document.addEventListener('keydown', e => {
+            if (this.isAIDrawerOpen() && e.key === 'Escape') {
+                this.closeAIDrawer();
+            }
+        });
+
         // Close AI drawer if message drawer is shown.
         subscribe(DrawerEvents.DRAWER_SHOWN, () => {
             if (this.isAIDrawerOpen()) {
@@ -239,12 +248,27 @@ const AICourseAssist = class {
         }
         this.jumpToElement.setAttribute('tabindex', 0);
         this.jumpToElement.focus();
+
+        // If the AI drawer is opened on a small screen, we need to trap the focus tab within the AI drawer.
+        if (isSmall()) {
+            FocusLock.trapFocus(this.aiDrawerElement);
+            this.aiDrawerElement.setAttribute('aria-modal', 'true');
+            this.aiDrawerElement.setAttribute('role', 'dialog');
+            this.isDrawerFocusLocked = true;
+        }
     }
 
     /**
      * Close the AI drawer.
      */
     closeAIDrawer() {
+        // Untrap focus if it was locked.
+        if (this.isDrawerFocusLocked) {
+            FocusLock.untrapFocus();
+            this.aiDrawerElement.removeAttribute('aria-modal');
+            this.aiDrawerElement.setAttribute('role', 'region');
+        }
+
         this.aiDrawerElement.classList.remove('show');
         this.aiDrawerElement.setAttribute('tabindex', -1);
         this.aiDrawerBodyElement.removeAttribute('aria-live');

ai/placement/courseassist/lang/en/aiplacement_courseassist.php

@@ -22,6 +22,7 @@
  * @license    http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later
  */
 
+$string['aidrawerlabel'] = 'AI-generated content drawer';
 $string['aiexplain'] = 'AI explain';
 $string['aifeatures'] = 'AI features';
 $string['aisummary'] = 'AI summary';

ai/placement/courseassist/templates/drawer.mustache

@@ -29,7 +29,7 @@
         "contextid": "1"
     }
 }}
-<div class="ai-drawer" id="ai-drawer" tabindex="-1">
+<div class="ai-drawer" id="ai-drawer" aria-label={{#quote}}{{#str}} aidrawerlabel, aiplacement_courseassist {{/str}}{{/quote}} tabindex="-1" role="region">
     <div class="ai-drawer-header">
         <button id="ai-drawer-close" class="btn ai-drawer-button" type="button">
             {{#pix}} e/cancel, core {{/pix}}