Radio: add aria-describedby association for validation messages (#824)

* fix(radio): add aria-describedby association for message

* chore: add changeset

.changeset/thin-cherries-suffer.md

@@ -0,0 +1,5 @@
+---
+'@ithaka/pharos': minor
+---
+
+Radio buttons: Add aria-describedby association for validation message

packages/pharos/src/components/radio-button/pharos-radio-button.test.ts

@@ -35,6 +35,17 @@ describe('pharos-radio-button', () => {
     await expect(component).to.be.accessible();
   });
 
+  it('has association with validation message', async () => {
+    component = await fixture(html`
+      <test-pharos-radio-button message="this is a test"
+        ><span slot="label">test radio</span></test-pharos-radio-button
+      >
+    `);
+    await expect(
+      component.renderRoot.querySelector('input')?.getAttribute('aria-describedby')
+    ).to.equal('message');
+  });
+
   it('has an attribute to set check value', async () => {
     component = await fixture(html`
       <test-pharos-radio-button checked

packages/pharos/src/components/radio-button/pharos-radio-button.ts

@@ -1,5 +1,6 @@
 import { html } from 'lit';
 import { property, query } from 'lit/decorators.js';
+import { ifDefined } from 'lit/directives/if-defined.js';
 import type { TemplateResult, CSSResultArray } from 'lit';
 import { radioButtonStyles } from './pharos-radio-button.css';
 import { FormElement } from '../base/form-element';
@@ -13,6 +14,7 @@ const LINKS = `a[href],pharos-link[href],[data-pharos-component='PharosLink'][hr
  * @tag pharos-radio-button
  *
  * @slot label - Contains the label content.
+ * @slot message - Contains message content to show below the input.
  *
  * @fires change - Fires when the value has changed
  */
@@ -84,6 +86,7 @@ export class PharosRadioButton extends FormMixin(FormElement) {
         ?required="${this.required}"
         ?disabled=${this.disabled}
         @change=${this.onChange}
+        aria-describedby="${ifDefined(this.messageId)}"
       />
       <div class="input-wrapper">
         <svg