From 48d6ddb4eff283be38206158361f2fa3f65aa571 Mon Sep 17 00:00:00 2001
From: Benny Powers <web@bennypowers.com>
Date: Mon, 17 Jun 2024 11:15:07 +0300
Subject: [PATCH] fix(health-index): screen readers

---
 .../rh-health-index/demo/rh-health-index.html | 68 +------------------
 elements/rh-health-index/demo/simple.html     |  5 --
 elements/rh-health-index/rh-health-index.ts   | 11 ++-
 3 files changed, 10 insertions(+), 74 deletions(-)
 delete mode 100644 elements/rh-health-index/demo/simple.html

diff --git a/elements/rh-health-index/demo/rh-health-index.html b/elements/rh-health-index/demo/rh-health-index.html
index 6be6e804a1..feab91f110 100644
--- a/elements/rh-health-index/demo/rh-health-index.html
+++ b/elements/rh-health-index/demo/rh-health-index.html
@@ -1,70 +1,6 @@
-<ul class="demo">
-  <li>
-    <h2>SM</h2>
-    <rh-health-index grade="A" size="sm">A</rh-health-index>
-    <rh-health-index grade="B" size="sm">B</rh-health-index>
-    <rh-health-index grade="C" size="sm">C</rh-health-index>
-    <rh-health-index grade="D" size="sm">D</rh-health-index>
-    <rh-health-index grade="E" size="sm">E</rh-health-index>
-    <rh-health-index grade="F" size="sm">F</rh-health-index>
-  </li>
-
-  <li>
-    <h2>Default</h2>
-    <rh-health-index grade="A">A</rh-health-index>
-    <rh-health-index grade="B">B</rh-health-index>
-    <rh-health-index grade="C">C</rh-health-index>
-    <rh-health-index grade="D">D</rh-health-index>
-    <rh-health-index grade="E">E</rh-health-index>
-    <rh-health-index grade="F">F</rh-health-index>
-  </li>
-
-  <li>
-    <h2>LG</h2>
-    <rh-health-index grade="A" size="lg">A</rh-health-index>
-    <rh-health-index grade="B" size="lg">B</rh-health-index>
-    <rh-health-index grade="C" size="lg">C</rh-health-index>
-    <rh-health-index grade="D" size="lg">D</rh-health-index>
-    <rh-health-index grade="E" size="lg">E</rh-health-index>
-    <rh-health-index grade="F" size="lg">F</rh-health-index>
-  </li>
-
-  <li>
-    <h2>XL</h2>
-    <rh-health-index grade="A" size="xl">A</rh-health-index>
-    <rh-health-index grade="B" size="xl">B</rh-health-index>
-    <rh-health-index grade="C" size="xl">C</rh-health-index>
-    <rh-health-index grade="D" size="xl">D</rh-health-index>
-    <rh-health-index grade="E" size="xl">E</rh-health-index>
-    <rh-health-index grade="F" size="xl">F</rh-health-index>
-  </li>
-</ul>
+<rh-health-index grade="C"
+                 size="lg">C</rh-health-index>
 
 <script type="module">
-  import '@rhds/elements/rh-surface/rh-surface.js';
   import '@rhds/elements/rh-health-index/rh-health-index.js';
 </script>
-
-<style>
-  .demo {
-    margin: 2rem;
-    padding: 0;
-    list-style: none;
-    width: 800px;
-    display: grid;
-    grid-template-columns: 1fr 1fr 1fr 1fr;
-    gap: 2rem;
-    & h2 {
-      font-size: var(--rh-font-size-body-text-lg, 1.125rem);
-    }
-    & li {
-      display: flex;
-      flex-flow: column;
-      gap: var(--rh-space-lg, 16px);
-      margin: 0;
-      padding: 0;
-    }
-  }
-</style>
-
-
diff --git a/elements/rh-health-index/demo/simple.html b/elements/rh-health-index/demo/simple.html
deleted file mode 100644
index c394408cbc..0000000000
--- a/elements/rh-health-index/demo/simple.html
+++ /dev/null
@@ -1,5 +0,0 @@
-<rh-health-index grade="C" size="lg">C</rh-health-index>
-
-<script type="module">
-    import '@rhds/elements/rh-health-index/rh-health-index.js';
-</script>
\ No newline at end of file
diff --git a/elements/rh-health-index/rh-health-index.ts b/elements/rh-health-index/rh-health-index.ts
index c6c68fe60d..4a9fa8ccdd 100644
--- a/elements/rh-health-index/rh-health-index.ts
+++ b/elements/rh-health-index/rh-health-index.ts
@@ -39,15 +39,20 @@ export class RhHealthIndex extends LitElement {
   #internals = InternalsController.of(this, {
     role: 'meter',
     ariaValueMin: '1',
-    ariaValueMax: '5',
+    ariaValueMax: '6',
+    ariaValueText: 'Grade A',
+    ariaLabel: 'Health graded A through F',
+    ariaRoleDescription: 'Level indicator',
   });
 
   protected override willUpdate(changed: PropertyValues<this>): void {
+    this.role = 'meter';
     this.grade = this.grade.toUpperCase() as this['grade'];
     if (changed.has('grade')) {
       const { grade } = this;
-      this.#internals.ariaValueNow = (RhHealthIndex.grades.indexOf(grade) + 1).toString();
-      this.#internals.ariaValueText = `Health: grade ${grade} out of A through F`;
+      const gradeNumeral = (RhHealthIndex.grades.indexOf(grade) + 1);
+      this.#internals.ariaValueNow = gradeNumeral.toString();
+      this.#internals.ariaValueText = `Grade ${grade}`;
     }
   }