Aria/main region

docs/.vitepress/components/BreakpointPage.vue

@@ -131,7 +131,7 @@ const stickySidebarTokens = [
           (1440px) for development.
         </p>
 
-        <div class="br-screen-size-diagram-wrap sgds:w-full" aria-label="Screen size breakpoint diagram" tabindex="0">
+        <div class="br-screen-size-diagram-wrap sgds:w-full" tabindex="0">
           <div class="br-screen-size-diagram sgds:relative sgds:h-[18.5rem] sgds:w-full">
             <svg
               viewBox="0 0 1672 480"

docs/.vitepress/components/ColourPalettePage.vue

@@ -1782,7 +1782,7 @@ const openContrastInfo = () => {
         <strong>APCA (Accessible Perceptual Contrast Algorithm)</strong> is a newer model that's more accurate for real reading. As a rough guide, body text needs an absolute value around <span class="sgds:font-semibold">60</span> or higher.
       </p>
     </div>
-    <sgds-button slot="footer" variant="primary" @click="contrastInfoOpen = false">Got it</sgds-button>
+    <sgds-button slot="footer" variant="primary" ariaLabel="Got it" @click="contrastInfoOpen = false">Got it</sgds-button>
   </sgds-modal>
 </template>
 

docs/.vitepress/components/SpacingPage.vue

@@ -140,8 +140,8 @@ const progressionCurvePath = "M 16 144 C 84 142 152 136 226 128 C 292 120 348 10
 
           <div class="typography-page-template__demo-pane">
             <div class="typography-page-template__card spacing-page__demo-card spacing-page__progression-card sgds:min-h-[20rem] sgds:max-md:min-h-[14rem]">
-              <div class="spacing-page__chart" aria-label="Spacing progression from 2 px to 128 px" tabindex="0">
-                <svg class="spacing-page__chart-line" :viewBox="`0 0 ${chartWidth} ${chartHeight}`" aria-hidden="true">
+              <div class="spacing-page__chart" tabindex="0">
+                <svg class="spacing-page__chart-line" :viewBox="`0 0 ${chartWidth} ${chartHeight}`" role="img" aria-label="Spacing progression from 2 px to 128 px">
                   <path :d="progressionCurvePath" />
                 </svg>
 

docs/.vitepress/components/StoriesOverviewPage.vue

@@ -72,6 +72,7 @@
               variant="primary"
               tone="neutral"
               size="md"
+              ariaLabel="Read post"
               >Read post</sgds-button
             >
           </div>

docs/.vitepress/components/ai/AiMcpServerPage.vue

@@ -47,7 +47,7 @@ const openFigmaToCodeTab = (event: Event) => {
           Use Figma MCP when you need AI to work with real Figma context, selected frames, or live UI captures. Use Figma Make when you want to explore interface ideas from prompts before refining them with SGDS guidance.
         </p>
 
-        <div class="sgds-grid sgds:gap-layout-md" aria-label="Figma workflow options">
+        <div class="sgds-grid sgds:gap-layout-md">
         <a
           v-for="card in figmaWorkflowCards"
           :key="card.title"

docs/.vitepress/components/ai/AiUseWithSgdsPage.vue

@@ -43,7 +43,7 @@ const developmentWorkflowCards = [
         <p class="sgds:text-body-md sgds:font-regular sgds:leading-xs sgds:tracking-normal sgds:m-0 sgds:text-subtle">
           Use this page when you are building or improving SGDS code with an AI coding tool. Start with a new SGDS project, or use an existing codebase that needs to adopt SGDS components, utilities, and layout guidance.
         </p>
-        <div class="sgds-grid sgds:gap-layout-md" aria-label="Development workflow paths">
+        <div class="sgds-grid sgds:gap-layout-md">
           <a
             v-for="card in developmentWorkflowCards"
             :key="card.title"

docs/.vitepress/components/ai/UserJourneyMap.vue

@@ -701,6 +701,7 @@ function setScenario(id: ScenarioFilter) {
             size="sm"
             :variant="activePersona === f.id ? 'primary' : 'outline'"
             :tone="activePersona === f.id ? undefined : 'neutral'"
+            :ariaLabel="f.label"
             :aria-pressed="activePersona === f.id"
             @click="setPersona(f.id)"
           >{{ f.label }}</sgds-button>
@@ -712,6 +713,7 @@ function setScenario(id: ScenarioFilter) {
             size="sm"
             :variant="activeScenario === f.id ? 'primary' : 'outline'"
             :tone="activeScenario === f.id ? undefined : 'neutral'"
+            :ariaLabel="f.label"
             :aria-pressed="activeScenario === f.id"
             @click="setScenario(f.id)"
           >{{ f.label }}</sgds-button>

docs/.vitepress/components/components/TemplatePreview.vue

@@ -120,6 +120,7 @@ onMounted(() => {
           variant="ghost"
           tone="neutral"
           size="sm"
+          :ariaLabel="kind === 'block' ? 'Back to blocks' : 'Back to templates'"
           :title="kind === 'block' ? 'Back to blocks' : 'Back to templates'"
           @click="navigateToOverview"
         >

docs/.vitepress/components/components/TemplatePreviewToolbar.vue

@@ -128,7 +128,7 @@ onBeforeUnmount(() => {
 </script>
 
 <template>
-  <div class="template-preview-toolbar" aria-label="Live preview toolbar">
+  <div class="template-preview-toolbar">
     <button
       v-if="promptOpen"
       type="button"
@@ -149,6 +149,7 @@ onBeforeUnmount(() => {
           tone="fixed-light"
           size="sm"
           class="template-preview-template-button"
+          ariaLabel="Select template"
         >
           <span class="template-preview-toolbar-label">{{ selectedTitle }}</span>
           <sgds-icon name="chevron-down" slot="rightIcon"></sgds-icon>
@@ -176,6 +177,7 @@ onBeforeUnmount(() => {
           tone="fixed-light"
           size="sm"
           class="template-preview-template-button"
+          ariaLabel="Select block"
         >
           <span class="template-preview-toolbar-label">{{ selectedTitle }}</span>
           <sgds-icon name="chevron-down" slot="rightIcon"></sgds-icon>

docs/.vitepress/components/components/TemplatesOverviewPage.vue

@@ -251,6 +251,7 @@ const getThumbnailSrc = (key: string) => {
                   variant="outline"
                   tone="neutral"
                   class="sgds:flex-none"
+                  ariaLabel="Filters"
                   :aria-expanded="mobileFiltersOpen ? 'true' : 'false'"
                   aria-controls="template-overview-filter-drawer"
                   @click="mobileFiltersOpen = !mobileFiltersOpen"
@@ -303,8 +304,8 @@ const getThumbnailSrc = (key: string) => {
                   </sgds-checkbox-group>
                 </div>
                 <div slot="footer" class="sgds:flex sgds:justify-between sgds:gap-component-sm">
-                  <sgds-button variant="ghost" tone="neutral" @click="clearFilters">Clear all</sgds-button>
-                  <sgds-button @click="mobileFiltersOpen = false">Done</sgds-button>
+                  <sgds-button variant="ghost" tone="neutral" ariaLabel="Clear all" @click="clearFilters">Clear all</sgds-button>
+                  <sgds-button ariaLabel="Done" @click="mobileFiltersOpen = false">Done</sgds-button>
                 </div>
               </sgds-drawer>
               <h2 class="sgds-col-4 sgds-col-sm-8 sgds-col-md-8 sgds-col-lg-5 sgds:m-0 sgds:text-subtitle-md sgds:font-semibold sgds:leading-xs sgds:tracking-normal sgds:text-heading-default">
@@ -365,7 +366,7 @@ const getThumbnailSrc = (key: string) => {
             >
               <h3 class="sgds:m-0 sgds:text-subtitle-md sgds:font-semibold sgds:text-heading-default">No {{ itemNoun }}s found</h3>
               <p class="sgds:m-0 sgds:text-body-md sgds:text-body-subtle">Try clearing the filters.</p>
-              <sgds-button variant="outline" tone="neutral" @click="clearFilters">Clear filters</sgds-button>
+              <sgds-button variant="outline" tone="neutral" ariaLabel="Clear filters" @click="clearFilters">Clear filters</sgds-button>
             </div>
 
             <div class="sgds:mt-layout-sm sgds:flex sgds:justify-end">

docs/.vitepress/components/get-started/GetStartedPage.vue

@@ -86,6 +86,7 @@ watch(currentPath, () => {
         <sgds-button
           variant="outline"
           tone="neutral"
+          ariaLabel="Browse Get started"
           @click="mobileSideNavOpen = true"
         >
           <sgds-icon slot="leftIcon" name="menu"></sgds-icon>

docs/.vitepress/components/landing/Hero.vue

@@ -165,6 +165,7 @@ onBeforeUnmount(() => {
           :variant="button.variant"
           :tone="button.tone"
           :href="button.link"
+          :ariaLabel="button.label"
         >
           {{ button.label }}
         </sgds-button>

docs/.vitepress/components/ui/CodeBlock.vue

@@ -440,7 +440,7 @@ const langLabel = computed(() => {
         size="xs"
         variant="ghost"
         tone="neutral"
-        :aria-label="copied ? 'Copied!' : (prompt ? 'Copy prompt' : 'Copy code')"
+        :ariaLabel="copied ? 'Copied!' : (prompt ? 'Copy prompt' : 'Copy code')"
         @click="copy"
       >
         <sgds-icon :name="copied ? 'check' : 'files'" size="sm" slot="leftIcon"></sgds-icon>
@@ -449,7 +449,7 @@ const langLabel = computed(() => {
     </div>
 
     <!-- Prompt area -->
-    <div v-if="prompt" class="cb-prompt-text sgds:text-default sgds:text-body-sm sgds:font-regular sgds:leading-xs sgds:tracking-normal sgds:m-0 sgds:min-w-0 sgds:w-full sgds:max-w-full sgds:whitespace-pre-wrap sgds:break-words sgds:[overflow-wrap:anywhere] sgds:py-[1rem] sgds:px-[1rem]" aria-label="Example prompt" tabindex="0">
+    <div v-if="prompt" class="cb-prompt-text sgds:text-default sgds:text-body-sm sgds:font-regular sgds:leading-xs sgds:tracking-normal sgds:m-0 sgds:min-w-0 sgds:w-full sgds:max-w-full sgds:whitespace-pre-wrap sgds:break-words sgds:[overflow-wrap:anywhere] sgds:py-[1rem] sgds:px-[1rem]" tabindex="0">
       <slot v-if="hasSlotContent" />
       <template v-else>{{ code }}</template>
     </div>