2024316 - Accessibility Review of Smart Window

Status: NEW

(Core :: Machine Learning: Frontend, task)

Description

[Justin Levinsohn]

Description:
Please provide an explanation of the feature or change. Include a description of the user scenario in which it would be used and how the user would complete the task(s).

Smart Window is a new AI-assisted browsing surface within Firefox that helps users complete tasks more efficiently by providing contextual suggestions, summaries, and actions based on the current page or user intent.

Screenshots and visual UI specs are welcome, but please include sufficient accompanying explanation so that blind members of the accessibility team are able to understand the feature/change.

All of our design work is in this Figma file: https://www.figma.com/design/5KuePTGmOEUFyCHBHCsGim/AI-Mode-%E2%80%94%C2%A0MVP-Scope-Design?node-id=23825-20&t=xRmStzJp5tONWO3P-1

How do we test this?
If there is an implementation to test, please provide instructions for testing it; e.g. setting preferences, other preparation, how to trigger the UI, etc.
How do we test this?

1. Setup:
   Enable Smart Window via feature flag or preference (e.g., browser.smartwindow.enabled = true)
   Ensure the user is in a supported build/channel
2. Triggering the UI:
   Click the Smart Window toolbar button (or use keyboard shortcut if available)
   Alternatively, invoke via right-click/context menu (if implemented)
3. Test scenarios:
   Open Smart Window on a content-rich page
   Enter a query in the input field and submit
   Navigate through generated responses
   Use any available action buttons (copy, regenerate, etc.)
   Interact with suggested prompts
4. Accessibility-specific testing:
   • Navigate the entire UI using keyboard only (Tab, Shift+Tab, arrow keys, Enter, Escape)
   • Use a screen reader (e.g., NVDA, VoiceOver) to:
   Read input field, buttons, and generated content
   Verify announcements for dynamic updates (AI responses)
   • Test focus management:
   Focus moves into the panel when opened
   Logical focus order across elements
   Focus returns appropriately when closed
   • Check for:
   Proper labeling of controls
   Role semantics for dynamic content regions
   Announcements for loading and completion states

When will this ship?
Firefox 150, with accessibility improvements hoping to land in 151.
Tracking bug/issue:
Design documents (e.g. Product Requirements Document, UI spec):
Engineering lead: Ed Lee
Product manager: Jolie Huang

The accessibility team has developed the Mozilla Accessibility Release Guidelines which outline what is needed to make user interfaces accessible:
https://wiki.mozilla.org/Accessibility/Guidelines
Please describe the accessibility guidelines you considered and what steps you've taken to address them:
WCAG AA, tried where possible on the frontend to write semantic markup and general best practices.

Describe any areas of concern to which you want the accessibility team to give special attention: Looking for a comprehensive but broad testing of the product from onboarding to chatting with the assistant to using memories, etc.

Comment 1

[Frank Griffith Jr]

@justin, can we please correct the feature flag here in the bug as we want to make sure we have the right instructions for internal and external reviewers? Thanks!

Enable Smart Window via feature flag or preference
(browser.smart_window.enabled = true) should be (browser.smartwindow.enabled = true)

Comment 2

[Justin Levinsohn]

I've updated the instructions above.

Comment 3

[Anna Yeddi [:ayeddi]]

The review is being done by WebAIM

Comment 4

[Anna Yeddi [:ayeddi]]

Hi team,
the testing is completed for the Smart Window - you could find a list of bugs reported in this query

Accessibility team recommends to resolve all the bug reported, starting with the following top-7 bugs (considering the first 3 bugs are an access-S2 issue and have to be resolved as soon as possible to remove blocking users of assistive technologies from accessing the feature):

1. (access-S2) Bug 2028677: [a11y] "Memories" dialog, various barriers - blocker (partially addressed by the bug 2017257 and its attached patch)
2. (access-S2) Bug 2028676: [a11y] Answer to user's question not obvious to screen reader users - blocker
3. (access-S2) Bug 2028671 (closed as a duplicate of the previously reported bug 2015985) [a11y] Button does not expose the expanded/collapsed state of its associated panel to screen reader users)
4. (access-S3) Bug 2028675: [a11y] Combobox functionality not announced to screen reader users - high severity papercut
5. (access-S3) Bug 2028674: [a11y] Keyboard navigation order is not following visual reading order within a chat panel
6. (access-S3) Bug 2028673: [a11y] Empty Tab stops within a chat panel - papercut
7. (access-S3) Bug 2028666: [a11y] Button is not mouse-clickable but remains triggerable via keyboard. - ** papercut**

Let me know if you have any questions and do not hesitate to reach out should you need any further guidance on the remediation of the bugs reported.