Accessibility improvements to IDE component colours (#904)

* add 1px border to identify active tab and start/end of Copilot suggestion

* fix after rebase

* add note about glass variant contrast

* style fix after rebase

* update existing changeset

* update snapshots

* apply PR suggestions

.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

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
 <Box
   padding={48}

packages/design-tokens/src/tokens/functional/components/ide/colors.js

@@ -27,6 +27,10 @@ module.exports = {
               dark: '#242538',
             },
           },
+          borderColor: {
+            value: 'var(--base-color-scale-blue-5)',
+            dark: 'var(--base-color-scale-blue-5)',
+          },
         },
       },
     },
@@ -81,6 +85,10 @@ module.exports = {
         value: 'var(--base-color-scale-white-0)',
         dark: 'var(--base-color-scale-white-0)',
       },
+      borderColor: {
+        value: 'var(--base-color-scale-blue-5)',
+        dark: 'var(--base-color-scale-blue-5)',
+      },
     },
     autoSuggestLine: {
       bgColor: {

packages/react/src/IDE/IDE.module.css

@@ -213,6 +213,7 @@
 
 .IDE__Editor-tab.active {
   color: var(--brand-color-text-default);
+  border-top: var(--brand-borderWidth-thin) solid var(--brand-IDE-default-editor-tab-borderColor);
   z-index: 1;
 }
 
@@ -312,9 +313,10 @@ img.IDE__Editor-tab-icon {
 }
 
 .IDE__Editor-pane--suggested {
-  margin-left: calc(-1 * var(--base-size-64));
-  padding-left: calc((var(--base-size-64) * 2) - var(--brand-IDE-lineNumber-width)) !important;
+  margin-left: calc(-1 * var(--brand-IDE-lineNumber-width));
+  padding-left: calc(var(--base-size-64) - 1px) !important;
   background-color: var(--brand-IDE-autoSuggestLine-bgColor);
+  border-left: var(--brand-borderWidth-thin) solid var(--brand-IDE-autoSuggest-borderColor);
 }
 
 .IDE__Editor-lineNumbers {