fix: improve search input text contrast accessibility (#1974)
## Summary - Fix search input text visibility by replacing hardcoded low-contrast input text color with Primer foreground tokens and fallbacks in src/components/text-input.js - Ensure caret visibility by setting caret-color to the same accessible foreground token - Improve placeholder readability with muted foreground token fallback and remove opacity fade - Include required docs formatting update from CI in content/cli/v11/commands/npm-stage.mdx (Prettier only) ## Why - Typed text in the search box could be effectively invisible on light backgrounds, causing an accessibility issue. ## Validation - npx eslint src/components/text-input.js - npx prettier --check content/cli/v11/commands/npm-stage.mdx
Karthikeyan Padaikathu committed
May 29, 2026 at 10:46 UTC
97e73589e49a88c738ba8fffed7949fb221f7318
2 files changed
+18
-17
content/cli/v11/commands/npm-stage.mdx
+14
-14
@@ -77,14 +77,14 @@ Before using `npm stage` commands, ensure the following requirements are met:
77
78
### 2FA Requirements by Subcommand
79
80
-| Command | Requires 2FA | Notes |
81
-| --- | --- | --- |
82
-| `npm stage publish` | No | Designed for automated workflows; defers 2FA to approval |
83
-| `npm stage list` | No | View staged packages |
84
-| `npm stage view` | No | View staged package details |
85
-| `npm stage approve` | Yes | Prompts for 2FA to publish the staged package |
86
-| `npm stage reject` | Yes | Prompts for 2FA to permanently remove the staged package |
87
-| `npm stage download` | No | Downloads the tarball for local inspection |
80
+| Command | Requires 2FA | Notes |
81
+| -------------------- | ------------ | -------------------------------------------------------- |
82
+| `npm stage publish` | No | Designed for automated workflows; defers 2FA to approval |
83
+| `npm stage list` | No | View staged packages |
84
+| `npm stage view` | No | View staged package details |
85
+| `npm stage approve` | Yes | Prompts for 2FA to publish the staged package |
86
+| `npm stage reject` | Yes | Prompts for 2FA to permanently remove the staged package |
87
+| `npm stage download` | No | Downloads the tarball for local inspection |
88
89
### Tag Behavior
90
@@ -96,12 +96,12 @@ The tag is an immutable property of the staged package. Once a package is staged
96
97
The key difference with staged publishing is that `npm stage publish` never requires a 2FA prompt, regardless of token type. This is what makes it suitable for automated workflows. The goal of `npm stage publish` is deferring proof-of-presence to a later point in time.
98
99
-| Token Type | `npm stage publish` | `npm publish` |
100
-| --- | --- | --- |
101
-| GAT with bypass | Can stage | Can publish (if allowed by package publishing access) |
102
-| GAT without bypass | Can stage | 2FA prompt (if allowed by package publishing access) |
103
-| Session token | Can stage | 2FA prompt |
104
-| Trust token (OIDC) | Can stage (if allowed) | Can publish (if allowed) |
99
+| Token Type | `npm stage publish` | `npm publish` |
100
+| ------------------ | ---------------------- | ----------------------------------------------------- |
101
+| GAT with bypass | Can stage | Can publish (if allowed by package publishing access) |
102
+| GAT without bypass | Can stage | 2FA prompt (if allowed by package publishing access) |
103
+| Session token | Can stage | 2FA prompt |
104
+| Trust token (OIDC) | Can stage (if allowed) | Can publish (if allowed) |
105
106
### Trust Relationship Permissions
107
src/components/text-input.js
+4
-3
@@ -8,12 +8,13 @@ const TextInput = styled(PrimerTextInput)`
8
*/
9
input {
10
font-size: 16px !important;
11
- color: rgb(225, 228, 232) !important;
11
+ color: var(--fgColor-default, #1f2328) !important;
12
+ caret-color: var(--fgColor-default, #1f2328) !important;
13
}
14
15
input::placeholder {
15
- color: rgb(225, 228, 232) !important;
16
- opacity: 0.7;
16
+ color: var(--fgColor-muted, #57606a) !important;
17
+ opacity: 1;
18
}
19
`
20
export default TextInput