@transferwise/components 0.0.0-experimental-613665e → 0.0.0-experimental-9b525c5

package/src/radioGroup/RadioGroup.tsx

@@ -2,6 +2,7 @@ import { useState } from 'react';
 
 import Radio from '../radio';
 import { RadioProps } from '../radio/Radio';
+import { useInputAttributes } from '../inputs/contexts';
 
 export type RadioGroupRadio<T extends string | number = string> = Omit<
   RadioProps<T>,
@@ -21,10 +22,12 @@ export default function RadioGroup<T extends string | number = never>({
   selectedValue: controlledValue,
   onChange,
 }: RadioGroupProps<T>) {
+  const inputAttributes = useInputAttributes({ nonLabelable: true });
+
   const [uncontrolledValue, setUncontrolledValue] = useState(controlledValue);
 
   return radios.length > 0 ? (
-    <div role="radiogroup">
+    <div role="radiogroup" {...inputAttributes}>
       {radios.map(({ value = '' as T, ...restProps }, index) => (
         <Radio
           // eslint-disable-next-line react/no-array-index-key

package/src/switch/Switch.spec.tsx

@@ -1,3 +1,4 @@
+import { Field } from '../field/Field';
 import { render, fireEvent, screen } from '../test-utils';
 
 import Switch from './Switch';
@@ -81,4 +82,13 @@ describe('Switch', () => {
     fireEvent.click(input);
     expect(mockCallback).not.toHaveBeenCalled();
   });
+
+  it('supports `Field` for labeling', () => {
+    render(
+      <Field label="Dark mode">
+        <Switch checked onClick={props.onClick} />
+      </Field>,
+    );
+    expect(screen.getByLabelText('Dark mode')).toHaveAttribute('role', 'switch');
+  });
 });

package/src/switch/Switch.tsx

@@ -1,13 +1,16 @@
 import { CheckCircleFill, CrossCircleFill } from '@transferwise/icons';
 import { useTheme } from '@wise/components-theming';
 import classnames from 'classnames';
-import { KeyboardEventHandler, MouseEvent } from 'react';
+import type { KeyboardEventHandler, MouseEvent } from 'react';
 
-import { CommonProps } from '../common';
-import { logActionRequiredIf } from '../utilities';
+import type { CommonProps } from '../common';
+import { useInputAttributes } from '../inputs/contexts';
 
 export type SwitchProps = CommonProps & {
-  /** Used to describe the purpose of the switch. To be used if there is no external label (i.e. aria-labelledby is null) */
+  /**
+   * Used to describe the purpose of the switch. To be used if there is no external label (i.e. aria-labelledby is null)
+   * @deprecated Use `Field` wrapper or the `aria-labelledby` attribute instead.
+   */
   'aria-label'?: string;
   /** A reference to a label that describes the purpose of the switch. Ignored if aria-label is provided */
   'aria-labelledby'?: string;
@@ -21,8 +24,18 @@ export type SwitchProps = CommonProps & {
 };
 
 const Switch = (props: SwitchProps) => {
+  const inputAttributes = useInputAttributes({ nonLabelable: true });
+
   const { isModern } = useTheme();
-  const { checked, className, id, onClick, disabled } = props;
+  const {
+    checked,
+    className,
+    id = inputAttributes.id,
+    'aria-label': ariaLabel,
+    'aria-labelledby': ariaLabelledbyProp,
+    onClick,
+    disabled,
+  } = props;
 
   const handleKeyDown: KeyboardEventHandler = (event) => {
     if (event.key === ' ') {
@@ -50,13 +63,8 @@ const Switch = (props: SwitchProps) => {
     );
   };
 
-  const ariaLabel = props['aria-label'];
-  const ariaLabelledby = ariaLabel ? undefined : props['aria-labelledby'];
-
-  logActionRequiredIf(
-    'Switch now expects either `aria-label` or `aria-labelledby`, and will soon make these props required. Please update your usage to provide one or the other.',
-    !ariaLabel && !ariaLabelledby,
-  );
+  const ariaLabelledby =
+    (ariaLabel ? undefined : ariaLabelledbyProp) ?? inputAttributes['aria-labelledby'];
 
   return (
     <span
@@ -66,7 +74,7 @@ const Switch = (props: SwitchProps) => {
         {
           'np-switch--unchecked': !checked,
           'np-switch--checked': checked,
-          disabled: disabled,
+          disabled,
         },
         className,
       )}
@@ -74,6 +82,7 @@ const Switch = (props: SwitchProps) => {
       role="switch"
       aria-checked={checked}
       aria-label={ariaLabel}
+      {...inputAttributes}
       aria-labelledby={ariaLabelledby}
       id={id}
       aria-disabled={disabled}