fix(health-index): screen readers

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>
-
-

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}`;
     }
   }