update from review comments

Author: twjeffery

src/components/code-snippet/CodeSnippet.tsx

@@ -132,7 +132,7 @@ export const CodeSnippet: FC<Props> = ({ lang, allowCopy, code, children, tags }
 
         {allowCopy && (
           <div className="goa-code-snippet-actions--copy">
-            <GoabTooltip content={isCopied ? `Copy.` : `Copy?`} position="left">
+            <GoabTooltip content={isCopied ? "Copied" : "Copy"} key={isCopied ? "copied" : "copy"} position="left">
               <GoabIconButton icon="copy" onClick={copyCode} />
             </GoabTooltip>
           </div>

src/components/component-card/ComponentCard.css

@@ -27,4 +27,15 @@
   font: var(--goa-typography-body-s);
   margin-top: 1rem;
   margin-bottom: 0;
+}
+
+.card-content a:focus {
+  outline: none;
+  box-shadow: none;
+  background: none;
+}
+
+.card:focus-within {
+  outline: 3px solid var(--goa-color-interactive-focus);
+  border-radius: 4px;
 }

src/components/component-card/ComponentCard.tsx

@@ -4,6 +4,8 @@ import { toKebabCase } from "../../utils";
 import { GoabBadge, GoabText } from "@abgov/react-components";
 import { useState, useEffect } from "react";
 
+export type ComponentStatus = "Published" | "Not Published" | "In Progress";
+
 // Define allowed group options as a union type
 type Group =
   | "Content layout"
@@ -17,7 +19,7 @@ export interface Props {
   description: string;
   groups: Group[]; // Use the Group type here
   tags?: string[];
-  status: "Published" | "Not Published" | "In Progress";
+  status: ComponentStatus;
   githubLink?: string;
   openIssues?: number;
 }
@@ -35,7 +37,7 @@ export function ComponentCard(props: Props) {
     testImage.onerror = () => setImageUrl("/images/not-yet-available.png");
   }, [imageUrl]);
 
-  const getBadgeType = (status: string) => {
+  const getBadgeType = (status: ComponentStatus) => {
     switch (status) {
       case "Published":
         return null; // No badge for "Published"
@@ -53,7 +55,7 @@ export function ComponentCard(props: Props) {
   return (
     <div className="card">
       {props.status === "Published" ? (
-        <Link to={toKebabCase(props.name)}>
+        <Link to={toKebabCase(props.name)} tabIndex={-1}>
           <div
             className="card-image"
             style={{ backgroundImage: `url(${imageUrl})` }}
@@ -62,6 +64,7 @@ export function ComponentCard(props: Props) {
       ) : (
         <div
           className="card-image"
+          tabIndex={-1}
           style={{ backgroundImage: `url(${imageUrl})` }}
         />
       )}

src/components/component-header/ComponentHeader.tsx

@@ -2,6 +2,7 @@ import { GoabBadge, GoabBlock, GoabText } from "@abgov/react-components";
 import "./ComponentHeader.css";
 import { Link } from "react-router-dom";
 import { useEffect, useState } from "react";
+import { toSentenceCase, fetchIssueCount } from "../../utils";
 
 export enum Category {
   CONTENT_AND_LAYOUT = "Content and layout",
@@ -21,60 +22,18 @@ interface Props {
 }
 
 export const ComponentHeader: React.FC<Props> = (props) => {
-  // Helper to transform "button" -> "Button" for GitHub label
-  function toSentenceCase(str: string): string {
-    return str.charAt(0).toUpperCase() + str.slice(1).toLowerCase();
-  }
-
   const [issueCount, setIssueCount] = useState<number | null>(null);
 
   useEffect(() => {
     if (!props.githubLink) return;
 
-    const fetchIssueCount = async () => {
-      const token =
-        import.meta.env.VITE_GITHUB_TOKEN ||
-        import.meta.env.VITE_GITHUB_TOKEN_ALTERNATE;
-
-      if (!token) {
-        console.error("GitHub token not provided");
-        return;
-      }
-
+    const getCount = async () => {
       const label = toSentenceCase(props.githubLink!);
-      const labelQuery = label.includes(" ") ? `\\"${label}\\"` : label;
-
-      const query = `
-        query {
-          issues: search(query: "is:issue is:open repo:GovAlta/ui-components label:${labelQuery}", type: ISSUE, first: 1) {
-            issueCount
-          }
-        }
-      `;
-
-      try {
-        const response = await fetch("https://api.github.com/graphql", {
-          method: "POST",
-          headers: {
-            "Content-Type": "application/json",
-            Authorization: `Bearer ${token}`
-          },
-          body: JSON.stringify({ query })
-        });
-
-        const result = await response.json();
-        if (result.errors) {
-          console.error("GraphQL errors:", result.errors);
-          return;
-        }
-
-        setIssueCount(result.data.issues.issueCount);
-      } catch (error) {
-        console.error("Error fetching issue count:", error);
-      }
+      const count = await fetchIssueCount(label);
+      setIssueCount(count);
     };
 
-    fetchIssueCount();
+    getCount();
   }, [props.githubLink]);
 
   return (

src/components/empty-states/examples-empty/ExamplesEmpty.tsx

@@ -1,8 +1,5 @@
 import { GoabContainer, GoabText } from "@abgov/react-components";
 
-export interface Props {
-  figmaLink?: string;
-}
 export function ExamplesEmpty( ) {
   return (
     <div className="examples-empty">

src/components/sandbox/sandbox-header/sandboxHeader.tsx

@@ -1,6 +1,7 @@
 import { GoabTooltip } from "@abgov/react-components";
-import { useState, useEffect, useRef } from "react";
+import { useState, useRef } from "react";
 import "./sandboxHeader.css";
+import { toKebabCase } from "../../../utils";
 
 export interface Props {
   exampleTitle: string;
@@ -10,23 +11,11 @@ export interface Props {
 export function SandboxHeader(props: Props) {
   const [isCopied, setIsCopied] = useState(false);
   const headingRef = useRef<HTMLDivElement>(null);
-  const [anchorId, setAnchorId] = useState("");
   const [isHovering, setIsHovering] = useState(false);
-
-  // Generate a unique anchor ID based on the heading text
-  useEffect(() => {
-    if (headingRef.current) {
-      const generatedId = props.exampleTitle
-        .toLowerCase()
-        .replace(/\s+/g, "-") // Replace spaces with dashes
-        .replace(/[^a-z0-9-]/g, ""); // Remove special characters
-      setAnchorId(generatedId);
-    }
-  }, [props.exampleTitle]);
+  const anchorId = toKebabCase(props.exampleTitle);
 
   function copyAnchorLink() {
     const url = `${window.location.origin}${window.location.pathname}#${anchorId}`;
-
     navigator.clipboard.writeText(url).then(() => {
       setIsCopied(true);
       setTimeout(() => setIsCopied(false), 2000); // Reset tooltip text after 2s
@@ -44,7 +33,7 @@ export function SandboxHeader(props: Props) {
           </h3>
 
           {/* Copy link icon (consistent with CodeSnippet.tsx) */}
-          <GoabTooltip content={isCopied ? "Copied" : "Copy link"}>
+          <GoabTooltip content={isCopied ? "Copied" : "Copy link"} key={isCopied ? "copied" : "copy"}>
             <button
               onClick={copyAnchorLink}
               className="copy-icon-button"

src/routes/components/AllComponents.tsx

@@ -1,4 +1,6 @@
 import { useEffect, useState } from "react";
+import { ComponentStatus } from "@components/component-card/ComponentCard";
+import { toSentenceCase, fetchAllIssueCounts } from "../../utils";
 import {
   GoabTable,
   GoabTableSortHeader,
@@ -461,7 +463,7 @@ const AllComponents = () => {
     ];
 
     return initialCards.sort((a, b) => {
-      const statusOrder = ["Published", "In Progress", "Not Published"];
+      const statusOrder: ComponentStatus[] = ["Published", "In Progress", "Not Published"];
       const statusComparison = statusOrder.indexOf(a.status) - statusOrder.indexOf(b.status);
       if (statusComparison !== 0) return statusComparison;
       return a.name.localeCompare(b.name);
@@ -486,7 +488,7 @@ const AllComponents = () => {
     const newDirection = sortDirection[sortBy] === 1 ? -1 : 1;
     const sorted = [...cards].sort((a, b) => {
       if (sortBy === "status") {
-        const statusOrder = ["Published", "In Progress", "Not Published"];
+        const statusOrder: ComponentStatus[] = ["Published", "In Progress", "Not Published"];
         const statusComparison = statusOrder.indexOf(a.status) - statusOrder.indexOf(b.status);
         if (statusComparison !== 0) return statusComparison * newDirection;
       }
@@ -516,78 +518,20 @@ const AllComponents = () => {
     setSortDirection({ [sortBy]: newDirection });
   };
 
-  // Helper to convert to sentence case
-  const toSentenceCase = (str: string) => {
-    return str.charAt(0).toUpperCase() + str.slice(1).toLowerCase();
-  };
-
   // Helper to format the label query for REST URLs
   const getLabelQuery = (name: string) => {
     const formatted = toSentenceCase(name);
     return formatted.includes(" ") ? `"${formatted}"` : formatted;
   };
 
   // Helper to format the label query for GraphQL (escaping inner quotes)
-  const getGraphQLLabelQuery = (name: string) => {
-    const formatted = toSentenceCase(name);
-    return formatted.includes(" ") ? `\\"${formatted}\\"` : formatted;
-  };
-
   useEffect(() => {
-    const fetchIssueCountsGraphQL = async () => {
-      const token =
-        import.meta.env.VITE_GITHUB_TOKEN ||
-        import.meta.env.VITE_GITHUB_TOKEN_ALTERNATE;
-      if (!token) {
-        console.error("GitHub token not provided");
-        return;
-      }
-
-      // Build a single GraphQL query for all cards
-      const queryFields = cards.map((card) => {
-        const alias = card.name.replace(/\s+/g, "").toLowerCase();
-        const labelQuery = getGraphQLLabelQuery(card.name);
-        return `${alias}: search(query: "is:issue is:open repo:GovAlta/ui-components label:${labelQuery}", type: ISSUE, first: 1) { issueCount }`;
-      }).join("\n");
-
-      const graphQLQuery = `
-        query {
-          ${queryFields}
-        }
-      `;
-
-      try {
-        const response = await fetch("https://api.github.com/graphql", {
-          method: "POST",
-          headers: {
-            "Content-Type": "application/json",
-            Authorization: `Bearer ${token}`,
-          },
-          body: JSON.stringify({ query: graphQLQuery }),
-        });
-
-        const result = await response.json();
-        if (result.errors) {
-          console.error("GraphQL errors:", result.errors);
-          return;
-        }
-
-        const newIssueCounts: Record<string, number> = {};
-        cards.forEach((card) => {
-          const alias = card.name.replace(/\s+/g, "").toLowerCase();
-          newIssueCounts[card.name] =
-            result.data[alias] && result.data[alias].issueCount
-              ? result.data[alias].issueCount
-              : 0;
-        });
-
-        setIssueCounts(newIssueCounts);
-      } catch (error) {
-        console.error("Error fetching issue counts:", error);
-      }
+    const loadIssueCounts = async () => {
+      const issueCounts = await fetchAllIssueCounts(cards);
+      setIssueCounts(issueCounts);
     };
 
-    fetchIssueCountsGraphQL();
+    loadIssueCounts();
   }, [cards]);
 
   const renderTable = () => (