Fix website accesibility issues

packages/astro-utils/package.json

@@ -24,14 +24,14 @@
   },
   "devDependencies": {
     "@types/react": "~19.2.2",
-    "astro": "^5.5.6"
+    "astro": "^5.16.4"
   },
   "peerDependencies": {
-    "astro": "^5.5.6"
+    "astro": "^5.16.4"
   },
   "dependencies": {
     "@astrojs/check": "^0.9.4",
-    "@astrojs/starlight": "^0.36.1",
+    "@astrojs/starlight": "^0.37.0",
     "@expressive-code/core": "^0.41.2",
     "@typespec/playground": "workspace:^",
     "astro-expressive-code": "^0.41.2",

website/astro.config.mjs

@@ -51,6 +51,18 @@ export default defineConfig({
           },
         },
       ],
+      social: [
+        {
+          label: "GitHub",
+          icon: "github",
+          href: "https://github.com/microsoft/typespec",
+        },
+        {
+          label: "Discord",
+          icon: "discord",
+          href: "https://aka.ms/typespec/discord",
+        },
+      ],
       plugins: [],
     }),
     react(),

website/package.json

@@ -17,16 +17,16 @@
   },
   "dependencies": {
     "@astrojs/check": "^0.9.4",
-    "@astrojs/react": "^4.2.1",
-    "@astrojs/starlight": "^0.36.1",
-    "@docsearch/css": "^4.1.0",
-    "@docsearch/js": "^4.1.0",
+    "@astrojs/react": "^4.4.2",
+    "@astrojs/starlight": "^0.37.0",
+    "@docsearch/css": "^4.3.2",
+    "@docsearch/js": "^4.3.2",
     "@expressive-code/core": "^0.41.2",
     "@fluentui/react-components": "~9.72.3",
     "@fluentui/react-icons": "^2.0.292",
     "@typespec/compiler": "workspace:^",
     "@typespec/playground": "workspace:^",
-    "astro": "^5.5.6",
+    "astro": "^5.16.4",
     "astro-rehype-relative-markdown-links": "^0.18.1",
     "clsx": "^2.1.1",
     "date-fns": "^4.1.0",

website/src/components/asset-img.astro

@@ -7,12 +7,13 @@ import type { HTMLAttributes } from "astro/types";
 
 export interface AssetImgProps extends HTMLAttributes<"img"> {
   src: string;
+  class?: string;
 }
 
-const { src, alt, ...rest } = Astro.props;
+const { src, alt, class: className, ...rest } = Astro.props;
 ---
 
-<img class="img" src={baseUrl(`/img/${src}`)} alt={alt ?? ""} {...rest} />
+<img class:list={["img", className]} src={baseUrl(`/img/${src}`)} alt={alt ?? ""} {...rest} />
 
 <style>
   .img {

website/src/components/feature-list.astro

@@ -9,6 +9,7 @@ interface FeatureListItem {
   description?: string;
   image?: FluentImageName;
   link?: string;
+  learnMoreText?: string;
 }
 
 export interface Props {
@@ -46,15 +47,15 @@ const { items } = Astro.props;
 
 <div class="items-list">
   {
-    items?.map(({ image, description, link, title }) => (
+    items?.map(({ image, description, link, title, learnMoreText }) => (
       <div class="item">
         {image && <FluentImg class="item-image" name={image} />}
         <div class="item-content">
           <NeutralText size={"large"}>{title}</NeutralText>
           <DescriptionText>{description}</DescriptionText>
           {link && (
             <Link href={link}>
-              <Text>Learn more →</Text>
+              <Text>{learnMoreText ?? "Learn more"} →</Text>
             </Link>
           )}
         </div>

website/src/components/header/header.astro

@@ -5,10 +5,10 @@ import { Icon } from "@astrojs/starlight/components";
 import Search from "./search.astro";
 import ReleaseNotification from "../release-notification.astro";
 export interface Props {
-  noDrawer?: boolean;
+  noLinks?: boolean;
 }
 
-const { noDrawer } = Astro.props;
+const { noLinks } = Astro.props;
 ---
 
 <style>
@@ -183,23 +183,49 @@ const { noDrawer } = Astro.props;
   <span class="brand-item"><Link href="/" class="brand"><b>TypeSpec</b></Link></span>
 
   <div id="header-nav-content" class="nav-content">
-    <div class="items">
-      <details id="use-cases-menu" class="group">
-        <summary class="item"
-          ><span>Use cases</span> <Icon class="icon" name="down-caret" /></summary
-        >
-        <ul class="group-content">
-          <li><Link class="item link" href="/openapi">OpenAPI</Link></li>
-          <li><Link class="item link" href="/data-validation">Data Validation</Link></li>
-          <li><Link class="item link" href="/tooling">Tooling support</Link></li>
-        </ul>
-      </details>
-      <Link class="item link" href="/docs">Docs</Link>
-      <Link class="item link" href="/videos">Videos</Link>
-      <Link class="item link" href="/playground">Playground</Link>
-      <Link class="item link" href="/blog">Blog</Link>
-      <Link class="item link" href="/community">Community</Link>
-    </div>
+    {
+      !noLinks && (
+        <div class="items">
+          <details id="use-cases-menu" class="group">
+            <summary class="item">
+              <span>Use cases</span> <Icon class="icon" name="down-caret" />
+            </summary>
+            <ul class="group-content">
+              <li>
+                <Link class="item link" href="/openapi">
+                  OpenAPI
+                </Link>
+              </li>
+              <li>
+                <Link class="item link" href="/data-validation">
+                  Data Validation
+                </Link>
+              </li>
+              <li>
+                <Link class="item link" href="/tooling">
+                  Tooling support
+                </Link>
+              </li>
+            </ul>
+          </details>
+          <Link class="item link" href="/docs">
+            Docs
+          </Link>
+          <Link class="item link" href="/videos">
+            Videos
+          </Link>
+          <Link class="item link" href="/playground">
+            Playground
+          </Link>
+          <Link class="item link" href="/blog">
+            Blog
+          </Link>
+          <Link class="item link" href="/community">
+            Community
+          </Link>
+        </div>
+      )
+    }
     <div class="items right">
       <ReleaseNotification />
       <Link
@@ -221,7 +247,7 @@ const { noDrawer } = Astro.props;
   </div>
   <Search />
   {
-    !noDrawer && (
+    !noLinks && (
       <button id="header-drawer-button" type="button" class="lg:hidden icon" title="Show Menu">
         <Icon name="bars" />
       </button>
@@ -235,8 +261,10 @@ const { noDrawer } = Astro.props;
   button.addEventListener("click", () => {
     if (navcontent.dataset.open === "true") {
       navcontent.dataset.open = "false";
+      button.focus();
     } else {
       navcontent.dataset.open = "true";
+      navcontent.focus();
     }
   });
 

website/src/components/header/search.astro

@@ -6,6 +6,10 @@ import "@docsearch/css";
   sl-doc-search {
     --docsearch-muted-color: #6c727e;
   }
+
+  :global(.DocSearch-Button:focus) {
+    outline: 1px solid var(--colorBrandBackgroundHover);
+  }
 </style>
 
 <sl-doc-search>

website/src/components/homepage/overview-illustration.astro

@@ -8,8 +8,8 @@ import { OverviewIllustrationTerminalContent } from "./overview-illustration-ter
 
 <style>
   .card {
-    width: 723px;
     height: 542px;
+    width: 723px;
     position: relative;
   }
 
@@ -20,11 +20,17 @@ import { OverviewIllustrationTerminalContent } from "./overview-illustration-ter
     width: 420px;
     height: 320px;
   }
-
   .ide {
     position: absolute;
     top: 226px;
     left: 183px;
+    width: 420px;
+  }
+
+  @media only screen and (max-width: 600px) {
+    .card {
+      display: none;
+    }
   }
 </style>
 <IllustrationCard blend class="card">

website/src/components/learn-more-card.astro

@@ -1,7 +1,7 @@
 ---
 import FluentImg from "./fluent-img.astro";
 import Link from "@typespec/astro-utils/components/link.astro";
-import { NeutralText, DescriptionText, Text } from "./text/text";
+import { NeutralText, DescriptionText } from "./text/text";
 import type { FluentImageName } from "./types";
 
 export interface Props {
@@ -24,6 +24,7 @@ const { image, title, description, link } = Astro.props;
     display: flex;
     gap: 12px;
     border: 2px solid transparent;
+    display: flex;
   }
 
   .item:hover {
@@ -44,16 +45,25 @@ const { image, title, description, link } = Astro.props;
 
   .item-content {
     display: flex;
+    flex: 1;
     flex-direction: column;
-    gap: 12px;
+  }
+
+  .title {
+    font-size: 20px;
+    font-weight: 600;
+  }
+  .arrow {
+    font-size: 24px;
+    color: var(--colorNeutralForeground3);
   }
 </style>
 
 <Link href={link} class="item">
   {image && <FluentImg class="item-image" name={image} />}
-  <div class={"item-content"}>
-    <NeutralText>{title}</NeutralText>
-    <DescriptionText>{description}</DescriptionText>
-    <Text>Learn more →</Text>
+  <div class="item-content">
+    <NeutralText className="title">{title}</NeutralText>
+    <DescriptionText>{description ?? "Learn more about supported features"}</DescriptionText>
   </div>
+  <div class="arrow">→</div>
 </Link>

website/src/components/light-dark-img.astro

@@ -23,6 +23,6 @@ const { src } = Astro.props;
   }
 </style>
 <div>
-  <AssetImg className={"dark"} src={`${src}.dark.png`} />
-  <AssetImg className={"light"} src={`${src}.light.png`} />
+  <AssetImg class="dark" src={`${src}.dark.png`} />
+  <AssetImg class="light" src={`${src}.light.png`} />
 </div>

website/src/components/starlight-overrides/Header.astro

@@ -2,4 +2,4 @@
 import BaseHeader from "@site/src/components/header/header.astro";
 ---
 
-<BaseHeader noDrawer />
+<BaseHeader noLinks />

website/src/css/reset.css

@@ -13,3 +13,8 @@ a {
   text-decoration: none;
   transition: color var(--ifm-transition-fast) var(--ifm-transition-timing-default);
 }
+
+/* In markdown tables starlight doesn't underline text. This ensures that only links with multiple siblings get underlined but not the whole cell being a link */
+.sl-markdown-content td a:not(:only-child) {
+  text-decoration: underline;
+}

website/src/pages/index.astro

@@ -113,19 +113,22 @@ import Button from "../components/button.astro";
                 "Inspired by TypeScript, TypeSpec is a minimal language that helps developers describe API shapes in a familiar way.",
               image: "book-pencil",
               link: Links.gettingStartedOpenAPI,
+              learnMoreText: "Learn about TypeSpec for REST APIs",
             },
             {
               title: "Easy integration with your toolchain",
               description:
                 "Write TypeSpec, emit to various formats and integrate with their ecosystems.",
               image: "document-add",
+              learnMoreText: "Learn about TypeSpec emitters",
             },
             {
               title: "Multi-protocol support",
               description:
                 "TypeSpec's standard library includes support for OpenAPI 3.0, JSON Schema 2020-12 and Protobuf.",
               image: "tasks",
               link: "/multi-protocol",
+              learnMoreText: "Check out multi-protocol examples",
             },
           ]}
         />