Fix modal ARIA and accessibility issues

[Copilot]

The modal dialog lacked proper ARIA labeling, focus management, and keyboard support, making it inaccessible to screen reader and keyboard-only users.

Description

scheduledMaintenanceComponent.html

• Added aria-labelledby="modal-heading-01" and aria-describedby="modal-content-01" to <section role="dialog">
• Added matching id attributes to the title <h2> and content <div>
• Attached onkeydown={handleKeyDown} to the section for keyboard event capture

scheduledMaintenanceComponent.js

• _focusableSelectors — shared selector constant used by both focus methods
• renderedCallback — moves focus to first focusable element on modal open (tracked via _previousIsModalOpen flag to avoid re-triggering on every render)
• handleKeyDown — Escape closes modal (when dismissible/not locked); Tab/Shift+Tab trap focus within the modal using this.template.activeElement

.gitignore

• Added package-lock.json to .gitignore to prevent it from being accidentally committed

Type of change

• Bug fix (non-breaking change which fixes an issue)

How Has This Been Tested?

• Existing unit tests pass (npm test)

Checklist:

• My code follows the style guidelines of this project
• I have performed a self-review of my own code
• I have commented my code, particularly in hard-to-understand areas
• I have made corresponding changes to the documentation
• My changes generate no new warnings
• I have added tests that prove my fix is effective or that my feature works
• New and existing unit tests pass locally with my changes
• Any dependent changes have been merged and published in downstream modules

Screenshots (if applicable):

N/A — changes are structural/behavioral, no visual diff.

Additional Notes

LWC synthetic shadow automatically scopes element IDs by appending a suffix (e.g. -0). aria-labelledby/aria-describedby references are updated to match by the engine, so the linkage is correct at runtime even though the raw attribute value differs from the template string.

Original prompt

---

This section details on the original issue you should resolve

<issue_title>Modal ARIA and accessibility issues</issue_title>
<issue_description>The modal uses role="dialog" but lacks:

• aria-labelledby
• aria-describedby
• Focus trapping
• Keyboard support

Proposed Fix

• Add proper ARIA attributes
• Ensure full keyboard and screen-reader accessibility

File: scheduledMaintenanceComponent.html</issue_description>

Comments on the Issue (you are @copilot in this section)

• Fixes Modal ARIA and accessibility issues #17

---

🔒 GitHub Advanced Security automatically protects Copilot coding agent pull requests. You can protect all pull requests by enabling Advanced Security for your repositories. Learn more about Advanced Security.