Fix modal ARIA and accessibility issues

.gitignore

@@ -23,6 +23,7 @@ yarn-error.log*
 
 # Dependency directories
 node_modules/
+package-lock.json
 
 # Eslint cache
 .eslintcache

force-app/main/default/lwc/scheduledMaintenanceComponent/scheduledMaintenanceComponent.html

@@ -1,7 +1,15 @@
 <!-- sldsValidatorIgnore -->
 <template>
     <template if:true={isModalOpen}>
-        <section role="dialog" tabindex="-1" aria-modal="true" class="slds-modal slds-fade-in-open">
+        <section
+            role="dialog"
+            tabindex="-1"
+            aria-modal="true"
+            aria-labelledby="modal-heading-01"
+            aria-describedby="modal-content-01"
+            class="slds-modal slds-fade-in-open"
+            onkeydown={handleKeyDown}
+        >
             <div class="slds-modal__container">
                 <header class="slds-modal__header">
                     <template if:true={isDismissible}>
@@ -12,15 +20,15 @@
                             </button>
                         </template>                        
                     </template>
-                    <h2 class="slds-text-heading_large">{title}</h2>
+                    <h2 id="modal-heading-01" class="slds-text-heading_large">{title}</h2>
                     <template if:false={isDismissible}>
                         <div class="slds-m-top_large">
                             <lightning-badge label="This App is Closed" class="slds-m-left_medium slds-badge slds-theme_warning"></lightning-badge>
                         </div>
                         <p class="slds-m-top_x-small">To see why this app is closed please review the below items.</p>
                     </template>
                 </header>
-                <div class="slds-modal__content slds-p-around_medium" style="overflow: auto;">
+                <div id="modal-content-01" class="slds-modal__content slds-p-around_medium" style="overflow: auto;">
                     <!-- Render accordion if isInMaintenance is true -->
                     <template if:true={isInMaintenance}>
                         <lightning-accordion allow-multiple-sections-open active-section-name={activeSectionName}>

force-app/main/default/lwc/scheduledMaintenanceComponent/scheduledMaintenanceComponent.js

@@ -18,6 +18,9 @@ export default class ScheduledMaintenanceComponent extends NavigationMixin(Light
     @track userTimeZone = null;
     @track userLocale = null;
     intervalId = null;
+    _previousIsModalOpen = false;
+    _focusableSelectors =
+        'button:not([disabled]), [href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"])';
 
     // Lifecycle hook that's called after the component is inserted into the DOM.
     connectedCallback() {
@@ -45,6 +48,39 @@ export default class ScheduledMaintenanceComponent extends NavigationMixin(Light
         }
     }
 
+    // Moves focus to the first focusable element when the modal opens
+    renderedCallback() {
+        if (this.isModalOpen && !this._previousIsModalOpen) {
+            const firstFocusable = this.template.querySelector(this._focusableSelectors);
+            if (firstFocusable) {
+                firstFocusable.focus();
+            }
+        }
+        this._previousIsModalOpen = this.isModalOpen;
+    }
+
+    // Handles keyboard events for Escape (dismiss) and Tab (focus trapping)
+    handleKeyDown(event) {
+        if (event.key === 'Escape' && this.isDismissible && !this.isFullLock) {
+            this.dismissAllRecords();
+            return;
+        }
+        if (event.key === 'Tab') {
+            const focusable = [...this.template.querySelectorAll(this._focusableSelectors)];
+            if (focusable.length === 0) return;
+            const firstEl = focusable[0];
+            const lastEl = focusable[focusable.length - 1];
+            const activeEl = this.template.activeElement;
+            if (event.shiftKey && activeEl === firstEl) {
+                event.preventDefault();
+                lastEl.focus();
+            } else if (!event.shiftKey && activeEl === lastEl) {
+                event.preventDefault();
+                firstEl.focus();
+            }
+        }
+    }
+
     // Fetches the scheduled maintenances from Apex
     fetchScheduledMaintenances() {
         console.log('Fetching scheduled maintenances at', new Date().toLocaleString('en-US', { month: '2-digit', day: '2-digit', year: 'numeric', hour: '2-digit', minute: '2-digit', hour12: true }));