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