fix(action-sheet): use radio role under htmlAttributes

Author: thetaPC

core/src/components/action-sheet/action-sheet-interface.ts

@@ -19,7 +19,7 @@ export interface ActionSheetOptions {
 
 export interface ActionSheetButton<T = any> {
   text?: string;
-  role?: LiteralUnion<'cancel' | 'destructive' | 'selected' | 'radio', string>;
+  role?: LiteralUnion<'cancel' | 'destructive' | 'selected', string>;
   icon?: string;
   cssClass?: string | string[];
   id?: string;

core/src/components/action-sheet/action-sheet.tsx

@@ -313,7 +313,10 @@ export class ActionSheet implements ComponentInterface, OverlayInterface {
    * Get all radio buttons (buttons with role="radio").
    */
   private getRadioButtons(): ActionSheetButton[] {
-    return this.getButtons().filter((b) => b.role === 'radio' && !isCancel(b.role));
+    return this.getButtons().filter((b) => {
+      const role = b.htmlAttributes?.role;
+      return role === 'radio' && !isCancel(role);
+    });
   }
 
   /**
@@ -513,7 +516,7 @@ export class ActionSheet implements ComponentInterface, OverlayInterface {
     const { activeRadioId } = this;
 
     return filteredButtons.map((b, index) => {
-      const isRadio = b.role === 'radio';
+      const isRadio = b.htmlAttributes?.role === 'radio';
       const buttonId = this.getButtonId(b, index);
       const radioButtons = this.getRadioButtons();
       const isActiveRadio = isRadio && buttonId === activeRadioId;

core/src/components/action-sheet/test/a11y/index.html

@@ -108,15 +108,15 @@ <h1>Action Sheet - A11y</h1>
           buttons: [
             {
               text: 'Option 1',
-              role: 'radio',
               htmlAttributes: {
+                role: 'radio',
                 'aria-checked': 'false',
               },
             },
             {
               text: 'Option 2',
-              role: 'radio',
               htmlAttributes: {
+                role: 'radio',
                 'aria-checked': 'true',
               },
             },

core/src/components/select/select.tsx

@@ -559,14 +559,15 @@ export class Select implements ComponentInterface {
       const isSelected = isOptionSelected(selectValue, value, this.compareWith);
 
       return {
-        role: 'radio',
+        role: isOptionSelected(selectValue, value, this.compareWith) ? 'selected' : '',
         text: option.textContent,
         cssClass: optClass,
         handler: () => {
           this.setValue(value);
         },
         htmlAttributes: {
           'aria-checked': isSelected ? 'true' : 'false',
+          role: 'radio',
         },
       } as ActionSheetButton;
     });