Added some aria labels and focus

Author: marcelofukumoto

shell/pages/c/_cluster/explorer/workload-dashboard/ByStateSection.vue

@@ -36,19 +36,22 @@ function toCardRows(rows: typeof props.layout.cards[0]['rows']) {
       data-testid="workload-dashboard-state-card"
       :class="'state-card--' + card.color"
       :rows="toCardRows(card.rows)"
+      :aria-label="card.color + ' workloads'"
     />
     <WorkloadCard
       v-if="layout.subHero"
       class="state-card bento-sub-hero"
       :class="'state-card--' + layout.subHero.color"
       :rows="toCardRows(layout.subHero.rows)"
+      :aria-label="layout.subHero.color + ' workloads'"
     />
     <WorkloadCard
       v-if="layout.hero"
       class="state-card bento-hero"
       :class="['state-card--' + layout.hero.color, 'bento-hero--' + layout.heroMode]"
       :body-columns="layout.heroMode === 'full' ? 3 : layout.heroMode === 'wide' ? 2 : undefined"
       :rows="toCardRows(layout.hero.rows)"
+      :aria-label="layout.hero.color + ' workloads'"
     />
   </div>
 </template>

shell/pages/c/_cluster/explorer/workload-dashboard/WorkloadCard.vue

@@ -14,6 +14,7 @@ export interface WorkloadCardRow {
 const { bodyColumns } = defineProps<{
   bodyColumns?: number;
   rows: WorkloadCardRow[];
+  ariaLabel?: string;
 }>();
 
 const gridColumns = computed(() => bodyColumns ? `repeat(${ bodyColumns }, 1fr)` : 'none');
@@ -23,6 +24,7 @@ const gridColumns = computed(() => bodyColumns ? `repeat(${ bodyColumns }, 1fr)`
   <div
     class="workload-card"
     role="group"
+    :aria-label="ariaLabel"
   >
     <ul
       class="body"

shell/pages/c/_cluster/explorer/workload-dashboard/WorkloadTypeCard.vue

@@ -119,6 +119,11 @@ function handleClick(e: MouseEvent | KeyboardEvent): void {
     border-color: var(--primary);
   }
 
+  &:focus-visible {
+    outline: 2px solid var(--primary);
+    outline-offset: -2px;
+  }
+
   .heading {
     font-size: 18px;
     font-weight: 600;