Fix website reflow, text spacing, and keyboard focus

README.md

@@ -60,6 +60,24 @@ This project has adopted the [Microsoft Open Source Code of Conduct](https://ope
 For more information see the [Code of Conduct FAQ](https://opensource.microsoft.com/codeofconduct/faq/) or
 contact [opencode@microsoft.com](mailto:opencode@microsoft.com) with any additional questions or comments.
 
+### Website changes
+
+The website source is in [site](./site). From the repository root:
+
+```sh
+npm --prefix site ci
+npm --prefix site run build
+npm --prefix site run serve
+```
+
+For UI changes, check keyboard navigation, including visible focus in Windows high-contrast themes.
+Focus indicators should have at least 3:1 contrast against the adjacent background.
+Check reflow at a 320 x 256 CSS-pixel viewport, equivalent to 400% zoom at 1280 x 1024.
+Also apply text-spacing overrides: line height of 1.5, letter spacing of 0.12em, word spacing of
+0.16em, and paragraph spacing of 2em. The install command must remain readable and its copy button
+visible and keyboard-operable. With JavaScript disabled, the command should remain readable and the
+inactive copy button should be hidden.
+
 ## Trademarks
 
 This project may contain trademarks or logos for projects, products, or services. Authorized use of Microsoft 

site/src/css/styles.css

@@ -39,13 +39,28 @@
     --typechat-monospace: Consolas, Menlo, Monaco, Roboto, monospace;
     --typechat-inline-code-color: #a10615;
     --typechat-rounding-radius: 0.5rem;
+    --typechat-focus-color: #005a9e;
+}
+
+:focus-visible,
+.btn:focus-visible,
+.nav-link:focus-visible,
+.typechat-prose-content pre:focus {
+    outline: 3px solid var(--typechat-focus-color);
+    outline-offset: 3px;
 }
 
 .typechat-cap-content-width {
     max-width: 1000px;
 }
 
 .typechat-hero .typechat-code-copy {
+    --typechat-focus-color: #fff;
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    justify-content: center;
+    gap: 0.75rem;
     background-color: #212529;
     color: #fff;
     font-style: var(--typechat-monospace);
@@ -55,18 +70,17 @@
 }
 
 .typechat-hero .typechat-code-copy code {
+    flex: 1 1 auto;
+    min-width: 0;
+    overflow-wrap: anywhere;
     background-color: inherit;
     color: inherit;
 }
 
 .typechat-hero .typechat-code-copy button {
-    height: 100%;
-    width: fit-content;
-    right: 0;
-    top: 0;
+    flex: 0 0 auto;
     border: none;
-    /* border-radius: var(--typechat-rounding-radius) 0 0 var(--typechat-rounding-radius); */
-    border-radius: 0 var(--typechat-rounding-radius) var(--typechat-rounding-radius) 0;
+    border-radius: var(--typechat-rounding-radius);
 }
 
 .typechat-prose-content :is(pre, blockquote) {
@@ -79,11 +93,6 @@
     background-color: #f5f8fa;
 }
 
-.typechat-prose-content pre:focus {
-    outline: 3px solid #0078d4;
-    outline-offset: 2px;
-}
-
 .typechat-prose-content code {
     font-family: var(--typechat-monospace);
     color: var(--typechat-inline-code-color);
@@ -117,3 +126,10 @@
 .typechat-prose-content th {
     border-top: 0;
 }
+
+@media (forced-colors: active) {
+    :root,
+    .typechat-hero .typechat-code-copy {
+        --typechat-focus-color: CanvasText;
+    }
+}

site/src/index.njk

@@ -15,9 +15,9 @@ layout: base
                 <a href="/docs/" class="mb-3 w-100 btn btn-lg btn-primary">Docs</a>
                 <a href="https://github.com/microsoft/TypeChat" target="_blank" class="mb-2 w-100 btn btn-lg btn-primary">GitHub</a>
                 <hr class="mb-4" />
-                <div class="w-100 typechat-code-copy position-relative">
-                    <button class="position-absolute d-none d-sm-block btn btn-dark" type="button" title="Copy 'npm install' command." aria-label=title="Copy 'npm install' command.">📋</button>
+                <div class="w-100 typechat-code-copy">
                     <code class="fs-5">npm install typechat</code>
+                    <button class="btn btn-dark" type="button" title="Copy 'npm install' command." aria-label="Copy 'npm install' command.">📋</button>
                 </div>
             </div>
         </div>

site/src/js/interactivity.js

@@ -9,7 +9,7 @@
     copyButton?.addEventListener("click", async () => {
         clearTimeout(lastTimeout);
         try {
-            await navigator.clipboard?.writeText("npm install typechat");
+            await navigator.clipboard.writeText("npm install typechat");
             copyButton.textContent = "✅";
             copyButton.title = copyButton.ariaLabel = "Command copied."
         }