@transferwise/components 0.0.0-experimental-99925cd → 0.0.0-experimental-97a0d5e

package/src/inputs/SelectInput.story.tsx

@@ -20,7 +20,7 @@ import {
 } from './SelectInput';
 
 const meta = {
-  title: 'Forms/SelectInput',
+  title: 'components/SelectInput',
   component: SelectInput,
   tags: ['autodocs'],
   parameters: { actions: { argTypesRegex: '' } },
@@ -347,7 +347,7 @@ export const WithinField = {
   args: Months.args,
   decorators: [
     (Story) => (
-      <Field message="Something went wrong" sentiment="negative" label="Month">
+      <Field message="Something went wrong" sentiment="negative">
         <Story />
       </Field>
     ),

package/src/inputs/SelectInput.tsx

@@ -258,9 +258,8 @@ export function SelectInput<T = string, M extends boolean = false>({
   onClose,
   onClear,
 }: SelectInputProps<T, M>) {
-  const inputAttributes = useInputAttributes({ nonLabelable: true });
+  const inputAttributes = useInputAttributes();
   const id = idProp ?? inputAttributes.id;
-
   const [open, setOpen] = useState(false);
 
   const initialized = useRef(false);
@@ -296,35 +295,6 @@ export function SelectInput<T = string, M extends boolean = false>({
   const listboxRef = useRef<HTMLDivElement>(null);
   const controllerRef = filterable ? searchInputRef : listboxRef;
 
-  /**
-   * Attempts to resolve the `listbox` label
-   * @see https://storybook.wise.design/?path=/docs/forms-selectinput-accessibility--docs#labelling
-   */
-  const getListBoxLabelProps = (): {
-    listBoxLabel?: string;
-    listBoxLabelledBy?: string;
-  } => {
-    if (UNSAFE_triggerButtonProps?.['aria-label']) {
-      return {
-        listBoxLabel: UNSAFE_triggerButtonProps['aria-label'],
-      };
-    }
-
-    if (UNSAFE_triggerButtonProps?.['aria-labelledby']) {
-      return {
-        listBoxLabelledBy: UNSAFE_triggerButtonProps['aria-labelledby'],
-      };
-    }
-
-    if (inputAttributes['aria-labelledby']) {
-      return {
-        listBoxLabelledBy: inputAttributes['aria-labelledby'],
-      };
-    }
-
-    return {};
-  };
-
   return (
     <ListboxBase
       name={name}
@@ -418,7 +388,7 @@ export function SelectInput<T = string, M extends boolean = false>({
             }}
           >
             <SelectInputOptions
-              id={id ? `${id}Search` : undefined}
+              id={`${id}Search`}
               items={items}
               renderValue={renderValue}
               renderFooter={renderFooter}
@@ -428,7 +398,6 @@ export function SelectInput<T = string, M extends boolean = false>({
               listboxRef={listboxRef}
               filterQuery={deferredFilterQuery}
               onFilterChange={setFilterQuery}
-              {...getListBoxLabelProps()}
             />
           </OptionsOverlay>
         );
@@ -527,8 +496,6 @@ interface SelectInputOptionsProps<T = string>
   listboxRef: React.MutableRefObject<HTMLDivElement | null>;
   filterQuery: string;
   onFilterChange: (query: string) => void;
-  listBoxLabel?: string;
-  listBoxLabelledBy?: string;
 }
 
 function SelectInputOptions<T = string>({
@@ -542,8 +509,6 @@ function SelectInputOptions<T = string>({
   listboxRef,
   filterQuery,
   onFilterChange,
-  listBoxLabel,
-  listBoxLabelledBy,
 }: SelectInputOptionsProps<T>) {
   const intl = useIntl();
 
@@ -697,8 +662,6 @@ function SelectInputOptions<T = string>({
           id={listboxId}
           role="listbox"
           aria-orientation="vertical"
-          aria-label={listBoxLabel}
-          aria-labelledby={listBoxLabelledBy}
           tabIndex={0}
           className="np-select-input-listbox"
         >

package/src/moneyInput/MoneyInput.rtl.spec.tsx

@@ -137,13 +137,4 @@ describe('MoneyInput', () => {
       messages.selectCurrencyLabel.defaultMessage,
     );
   });
-
-  it('should have a listbox label', async () => {
-    render(<MoneyInput {...props} />);
-    const trigger = screen.getByRole('combobox');
-    await userEvent.click(trigger);
-    const triggerLabel = trigger.getAttribute('aria-label');
-    expect(triggerLabel).toBeTruthy();
-    expect(screen.getByRole('listbox', { name: triggerLabel ?? '' })).toBeInTheDocument();
-  });
 });

package/src/utilities/deprecatedProperty/{deprecatedProperty.spec.js → deprecatedProperty.spec.ts}

@@ -5,6 +5,7 @@ const props = { prop1: 'prop1', prop2: 'prop2' };
 const validator = jest.fn();
 
 describe('deprecated', () => {
+  const component = 'Test';
   const origWarn = console.warn;
   let mockedWarn;
 
@@ -22,11 +23,10 @@ describe('deprecated', () => {
   });
 
   describe('if prop has been listed as deprecated', () => {
+    const propertyName = 'prop1';
+
     it('calls console.warn with the correct message', () => {
-      const component = 'Test';
       const newProperty = 'newProp';
-      const propertyName = 'prop1';
-
       const expiryDate = new Date('01-01-2000');
       const expiryDateString = expiryDate.toLocaleString('en-GB', {
         year: 'numeric',
@@ -42,10 +42,6 @@ describe('deprecated', () => {
     });
 
     it('calls console.warn with correct message if newProp is not provided', () => {
-      const component = 'Test';
-
-      const propertyName = 'prop1';
-
       const expiryDate = new Date('01-01-2000');
       const expiryDateString = expiryDate.toLocaleString('en-GB', {
         year: 'numeric',
@@ -61,8 +57,6 @@ describe('deprecated', () => {
     });
 
     it('calls console.warn with correct message if message is provided', () => {
-      const component = 'Test';
-      const propertyName = 'prop1';
       const message = 'Some custom message.';
 
       deprecated(validator, { component, message })(props, propertyName);
@@ -74,15 +68,15 @@ describe('deprecated', () => {
   });
 
   describe('if prop has not been listed as deprecated', () => {
+    const propertyName = 'prop3';
+
     it('calls validator with props', () => {
-      const propertyName = 'prop3';
-      deprecated(validator, {})(props, propertyName);
+      deprecated(validator, { component })(props, propertyName);
       expect(console.warn).not.toHaveBeenCalled();
     });
 
     it('calls validator with expected args', () => {
-      const propertyName = 'prop3';
-      deprecated(validator, {})(props, propertyName);
+      deprecated(validator, { component })(props, propertyName);
       expect(validator).toHaveBeenCalledWith({ prop1: 'prop1', prop2: 'prop2' }, 'prop3');
     });
   });

package/src/utilities/deprecatedProperty/{deprecatedProperty.js → deprecatedProperty.ts}

@@ -1,6 +1,22 @@
 import { logActionRequired } from '../logActionRequired';
 
-const deprecatedMessage = ({ component, propName, message, expiryDate }) => {
+type DeprecatedMessageType = {
+  component: string;
+  propName: string;
+  message: string;
+  expiryDate?: Date;
+};
+
+type ValidatorType = (props: Record<string, any>, propName: string, ...rest: any[]) => Error | null;
+
+type DeprecatedOptionsType = {
+  component: string;
+  message?: string;
+  newProp?: string;
+  expiryDate?: Date;
+};
+
+const deprecatedMessage = ({ component, propName, message, expiryDate }: DeprecatedMessageType) => {
   const messages = [`${component} has deprecated the use of ${propName}.`];
 
   if (message) {
@@ -21,11 +37,14 @@ const deprecatedMessage = ({ component, propName, message, expiryDate }) => {
 };
 
 const deprecated =
-  (validator, { component, message = '', newProp: newProperty = null, expiryDate = null }) =>
-  (props, propertyName, ...rest) => {
+  (
+    validator: ValidatorType,
+    { component, message = '', newProp: newProperty, expiryDate }: DeprecatedOptionsType,
+  ) =>
+  (props: Record<string, any>, propertyName: string, ...rest: any[]) => {
     const newPropertyMessage = newProperty ? `Please use ${newProperty} instead.` : message;
 
-    if (props[propertyName] != null && typeof props[propertyName] !== 'undefined') {
+    if (props[propertyName] !== null && props[propertyName] !== undefined) {
       logActionRequired(
         deprecatedMessage({
           component,

package/src/utilities/{logActionRequired.js → logActionRequired.ts}

@@ -1,11 +1,11 @@
-export function logActionRequired(message) {
+export function logActionRequired(message: string) {
   if (typeof process !== 'undefined' && process.env?.NODE_ENV !== 'production') {
     // eslint-disable-next-line no-console
     console.warn(message);
   }
 }
 
-export function logActionRequiredIf(message, conditional) {
+export function logActionRequiredIf(message: string, conditional: boolean) {
   if (conditional) {
     logActionRequired(message);
   }

package/src/inputWithDisplayFormat/InputWithDisplayFormat.story.js

@@ -1,85 +0,0 @@
-import { text } from '@storybook/addon-knobs';
-import { userEvent, within } from '@storybook/test';
-
-import InputWithDisplayFormat from '.';
-import { Field } from '../field/Field';
-
-export default {
-  component: InputWithDisplayFormat,
-  title: 'Forms/InputWithDisplayFormat',
-};
-
-export const Basic = () => {
-  const placeholder = text('Placeholder', '**-**-**');
-  const displayPattern = text('DisplayPattern', '**-**-**');
-
-  return (
-    <Field label="Display pattern is controlled via knobs" id="Basic">
-      <InputWithDisplayFormat
-        id="Basic"
-        placeholder={placeholder}
-        displayPattern={displayPattern}
-        className="form-control"
-        onChange={(v) => console.log(v)}
-        onBlur={(v) => console.log(v)}
-        onFocus={(v) => console.log(v)}
-      />
-    </Field>
-  );
-};
-
-const Template = (args) => {
-  const placeholder = args.pattern;
-  const displayPattern = args.pattern;
-  const label = args.label;
-  const id = label.replaceAll(' ', '-').toLowerCase();
-
-  return (
-    <Field label={label} id={id}>
-      <InputWithDisplayFormat
-        id={id}
-        placeholder={placeholder}
-        displayPattern={displayPattern}
-        className="form-control"
-        onChange={(v) => console.log(v)}
-        onBlur={(v) => console.log(v)}
-        onFocus={(v) => console.log(v)}
-      />
-    </Field>
-  );
-};
-
-export const CardNumber = Template.bind({});
-CardNumber.args = {
-  label: 'Card Number',
-  pattern: '**** **** **** **** ***',
-};
-
-export const CVC = Template.bind({});
-CVC.args = {
-  label: 'CVC',
-  pattern: '***',
-};
-
-export const ExpiryDate = Template.bind({});
-ExpiryDate.args = {
-  label: 'Expiry Date',
-  pattern: '** / **',
-};
-
-export const SecurityPin = Template.bind({});
-SecurityPin.args = {
-  label: 'Security Pin',
-  pattern: '*-*-*-*-*-*',
-};
-
-export const SecurityPinPlay = Template.bind({});
-SecurityPinPlay.args = {
-  label: 'Security Pin',
-  pattern: '*-*-*-*-*-*',
-};
-
-SecurityPinPlay.play = async ({ canvasElement }) => {
-  const canvas = within(canvasElement);
-  await userEvent.type(canvas.getByPlaceholderText('*-*-*-*-*-*'), '123456');
-};

package/src/inputs/SelectInput.docs.mdx

@@ -1,21 +0,0 @@
-import { Meta } from '@storybook/blocks';
-import { MoneyInput } from '..';
-
-<Meta title="Forms/SelectInput/Accessibility" />
-
-# Accessibility
-
-## Labelling
-
-In order for the `<SelectInput />` to be considered accessible, it must be provided with a matching label, preferably via the <a href="/?path=/docs/field--docs">Field</a> component.
-
-Additionally, the `listbox` container that holds all the options is also expected to have its own label, which the component will attempt to resolve by looking in the following places:
-
-1. `UNSAFE_triggerButtonProps['aria-label']` prop, which reuses the custom label provided for the trigger button.
-   <br /> A good example of this strategy is the `<MoneyInput />` component, internally setting
-   `"Select currency"` as a trigger button label, which then gets automatically applied to the
-   `listbox`.
-2. `UNSAFE_triggerButtonProps['aria-labelledby']` prop, which holds the id of the element labelling the trigger button.
-3. Correctly paired input `<label />` text, ideally via the `Field` component.
-
-> Using option group heading is possible but complicated as we can have multiple groups, and those are not necessarily rendered consistently if search or virtualisation are enabled.