diff --git a/.changeset/thirty-swans-yawn.md b/.changeset/thirty-swans-yawn.md index 6ae4189e4..272cb4c6f 100644 --- a/.changeset/thirty-swans-yawn.md +++ b/.changeset/thirty-swans-yawn.md @@ -2,4 +2,7 @@ '@primer/react-brand': patch --- -Added horizontal scrolling to `IDE` component when viewed on small viewports +`IDE` component accessibility improvements + +- Added 1px border to identify active tab and start/end of Copilot suggestion. The colours of these borders can be customised via the `--brand-IDE-default-editor-tab-borderColor` and `--brand-IDE-autoSuggest-borderColor` CSS variables. +- Added horizontal scrolling to `IDE` component when viewed on small viewports diff --git a/apps/docs/content/components/IDE.mdx b/apps/docs/content/components/IDE.mdx index 18a4dfe63..93ec1870a 100644 --- a/apps/docs/content/components/IDE.mdx +++ b/apps/docs/content/components/IDE.mdx @@ -205,6 +205,8 @@ See Storybook for a comprehensive example of the Chat feature, inclusive of synt A `glass` variant is available to simplify placement of the `IDE` on background images. This variant adds alpha transparency and background blurring. +When using the `glass` variant, pay close attention to the background image behind the tabs of the `IDE.Editor`. Ensure there is sufficient contrast between the text and the background on inactive tabs. + ```jsx live