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 @@
-
- -
-
SM
- A
- B
- C
- D
- E
- F
-
-
- -
-
Default
- A
- B
- C
- D
- E
- F
-
-
- -
-
LG
- A
- B
- C
- D
- E
- F
-
-
- -
-
XL
- A
- B
- C
- D
- E
- F
-
-
+C
-
-
-
-
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 @@
-C
-
-
\ 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): 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}`;
}
}