fix(hotfix/5.135.6): Add ariaLabel prop for ChoiceGroupOption

common/changes/office-ui-fabric-react/hotfix_13-hotfix-5.135.6_2024-09-24-08-09.json

@@ -0,0 +1,11 @@
+{
+  "changes": [
+    {
+      "packageName": "office-ui-fabric-react",
+      "comment": "Add ariaLabel prop for ChoiceGroupOption.",
+      "type": "patch"
+    }
+  ],
+  "packageName": "office-ui-fabric-react",
+  "email": "jiagao@microsoft.com"
+}

packages/office-ui-fabric-react/src/components/ChoiceGroup/ChoiceGroup.test.tsx

@@ -198,4 +198,27 @@ describe('ChoiceGroup', () => {
     expect(extraAttributeGetter(0)).toEqual('auto1');
     expect(extraAttributeGetter(1)).toBeNull();
   });
+
+  it('can assign a custom aria label', () => {
+    const option4: IChoiceGroupOption[] = [{ key: '4', text: '4', ariaLabel: 'Custom aria label' }];
+    const choiceGroup = ReactTestUtils.renderIntoDocument<ChoiceGroup>(
+      <ChoiceGroup
+        label='testgroup'
+        options={ TEST_OPTIONS.concat(option4) }
+        required={ true }
+      />
+    );
+
+    const renderedDOM = ReactDOM.findDOMNode(choiceGroup as React.ReactInstance) as Element;
+    const choiceOptions = renderedDOM.querySelectorAll(QUERY_SELECTOR);
+
+    expect(choiceOptions.length).toBe(4);
+
+    expect((choiceOptions[0] as HTMLInputElement).getAttribute('aria-label')).toBeNull();
+    expect((choiceOptions[1] as HTMLInputElement).getAttribute('aria-label')).toBeNull();
+    expect((choiceOptions[2] as HTMLInputElement).getAttribute('aria-label')).toBeNull();
+
+    expect((choiceOptions[3] as HTMLInputElement).getAttribute('aria-labelledby')).toBeNull();
+    expect((choiceOptions[3] as HTMLInputElement).getAttribute('aria-label')).toEqual('Custom aria label');
+  });
 });

packages/office-ui-fabric-react/src/components/ChoiceGroup/ChoiceGroup.tsx

@@ -31,7 +31,7 @@ export class ChoiceGroup extends BaseComponent<IChoiceGroupProps, IChoiceGroupSt
   private _labelId: string;
   private _inputElement = createRef<HTMLInputElement>();
 
-  constructor(props: IChoiceGroupProps, ) {
+  constructor(props: IChoiceGroupProps,) {
     super(props);
 
     this._warnDeprecations({ 'onChanged': 'onChange' });
@@ -122,7 +122,8 @@ export class ChoiceGroup extends BaseComponent<IChoiceGroupProps, IChoiceGroupSt
                       onChange={ this._onChange.bind(this, option) }
                       onFocus={ this._onFocus.bind(this, option) }
                       onBlur={ this._onBlur.bind(this, option) }
-                      aria-labelledby={ option.labelId }
+                      aria-labelledby={ option.ariaLabel ? undefined : option.labelId }
+                      aria-label={ option.ariaLabel }
                       { ...getNativeProps(option, inputProperties) }
                     />
                     { onRenderField(option, this._onRenderField) }

packages/office-ui-fabric-react/src/components/ChoiceGroup/ChoiceGroup.types.ts

@@ -112,4 +112,9 @@ export interface IChoiceGroupOption extends React.HTMLAttributes<HTMLElement | H
    * This value is maintained by the component and is accessible during onRenderField
    */
   labelId?: string;
+
+  /**
+   * The aria label of the ChoiceGroupOption for the benefit of screen readers.
+   */
+  ariaLabel?: string;
 }

packages/office-ui-fabric-react/src/components/ChoiceGroup/__snapshots__/ChoiceGroup.test.tsx.snap

@@ -20,6 +20,7 @@ exports[`ChoiceGroup renders ChoiceGroup correctly 1`] = `
           className="ms-ChoiceField-wrapper"
         >
           <input
+            aria-label={undefined}
             aria-labelledby="ChoiceGroupLabel1-1"
             checked={false}
             className="ms-ChoiceField-input"
@@ -53,6 +54,7 @@ exports[`ChoiceGroup renders ChoiceGroup correctly 1`] = `
           className="ms-ChoiceField-wrapper"
         >
           <input
+            aria-label={undefined}
             aria-labelledby="ChoiceGroupLabel1-2"
             checked={false}
             className="ms-ChoiceField-input"
@@ -85,6 +87,7 @@ exports[`ChoiceGroup renders ChoiceGroup correctly 1`] = `
           className="ms-ChoiceField-wrapper"
         >
           <input
+            aria-label={undefined}
             aria-labelledby="ChoiceGroupLabel1-3"
             checked={false}
             className="ms-ChoiceField-input"

packages/office-ui-fabric-react/src/components/ChoiceGroup/examples/ChoiceGroup.Basic.Example.tsx

@@ -31,6 +31,7 @@ export class ChoiceGroupBasicExample extends React.Component<{}, IChoiceGroupBas
             {
               key: 'B',
               text: 'Option B',
+              ariaLabel: 'Custom aria-label'
             },
             {
               key: 'C',