fix(radio): properly announce radios on screen readers

core/src/components.d.ts

@@ -1708,7 +1708,7 @@ export namespace Components {
          */
         "name": string;
         "setButtonTabindex": (value: number) => Promise<void>;
-        "setFocus": () => Promise<void>;
+        "setFocus": (ev: any) => Promise<void>;
         /**
           * the value of the radio.
          */

core/src/components/alert/alert.tsx

@@ -158,15 +158,15 @@ export class Alert implements ComponentInterface, OverlayInterface {
 
     // If hitting arrow down or arrow right, move to the next radio
     // If we're on the last radio, move to the first radio
-    if (['ArrowDown', 'ArrowRight'].includes(ev.key)) {
+    if (['ArrowDown', 'ArrowRight'].includes(ev.code)) {
       nextEl = (index === radios.length - 1)
         ? radios[0]
         : radios[index + 1];
     }
 
     // If hitting arrow up or arrow left, move to the previous radio
     // If we're on the first radio, move to the last radio
-    if (['ArrowUp', 'ArrowLeft'].includes(ev.key)) {
+    if (['ArrowUp', 'ArrowLeft'].includes(ev.code)) {
       nextEl = (index === 0)
         ? radios[radios.length - 1]
         : radios[index - 1];

core/src/components/radio-group/radio-group.tsx

@@ -10,6 +10,7 @@ export class RadioGroup implements ComponentInterface {
 
   private inputId = `ion-rg-${radioGroupIds++}`;
   private labelId = `${this.inputId}-lbl`;
+  private label?: HTMLIonLabelElement | null;
 
   @Element() el!: HTMLElement;
 
@@ -68,10 +69,9 @@ export class RadioGroup implements ComponentInterface {
   async connectedCallback() {
     // Get the list header if it exists and set the id
     // this is used to set aria-labelledby
-    const el = this.el;
-    const header = el.querySelector('ion-list-header') || el.querySelector('ion-item-divider');
+    const header = this.el.querySelector('ion-list-header') || this.el.querySelector('ion-item-divider');
     if (header) {
-      const label = header.querySelector('ion-label');
+      const label = this.label = header.querySelector('ion-label');
       if (label) {
         this.labelId = label.id = this.name + '-lbl';
       }
@@ -83,6 +83,9 @@ export class RadioGroup implements ComponentInterface {
   }
 
   private onClick = (ev: Event) => {
+    ev.preventDefault();
+    ev.stopPropagation();
+
     const selectedRadio = ev.target && (ev.target as HTMLElement).closest('ion-radio');
     if (selectedRadio) {
       const currentValue = this.value;
@@ -110,42 +113,53 @@ export class RadioGroup implements ComponentInterface {
     // Only move the radio if the current focus is in the radio group
     if (ev.target && radios.includes(ev.target)) {
       const index = radios.findIndex(radio => radio === ev.target);
+      const current = radios[index];
 
       let next;
 
       // If hitting arrow down or arrow right, move to the next radio
       // If we're on the last radio, move to the first radio
-      if (['ArrowDown', 'ArrowRight'].includes(ev.key)) {
+      if (['ArrowDown', 'ArrowRight'].includes(ev.code)) {
         next = (index === radios.length - 1)
           ? radios[0]
           : radios[index + 1];
       }
 
       // If hitting arrow up or arrow left, move to the previous radio
       // If we're on the first radio, move to the last radio
-      if (['ArrowUp', 'ArrowLeft'].includes(ev.key)) {
+      if (['ArrowUp', 'ArrowLeft'].includes(ev.code)) {
         next = (index === 0)
           ? radios[radios.length - 1]
           : radios[index - 1];
       }
 
       if (next && radios.includes(next)) {
-        next.setFocus();
+        next.setFocus(ev);
 
         if (!inSelectPopover) {
           this.value = next.value;
         }
       }
+
+      // Update the radio group value when a user presses the
+      // space bar on top of a selected radio (only applies
+      // to radios in a select popover)
+      if (['Space'].includes(ev.code)) {
+        this.value = current.value;
+      }
     }
   }
 
   render() {
+    const { label, labelId } = this;
+    const mode = getIonMode(this);
+
     return (
       <Host
         role="radiogroup"
-        aria-labelledby={this.labelId}
+        aria-labelledby={label ? labelId : null}
         onClick={this.onClick}
-        class={getIonMode(this)}
+        class={mode}
       >
       </Host>
     );

core/src/components/radio-group/test/basic/index.html

@@ -20,85 +20,156 @@
     </ion-header>
 
     <ion-content class="outer-content">
-      <ion-radio-group id="dynamicDisabled" disabled name="tannen" id="group" value="biff">
-        <ion-list-header>
-          <ion-label>Luckiest Man On Earth <span id="group-value"></span></ion-label>
-        </ion-list-header>
-
-        <ion-item>
-          <ion-label>Biff
-            <span id="biff"></span>
-          </ion-label>
-          <ion-radio value="biff" slot="start"></ion-radio>
-        </ion-item>
-
-        <ion-item>
-          <ion-label>Griff
-            <span id="griff"></span>
-          </ion-label>
-          <ion-radio value="griff" slot="start"></ion-radio>
-        </ion-item>
-
-        <ion-item>
-          <ion-label>Buford
-            <span id="buford"></span>
-          </ion-label>
-          <ion-radio value="buford" slot="start"></ion-radio>
-        </ion-item>
-
-        <ion-item>
-          <ion-label>George</ion-label>
-          <ion-radio value="george" slot="start"></ion-radio>
-        </ion-item>
-
-      </ion-radio-group>
-
-      <ion-button onClick="addSelect()">Add Select</ion-button>
-      <ion-button onClick="addCheckedSelect()">Add Checked Select</ion-button>
-      <ion-button onClick="removeSelect()">Remove Select</ion-button>
+      <p class="ion-text-center">
+        <ion-button onClick="addRadio()">Add Radio</ion-button>
+        <ion-button onClick="addChecked()">Add Checked</ion-button>
+        <ion-button id="removeButton" onClick="removeRadio()">Remove Radio</ion-button>
+      </p>
 
+      <ion-list>
+        <ion-radio-group id="dynamicDisabled" disabled name="tannen" id="group" value="biff">
+          <ion-list-header>
+            <ion-label>Luckiest Man On Earth <span id="group-value"></span></ion-label>
+          </ion-list-header>
+
+          <ion-item>
+            <ion-label>Biff
+              <span id="biff"></span>
+            </ion-label>
+            <ion-radio value="biff" slot="start"></ion-radio>
+          </ion-item>
+
+          <ion-item>
+            <ion-label>Griff
+              <span id="griff"></span>
+            </ion-label>
+            <ion-radio value="griff" slot="start"></ion-radio>
+          </ion-item>
+
+          <ion-item>
+            <ion-label>Buford
+              <span id="buford"></span>
+            </ion-label>
+            <ion-radio value="buford" slot="start"></ion-radio>
+          </ion-item>
+
+          <ion-item>
+            <ion-label>George</ion-label>
+            <ion-radio value="george" slot="start"></ion-radio>
+          </ion-item>
+        </ion-radio-group>
+      </ion-list>
+
+      <ion-list>
+        <ion-radio-group value="huey">
+          <ion-item>
+            <ion-label>Huey</ion-label>
+            <ion-radio slot="start" value="huey"></ion-radio>
+          </ion-item>
+
+          <ion-item>
+            <ion-label>Dewey</ion-label>
+            <ion-radio slot="start" value="dewey"></ion-radio>
+          </ion-item>
+
+          <ion-item>
+            <ion-label>Louie</ion-label>
+            <ion-radio slot="start" value="louie"></ion-radio>
+          </ion-item>
+        </ion-radio-group>
+      </ion-list>
+
+      <ion-list>
+        <ion-radio-group value="huey">
+          <ion-item-divider>
+            <ion-label>
+              Maintenance Drone
+            </ion-label>
+          </ion-item-divider>
+
+          <ion-item>
+            <ion-label>Huey</ion-label>
+            <ion-radio slot="start" value="huey"></ion-radio>
+          </ion-item>
+
+          <ion-item>
+            <ion-label>Dewey</ion-label>
+            <ion-radio slot="start" value="dewey"></ion-radio>
+          </ion-item>
+
+          <ion-item>
+            <ion-label>Louie</ion-label>
+            <ion-radio slot="start" value="louie"></ion-radio>
+          </ion-item>
+        </ion-radio-group>
+      </ion-list>
     </ion-content>
 
     <style>
       .outer-content {
         --background: #f2f2f2;
       }
+
+      ion-list {
+        margin-bottom: 10px !important;
+      }
     </style>
+
     <script>
       let count = 0;
+      const removeButton = document.querySelector('#removeButton');
+
       const valueEl = document.querySelector('#group-value');
       const group = document.querySelector('ion-radio-group');
+
       group.addEventListener('ionChange', (ev) => {
         valueEl.textContent = group.value;
       });
+
       customElements.whenDefined('ion-radio-group')
        .then(() => group.componentOnReady())
        .then(() => {
          valueEl.textContent = group.value;
         });
 
-      function addSelect() {
+      function addRadio() {
         const item = document.createElement('ion-item');
+
         item.innerHTML = `
           <ion-label>Item ${count}</ion-label>
           <ion-radio value="item-${count}" slot="start"></ion-radio>
         `;
         group.appendChild(item);
         count++;
+
+        removeButton.disabled = false;
       }
-      function addCheckedSelect() {
+
+      function addChecked() {
         const item = document.createElement('ion-item');
         item.innerHTML = `
           <ion-label>Item ${count}</ion-label>
           <ion-radio value="item-${count}" slot="start"></ion-radio>
         `;
         group.appendChild(item);
-        
+
         group.value = `item-${count}`;
         count++;
+
+        removeButton.disabled = false;
       }
-      function removeSelect() {
-        group.children[group.children.length - 1].remove();
+
+      function removeRadio() {
+        const removeEl = group.children[group.children.length - 1];
+
+        if (removeEl && removeEl.tagName === 'ION-ITEM') {
+          removeEl.remove();
+
+          // No more radios to remove, disable button
+          if (!group.querySelector('ion-item')) {
+            removeButton.disabled = true;
+          }
+        }
       }
     </script>
   </ion-app>

core/src/components/radio-group/test/standalone/index.html

@@ -13,28 +13,28 @@
 
 <body>
   <ion-radio-group value="danger">
-    <ion-radio></ion-radio>
+    <ion-radio aria-label="Default"></ion-radio>
 
-    <ion-radio color="primary"></ion-radio>
-    <ion-radio color="secondary"></ion-radio>
-    <ion-radio color="tertiary"></ion-radio>
-    <ion-radio color="success"></ion-radio>
-    <ion-radio color="warning"></ion-radio>
-    <ion-radio color="danger" value="danger"></ion-radio>
-    <ion-radio color="light"></ion-radio>
-    <ion-radio color="medium"></ion-radio>
-    <ion-radio color="dark"></ion-radio>
+    <ion-radio aria-label="Primary" color="primary"></ion-radio>
+    <ion-radio aria-label="Secondary" color="secondary"></ion-radio>
+    <ion-radio aria-label="Tertiary" color="tertiary"></ion-radio>
+    <ion-radio aria-label="Success" color="success"></ion-radio>
+    <ion-radio aria-label="Warning" color="warning"></ion-radio>
+    <ion-radio aria-label="Danger" color="danger" value="danger"></ion-radio>
+    <ion-radio aria-label="Light" color="light"></ion-radio>
+    <ion-radio aria-label="Medium" color="medium"></ion-radio>
+    <ion-radio aria-label="Dark" color="dark"></ion-radio>
 
-    <ion-radio disabled></ion-radio>
-    <ion-radio color="secondary" disabled></ion-radio>
+    <ion-radio aria-label="Default" disabled></ion-radio>
+    <ion-radio aria-label="Secondary" color="secondary" disabled></ion-radio>
   </ion-radio-group>
 
   <p>
     allow-empty-selection="true":&nbsp;
     <ion-radio-group allow-empty-selection="true">
-      <ion-radio color="primary" value="1"></ion-radio>
-      <ion-radio color="secondary" value="2"></ion-radio>
-      <ion-radio color="tertiary" value="3"></ion-radio>
+      <ion-radio aria-label="Primary" color="primary" value="1"></ion-radio>
+      <ion-radio aria-label="Secondary" color="secondary" value="2"></ion-radio>
+      <ion-radio aria-label="Tertiary" color="tertiary" value="3"></ion-radio>
     </ion-radio-group>
   </p>
 

core/src/components/radio/radio.scss

@@ -25,7 +25,6 @@
   pointer-events: none;
 }
 
-
 .radio-icon {
   display: flex;
 
@@ -38,11 +37,25 @@
   contain: layout size style;
 }
 
-button {
-  @include input-cover();
-}
-
 .radio-icon,
 .radio-inner {
   box-sizing: border-box;
 }
+
+label {
+  @include input-cover();
+
+  display: flex;
+
+  align-items: center;
+
+  opacity: 0;
+}
+
+input {
+  @include visually-hidden();
+}
+
+:host(:focus) {
+  outline:none;
+}