1964137 - Accessibility: Smart Tab Groups Name text input does not use expected HCM styling

Status: NEW

(Firefox :: Tabbed Browser, defect)

Description

[❌ Anna Yeddi [:ayeddi] ❌ On leave until 2027-01-04]

Attachment: Name text input on Win11 Night Sky HCM with Focused state using "CanvasText" color for border and outline and default state border being "GrayText" or just gray. With expected appearance

Steps to reproduce:

1. Activate a HCM: in Windows Settings > Accessibility > Contrast themes, enable any High Contrast Mode theme, i.e. the Night Sky
2. Open Firefox Nightly
3. Open the context menu on any tab and activate “Add a Tab to a new group”
4. Observe the border of the "Name" text input
5. Focus the "Name" text input in the panel
6. Observe the border and the outline styles of the input

Expected results:

• Default border uses ButtonText
• Focused border uses ButtonText
• Focused outline uses SelectedItem

Actual results:

• Default border uses either a generic gray or GrayText
• Focused border and outline use CanvasText
• The lack of the semantic styling in the High Contrast Mode (HCM) is an access-S3 issue since it makes it difficult to discern which element is, in fact, an active UI and could be activated if clicked, which one is now hovered and which one is not, for HCM users (those with low vision, users with cognitive disabilities, users with dyslexia, with colorblindness, and others).

Recommendation:

• Add a @media (forced-colors: active) rule to the input styling:
  • border-color: ButtonText; by default and on focus
  • outline-color: SelectedItem; on focus
• See Firefox HCM media queries guide:
  https://firefox-source-docs.mozilla.org/accessible/HCMMediaQueries.html
• Figma reference for Win10/Win11 HCM system color combinations (SSO required), as well as the text inputs on HCM (SSO required)

Note on the screenshot: I have a slightly customized HCM Win 11 Night Sky contrast theme with ButtonFace being yellowish black for ease of testing, on the default Night Sky theme this color would appear very similar to Canvas black

Comment 1

[Hanna Jones [:hjones]]

I would suggest using moz-input-text here instead of adding more custom styles, if possible. The HCM styles should be baked in to the component, and it will help standardize this UI with other Firefox surfaces. I tried this locally and it seemed to work:

diff --git a/browser/components/tabbrowser/content/tabgroup-menu.js b/browser/components/tabbrowser/content/tabgroup-menu.js
index 80928b337381..62df50868a3b 100644
--- a/browser/components/tabbrowser/content/tabgroup-menu.js
+++ b/browser/components/tabbrowser/content/tabgroup-menu.js
@@ -214,17 +214,12 @@
         <html:div
           class="panel-body
           tab-group-editor-name">
-          <html:label
-            for="tab-group-name"
-            data-l10n-id="tab-group-editor-name-label">
-          </html:label>
-          <html:input
+          <html:moz-input-text
             id="tab-group-name"
-            type="text"
             name="tab-group-name"
-            value=""
-            data-l10n-id="tab-group-editor-name-field"
-          />
+            data-l10n-id="tab-group-editor-name-label"
+          >
+          </html:moz-input-text>
         </html:div>
 
 
diff --git a/browser/locales/en-US/browser/tabbrowser.ftl b/browser/locales/en-US/browser/tabbrowser.ftl
index 1bf37494c10c..d5a0cef97b01 100644
--- a/browser/locales/en-US/browser/tabbrowser.ftl
+++ b/browser/locales/en-US/browser/tabbrowser.ftl
@@ -225,8 +225,8 @@ tabbrowser-manager-current-window-tab-group =
 tab-group-name-default = Unnamed Group
 tab-group-editor-title-create = Create tab group
 tab-group-editor-title-edit = Manage tab group
-tab-group-editor-name-label = Name
-tab-group-editor-name-field =
+tab-group-editor-name-label =
+  .label = Name
   .placeholder = Example: Shopping
 tab-group-editor-cancel =
   .label = Cancel
diff --git a/browser/themes/shared/tabbrowser/tabs.css b/browser/themes/shared/tabbrowser/tabs.css
index 2beeaf77eabb..0101135c51ed 100644
--- a/browser/themes/shared/tabbrowser/tabs.css
+++ b/browser/themes/shared/tabbrowser/tabs.css
@@ -1163,19 +1163,7 @@ tab-group {
   &:not(.tab-group-editor-mode-create) .tab-group-create-mode-only {
     display: none;
   }
-
-  .tab-group-editor-name {
-    display: flex;
-    flex-direction: column;
-    > label {
-      margin-inline: 0;
-      margin-bottom: var(--space-small);
-    }
-    > input[type="text"] {
-      padding: var(--space-medium);
-    }
-  }
-
+  
   .tab-group-editor-swatches {
     display: flex;
     flex-flow: row nowrap;
diff --git a/toolkit/content/widgets/moz-input-text/moz-input-text.css b/toolkit/content/widgets/moz-input-text/moz-input-text.css
index 9df4c1303694..b6d78cc49a36 100644
--- a/toolkit/content/widgets/moz-input-text/moz-input-text.css
+++ b/toolkit/content/widgets/moz-input-text/moz-input-text.css
@@ -3,7 +3,6 @@
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
 :host {
-  --input-text-max-width: 17em;
   --input-text-min-height: var(--button-min-height);
   --input-text-border-color: var(--border-color-interactive);
   --input-text-border-color-disabled: var(--border-color-interactive-disabled);
@@ -15,7 +14,6 @@
 
 #input {
   width: 100%;
-  max-width: var(--input-text-max-width);
   min-height: var(--input-text-min-height);
   padding-inline: var(--space-medium);
   border: var(--input-text-border);

Comment 2

[BugBot [:suhaib / :marco]]

The severity field is not set for this bug.
:dwalker, could you have a look please?

For more information, please visit BugBot documentation.