Merge remote-tracking branch 'origin/main' into sp/sync-feature-7.1-with-main

core/src/components/radio/radio.ios.scss

@@ -42,6 +42,9 @@
 
 // iOS Radio: Disabled
 // -----------------------------------------
+// The radio and label should use the
+// same opacity and match the other form
+// controls
 
 :host(.radio-disabled) {
   opacity: $radio-ios-disabled-opacity;

core/src/components/radio/radio.ios.vars.scss

@@ -23,7 +23,7 @@ $radio-ios-icon-border-width:         2px !default;
 $radio-ios-icon-border-style:         solid !default;
 
 /// @prop - Opacity of the disabled radio
-$radio-ios-disabled-opacity:          .3 !default;
+$radio-ios-disabled-opacity:          $form-control-ios-disabled-opacity !default;
 
 /// @prop - Margin top of the item-start in a radio
 $radio-ios-item-start-margin-top:     8px !default;

core/src/components/radio/radio.md.scss

@@ -70,12 +70,19 @@
 
 // Material Design Radio: Disabled
 // -----------------------------------------
+// The radio itself should use the disabled
+// opacity set by its spec, while the label
+// should match the other form controls
 
-// .item-md.item-radio-disabled ion-label {
-:host(.radio-disabled) {
+:host(.legacy-radio.radio-disabled),
+:host(.radio-disabled) .label-text-wrapper {
   opacity: $radio-md-disabled-opacity;
 }
 
+:host(.radio-disabled) .native-wrapper {
+  opacity: $radio-md-icon-disabled-opacity;
+}
+
 // Material Design Radio: Keyboard Focus
 // -----------------------------------------
 

core/src/components/radio/radio.md.vars.scss

@@ -34,8 +34,8 @@ $radio-md-transition-duration:       280ms !default;
 /// @prop - Transition easing of the radio
 $radio-md-transition-easing:         cubic-bezier(.4, 0, .2, 1) !default;
 
-/// @prop - Opacity of the disabled radio
-$radio-md-disabled-opacity:          .3 !default;
+/// @prop - Opacity of the disabled radio label
+$radio-md-disabled-opacity:          $form-control-md-disabled-opacity !default;
 
 /// @prop - Margin top of the item-start in a radio
 $radio-md-item-start-margin-top:     11px !default;
@@ -60,3 +60,12 @@ $radio-md-item-end-margin-bottom:    $radio-md-item-end-margin-top !default;
 
 /// @prop - Margin start of the item-end in a radio
 $radio-md-item-end-margin-start:     0 !default;
+
+/// @prop - Opacity of the disabled radio
+/// This value is used because the radio color is set to
+/// `rgb(0, 0, 0, 0.60)` when enabled and we need it to be
+/// `rgb(0, 0, 0, 0.38)` when disabled but the disabled
+/// opacity is applied on top of the transparent color so
+/// this opacity gets us the equivalent of applying `0.38`
+/// on top of an opaque radio `rgb(0, 0, 0, 1.0)`
+$radio-md-icon-disabled-opacity:     0.63 !default;

core/src/components/radio/radio.tsx

@@ -135,7 +135,8 @@ export class Radio implements ComponentInterface {
     ev.stopPropagation();
     ev.preventDefault();
 
-    this.el.focus();
+    const element = this.legacyFormController.hasLegacyControl() ? this.el : this.nativeInput;
+    element.focus();
   }
 
   /** @internal */
@@ -231,7 +232,18 @@ export class Radio implements ComponentInterface {
   }
 
   private renderRadio() {
-    const { checked, disabled, inputId, color, el, justify, labelPlacement, inheritedAttributes, hasLabel } = this;
+    const {
+      checked,
+      disabled,
+      inputId,
+      color,
+      el,
+      justify,
+      labelPlacement,
+      inheritedAttributes,
+      hasLabel,
+      buttonTabindex,
+    } = this;
     const mode = getIonMode(this);
     const inItem = hostContext('ion-item', el);
 
@@ -260,6 +272,7 @@ export class Radio implements ComponentInterface {
             checked={checked}
             disabled={disabled}
             id={inputId}
+            tabindex={buttonTabindex}
             ref={(nativeEl) => (this.nativeInput = nativeEl as HTMLInputElement)}
             {...inheritedAttributes}
           />

core/src/components/radio/test/a11y/radio.e2e.ts

@@ -15,9 +15,11 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, config }) =>
     });
   });
 
-  // TODO: FW-4155 - Enable tests once tab behavior is fixed for modern syntax.
-  test.describe.skip(title('radio: keyboard navigation'), () => {
-    test.beforeEach(async ({ page }) => {
+  test.describe(title('radio: keyboard navigation'), () => {
+    test.beforeEach(async ({ page, skip }) => {
+      // TODO (FW-2979)
+      skip.browser('webkit', 'Safari 16 only allows text fields and pop-up menus to be focused.');
+
       await page.setContent(
         `
       <ion-app>

core/src/components/radio/test/states/radio.e2e.ts

@@ -3,6 +3,20 @@ import { configs, test } from '@utils/test/playwright';
 
 configs({ directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
   test.describe(title('radio: states'), () => {
+    test('should render disabled radio correctly', async ({ page }) => {
+      await page.setContent(
+        `
+        <ion-radio-group>
+          <ion-radio disabled="true">Label</ion-radio>
+        </ion-radio-group>
+      `,
+        config
+      );
+
+      const radio = page.locator('ion-radio');
+      expect(await radio.screenshot()).toMatchSnapshot(screenshot(`radio-disabled`));
+    });
+
     test('should render disabled checked radio correctly', async ({ page }) => {
       await page.setContent(
         `