fix: review deque accessibility testing of docs site

documentation/src/components/code-example.css

@@ -20,6 +20,8 @@ governing permissions and limitations under the License.
 }
 
 .demo-example {
+    max-width: 100%;
+    overflow: auto;
     flex: 1;
     padding: var(--spectrum-global-dimension-size-400)
         var(--spectrum-global-dimension-size-500);

documentation/src/components/code-example.ts

@@ -18,6 +18,7 @@ import {
     CSSResultArray,
     property,
     css,
+    query,
 } from 'lit-element';
 import * as Prism from 'prismjs';
 import { toHtmlTemplateString } from '../utils/templates.js';
@@ -65,13 +66,22 @@ export class LightCode extends Code {
                 .token.punctuation {
                     color: #737373;
                 }
+                .language-css .token.function {
+                    color: inherit;
+                }
             `,
         ];
     }
 }
 
 @customElement('code-example')
 export class CodeExample extends LitElement {
+    @query('#markup')
+    private markup?: HTMLDivElement;
+
+    @query('.demo-example')
+    private demo?: HTMLDivElement;
+
     @property()
     protected codeTheme: 'dark' | 'light' = 'light';
 
@@ -141,4 +151,38 @@ export class CodeExample extends LitElement {
             </div>
         `;
     }
+
+    private shouldManageTabOrderForScrolling = (): void => {
+        [this.markup, this.demo].map((el) => {
+            if (!el) return;
+            const { offsetWidth, scrollWidth } = el;
+            if (offsetWidth < scrollWidth) {
+                el.tabIndex = 0;
+            } else {
+                el.removeAttribute('tabindex');
+            }
+        });
+    };
+
+    protected updated(): void {
+        requestAnimationFrame(() => {
+            this.shouldManageTabOrderForScrolling();
+        });
+    }
+
+    public connectedCallback(): void {
+        super.connectedCallback();
+        window.addEventListener(
+            'resize',
+            this.shouldManageTabOrderForScrolling
+        );
+    }
+
+    public disconnectedCallback(): void {
+        window.removeEventListener(
+            'resize',
+            this.shouldManageTabOrderForScrolling
+        );
+        super.disconnectedCallback();
+    }
 }

packages/link/README.md

@@ -48,7 +48,7 @@ When a link needs to be placed on top of a colored background or a visual, use t
 
 ```html
 <div
-    style="background-color: rgb(255, 160, 175); padding: 15px 20px; display: inline-block;"
+    style="background-color: #0f797d; padding: 15px 20px; display: inline-block;"
 >
     <p style="color: rgb(240, 240, 240);">
         This