Skip to content

Commit 97e7358

Browse files
authored
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
1 parent 7e5f612 commit 97e7358

2 files changed

Lines changed: 18 additions & 17 deletions

File tree

content/cli/v11/commands/npm-stage.mdx

Lines changed: 14 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -77,14 +77,14 @@ Before using `npm stage` commands, ensure the following requirements are met:
7777

7878
### 2FA Requirements by Subcommand
7979

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 |
8888

8989
### Tag Behavior
9090

@@ -96,12 +96,12 @@ The tag is an immutable property of the staged package. Once a package is staged
9696

9797
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.
9898

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) |
105105

106106
### Trust Relationship Permissions
107107

src/components/text-input.js

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -8,12 +8,13 @@ const TextInput = styled(PrimerTextInput)`
88
*/
99
input {
1010
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;
1213
}
1314
1415
input::placeholder {
15-
color: rgb(225, 228, 232) !important;
16-
opacity: 0.7;
16+
color: var(--fgColor-muted, #57606a) !important;
17+
opacity: 1;
1718
}
1819
`
1920
export default TextInput

0 commit comments

Comments
 (0)