Skip to content

Conversation

@stephenegriffin
Copy link
Member

This pull request introduces accessibility and UI improvements across several files, focusing on status message overlays, feedback link placement, and semantic HTML enhancements. The main changes ensure status messages are properly announced for assistive technologies, feedback links are more appropriately styled, and sections are more accessible via ARIA attributes.

Accessibility and UI improvements:

  • Status message overlays now clear their text content when hidden, ensuring that screen readers detect new announcements and improving accessibility for users relying on assistive technology. (src/Scripts/ui/mha.ts, src/Scripts/ParentFrame.ts) [1] [2] [3]
  • The focus on the inputHeaders textarea after clearing is now delayed to allow screen readers to finish announcing status messages, preventing interruptions. (src/Scripts/ui/mha.ts)

Styling and layout updates:

  • The feedback link is now styled with #feedbackLink instead of #mhaFooter, and its markup is updated to use a div rather than a footer, improving consistency and semantic correctness. (src/Content/classicDesktopFrame.css, src/Pages/mha.html) [1] [2]

Semantic HTML and ARIA enhancements:

  • Main content sections now use role="region" and aria-label attributes for better accessibility, making navigation easier for screen reader users. (src/Pages/mha.html) [1] [2]
  • The analysis results section also adopts these improvements for consistency. (src/Pages/mha.html)

Status overlay display logic:

  • The .status-overlay CSS class now uses display: block by default, and the .show modifier no longer sets the display property, streamlining the overlay's visibility logic. (src/Content/fluentCommon.css) [1] [2]

Code cleanup:

  • Removed hardcoded status message text from the HTML and now set it programmatically for better localization and maintainability. (src/Pages/uitoggle.html, src/Scripts/ParentFrame.ts) [1] [2]

Addresses following issues:
Bug 1691349 Screen Readers-Message Header Analyzer: Landmarks are not defined on the page.
Bug 1986059 Color Contrast- Summary: Contrast ratio of multiple text is less than 4.5:1 in "Summary" screen.
Bug 1986097 Focus order- Message header analyzer: Keyboard focus is going to whole dialog instead of close button.
Bug 1987489 Status Message- Classic: No status message appearing on screen for "Copy" mail
Bug 1987498 Status Message- Message Header Analyzer: No status message appearing on screen for actions like analyze header, clear, and other controls in Message Header Analyzer screen

@stephenegriffin stephenegriffin requested a review from a team as a code owner January 13, 2026 19:35
@stephenegriffin stephenegriffin enabled auto-merge (squash) January 13, 2026 19:35
@stephenegriffin stephenegriffin merged commit baeb125 into main Jan 14, 2026
6 checks passed
@stephenegriffin stephenegriffin deleted the u/sgriffin/a11y branch January 14, 2026 15:02
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants