Repository navigation
feat(playground): make named-layouts visually easier to identify - #296
Conversation
There was a problem hiding this comment.
💡 Codex Review
Here are some automated review suggestions for this pull request.
Reviewed commit: d46ebad66d
ℹ️ About Codex in GitHub
Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you
- Open a pull request for review
- Mark a draft as ready
- Comment "@codex review".
If Codex has suggestions, it will comment; otherwise it will react with 👍.
Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".
| > | ||
| Layout | ||
| </header> | ||
| <main style={{ padding: 16 }}>{children}</main> |
There was a problem hiding this comment.
Keep composed layouts from nesting
<main>
On /docs and /docs/ref, the integration routes compose this root layout with the Docs or API layout, each of which now adds another <main>. The resulting visible, nested main landmarks are invalid HTML and make landmark navigation ambiguous for screen-reader users; use a neutral wrapper for layout content or reserve <main> for only one level.
Useful? React with 👍 / 👎.
| background: '#FFCE1B', | ||
| color: '#ffffff', |
There was a problem hiding this comment.
Increase the Docs header contrast
On /docs, the default 16px white label against #FFCE1B has a contrast ratio of approximately 1.49:1, far below the 4.5:1 threshold for normal-sized text. This makes the newly added layout identifier difficult to read for low-vision users and undermines the purpose of making layouts visually distinguishable; use substantially darker text or a darker background.
Useful? React with 👍 / 👎.
Added horizontal CSS bars to make it easier for humans to see changes the named-layouts playground.