1982112 - [GenAI Chat Sidebar] [HCM] Close button is styled as a mix of button and link that is not expected on forced-colors mode

Status: NEW

(Core :: Machine Learning: Frontend, defect)

Description

[Anna Yeddi [:ayeddi]]

Attachment: Close control is shown with DevTools Inspector highlighting that HTML button is used but the expected styles were overwritten by aboutwelcome.css file to partially style it as a link

Steps to reproduce (STR):

1. Activate a High Contrast Mode theme on Windows (Settings > Accessibility > Contrast themes > select one, i.e. Night Sky on Win11 and apply).
2. Open Firefox Nightly.
3. Open Settings (about:preferences) and check Show sidebar option.
4. Activate the AI Chatbot via the sidebar panel, or press ^+X key combination, or via ribbon View > Sidebar > AI Chatbot.
5. On the provider selection screen, navigate through the radio buttons for AI providers and the disabled Continue button, until you reach the Close button at the end of this panel.
6. Using the keyboard or mouse, interact with the Close button to observe its default, hover, focused, and active (pressed) states.

Expected results:

1. The Close button should be styled as a standard button, following forced-colors (HCM) mode expectations (by using ButtonFace for background and ButtonText for both the label text and 1px solid border.
2. The control should provide clear and distinct visual feedback for all states:hover, and active (pressed), matching the semantic button styling pattern for HCM, with appropriate focus indication using CanvasText for the focus outline.
3. The button should not visually appear as a mix of a link and a button, and its interactive role should be clear for all users, including those relying on HCM.

Actual results:

1. The Close button uses an HTML button element, but its styling is overridden by aboutwelcome.css so that it appears as a mix of a button and a link.
2. The expected HCM (forced-colors) styling for a button is partially overridden, making the control visually ambiguous and inconsistent with other buttons or links in the UI.
3. The button does not provide clear visual feedback for hover and active (pressed) states.
4. User impact: Users relying on High Contrast Mode (i.e. users with low vision, colorblindness, cognitive disabilities, and others) may be confused about the control’s purpose or interactivity, may avoid or miss it entirely due to its ambiguous appearance, or may not know when the control is being hovered or activated.

Recommendation:

1. Update the styling of the Close button on the onboarding screen so it uses only standard button styles in all states in HCM, ensuring the correct semantic appearance and experience for forced-colors mode:
   1. Use ButtonFace for the background and ButtonText for the label and border in the default state.
   2. For the hover state, use SelectedItem for the background and SelectedItemText for the border and label text.
   3. For the active state, use the hover color combination, but with ButtonText for the border alone.
2. Ensure all states (default, hover, and active) have clear styling consistent with the HCM secondary button pattern (Figma reference, requires SSO to access).
3. Update any CSS overrides from aboutwelcome.css that style the button as a link or otherwise conflict with the expected HCM button patterns, at least when forced-colors media query is triggered.
4. Reference the HCM media queries for forced-colors mode for further implementation guidance and color combinations expected.