@transferwise/components 46.71.2 → 46.71.4

package/src/inputs/SelectInput.spec.tsx

@@ -3,7 +3,7 @@ import { userEvent } from '@testing-library/user-event';
 
 import { render, mockMatchMedia, mockResizeObserver } from '../test-utils';
 
-import { SelectInput } from './SelectInput';
+import { SelectInput, type SelectInputOptionItem, type SelectInputProps } from './SelectInput';
 import { Field } from '../field/Field';
 
 mockMatchMedia();
@@ -216,4 +216,97 @@ describe('SelectInput', () => {
     );
     expect(screen.getByLabelText(/Currency/)).toHaveAttribute('aria-haspopup');
   });
+
+  describe('listbox label', () => {
+    const fieldLabel = 'Fruits';
+    const triggerLabel = 'Select fruit';
+    const options: SelectInputOptionItem[] = [
+      { type: 'option', value: 'Banana' },
+      { type: 'option', value: 'Orange' },
+      { type: 'option', value: 'Olive' },
+    ];
+    const requiredTriggerButtonProps = {
+      id: undefined,
+      'aria-labelledby': undefined,
+      'aria-describedby': undefined,
+      'aria-invalid': undefined,
+      'aria-label': undefined,
+    };
+
+    const renderSelectInput = (props: Omit<SelectInputProps<string | null>, 'items'> = {}) =>
+      render(
+        <Field label={fieldLabel} id="selectId">
+          <SelectInput {...props} items={options} />
+        </Field>,
+      );
+
+    it("should propagate trigger's label if nothing is selected", async () => {
+      renderSelectInput({
+        UNSAFE_triggerButtonProps: {
+          ...requiredTriggerButtonProps,
+          'aria-label': triggerLabel,
+        },
+      });
+      const trigger = screen.getByRole('combobox');
+      await userEvent.click(trigger);
+      expect(screen.getByRole('listbox', { name: triggerLabel })).toBeInTheDocument();
+    });
+
+    it("should propagate trigger's label if an option is selected", async () => {
+      renderSelectInput({
+        UNSAFE_triggerButtonProps: {
+          ...requiredTriggerButtonProps,
+          'aria-label': triggerLabel,
+        },
+        value: options[1].value,
+      });
+      const trigger = screen.getByRole('combobox');
+      await userEvent.click(trigger);
+      expect(screen.getByRole('listbox', { name: triggerLabel })).toBeInTheDocument();
+    });
+
+    it("should propagate trigger's label by id", async () => {
+      const customLabelId = 'customLabelId';
+      renderSelectInput({
+        UNSAFE_triggerButtonProps: {
+          ...requiredTriggerButtonProps,
+          'aria-labelledby': customLabelId,
+        },
+      });
+      const trigger = screen.getByRole('combobox');
+      await userEvent.click(trigger);
+      expect(screen.getByRole('listbox')).toHaveAttribute('aria-labelledby', customLabelId);
+    });
+
+    it("should propagate input's label by id", async () => {
+      renderSelectInput();
+      const trigger = screen.getByRole('combobox');
+      await userEvent.click(trigger);
+      expect(screen.getByRole('listbox', { name: fieldLabel })).toBeInTheDocument();
+    });
+
+    it('should prefer explicit label over label ids', async () => {
+      const customLabelId = 'customLabelId';
+      renderSelectInput({
+        UNSAFE_triggerButtonProps: {
+          ...requiredTriggerButtonProps,
+          'aria-labelledby': customLabelId,
+          'aria-label': triggerLabel,
+        },
+      });
+      const trigger = screen.getByRole('combobox');
+      await userEvent.click(trigger);
+      expect(screen.getByRole('listbox', { name: triggerLabel })).toBeInTheDocument();
+      expect(screen.getByRole('listbox')).not.toHaveAttribute('aria-labelledby');
+    });
+
+    it('should have no label if none of the above are provided', async () => {
+      render(<SelectInput items={options} />);
+      const trigger = screen.getByRole('combobox');
+      await userEvent.click(trigger);
+      const listBox = screen.getByRole('listbox');
+      expect(listBox).not.toHaveAttribute('aria-label');
+      expect(listBox).not.toHaveAttribute('aria-labelledby');
+    });
+  });
 });

package/src/inputs/SelectInput.story.tsx

@@ -20,7 +20,7 @@ import {
 } from './SelectInput';
 
 const meta = {
-  title: 'components/SelectInput',
+  title: 'Forms/SelectInput',
   component: SelectInput,
   tags: ['autodocs'],
   parameters: { actions: { argTypesRegex: '' } },
@@ -208,8 +208,8 @@ export const Currencies: Story<Currency> = {
       await userEvent.type(input, '{Backspace}{Backspace}');
       await expect(within(screen.getByRole('listbox')).queryAllByRole('option')).toHaveLength(2);
 
-      await userEvent.type(input, '{Backspace}eu');
-      await expect(input).toHaveAttribute('aria-activedescendant');
+      await userEvent.type(input, '{Backspace}e');
+      await expect(input).not.toHaveAttribute('aria-activedescendant');
     });
   },
 };
@@ -347,7 +347,7 @@ export const WithinField = {
   args: Months.args,
   decorators: [
     (Story) => (
-      <Field message="Something went wrong" sentiment="negative">
+      <Field message="Something went wrong" sentiment="negative" label="Month">
         <Story />
       </Field>
     ),

package/src/inputs/SelectInput.tsx

@@ -258,8 +258,9 @@ export function SelectInput<T = string, M extends boolean = false>({
   onClose,
   onClear,
 }: SelectInputProps<T, M>) {
-  const inputAttributes = useInputAttributes();
+  const inputAttributes = useInputAttributes({ nonLabelable: true });
   const id = idProp ?? inputAttributes.id;
+
   const [open, setOpen] = useState(false);
 
   const initialized = useRef(false);
@@ -295,6 +296,35 @@ 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}
@@ -388,7 +418,7 @@ export function SelectInput<T = string, M extends boolean = false>({
             }}
           >
             <SelectInputOptions
-              id={`${id}Search`}
+              id={id ? `${id}Search` : undefined}
               items={items}
               renderValue={renderValue}
               renderFooter={renderFooter}
@@ -398,6 +428,7 @@ export function SelectInput<T = string, M extends boolean = false>({
               listboxRef={listboxRef}
               filterQuery={deferredFilterQuery}
               onFilterChange={setFilterQuery}
+              {...getListBoxLabelProps()}
             />
           </OptionsOverlay>
         );
@@ -496,6 +527,8 @@ interface SelectInputOptionsProps<T = string>
   listboxRef: React.MutableRefObject<HTMLDivElement | null>;
   filterQuery: string;
   onFilterChange: (query: string) => void;
+  listBoxLabel?: string;
+  listBoxLabelledBy?: string;
 }
 
 function SelectInputOptions<T = string>({
@@ -509,10 +542,12 @@ function SelectInputOptions<T = string>({
   listboxRef,
   filterQuery,
   onFilterChange,
+  listBoxLabel,
+  listBoxLabelledBy,
 }: SelectInputOptionsProps<T>) {
   const intl = useIntl();
-
   const controllerRef = filterable ? searchInputRef : listboxRef;
+  const [initialRender, setInitialRender] = useState(true);
 
   const needle = useMemo(() => {
     if (filterable) {
@@ -576,6 +611,10 @@ function SelectInputOptions<T = string>({
     }
   }, []);
 
+  useEffect(() => {
+    setInitialRender(false);
+  }, []);
+
   const showStatus = resultsEmpty;
   const statusId = useId();
   const listboxId = useId();
@@ -600,7 +639,7 @@ function SelectInputOptions<T = string>({
       className="np-select-input-options-container"
       onAriaActiveDescendantChange={(value: React.AriaAttributes['aria-activedescendant']) => {
         if (controllerRef.current != null) {
-          if (value != null) {
+          if (!initialRender && value != null) {
             controllerRef.current.setAttribute('aria-activedescendant', value);
           } else {
             controllerRef.current.removeAttribute('aria-activedescendant');
@@ -662,6 +701,8 @@ 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/main.css

@@ -207,27 +207,18 @@ div.critical-comms .critical-comms-body {
 }
 .tw-avatar {
   position: relative;
-  border-radius: 50%;
   -webkit-user-select: none;
      -moz-user-select: none;
           user-select: none;
   box-sizing: border-box;
 }
 .tw-avatar .tw-avatar__content {
-  align-items: center;
   background-color: rgba(134,167,189,0.10196);
   background-color: #86a7bd1a;
   background-color: var(--color-background-neutral);
-  border-radius: 50%;
-  color: #37517e;
-  color: var(--color-content-primary);
-  display: flex;
-  height: 100%;
-  justify-content: center;
   max-height: 100%;
   max-width: 100%;
   overflow: hidden;
-  width: 100%;
 }
 .tw-avatar--outlined {
   border: 1px solid #00a2dd;
@@ -270,11 +261,6 @@ div.critical-comms .critical-comms-body {
   color: var(--color-dark-charcoal);
   line-height: 1;
 }
-.tw-avatar--24 {
-  min-width: 24px;
-  width: 24px;
-  height: 24px;
-}
 .tw-avatar--24.tw-avatar--emoji,
 .tw-avatar--24.tw-avatar--icon {
   font-size: 12px;
@@ -305,11 +291,6 @@ div.critical-comms .critical-comms-body {
   content: "";
   border-radius: 50%;
 }
-.tw-avatar--40 {
-  min-width: 40px;
-  width: 40px;
-  height: 40px;
-}
 .tw-avatar--40.tw-avatar--emoji,
 .tw-avatar--40.tw-avatar--icon {
   font-size: 20px;
@@ -340,11 +321,6 @@ div.critical-comms .critical-comms-body {
   content: "";
   border-radius: 50%;
 }
-.tw-avatar--48 {
-  min-width: 48px;
-  width: 48px;
-  height: 48px;
-}
 .tw-avatar--48.tw-avatar--emoji,
 .tw-avatar--48.tw-avatar--icon {
   font-size: 24px;
@@ -375,11 +351,6 @@ div.critical-comms .critical-comms-body {
   content: "";
   border-radius: 50%;
 }
-.tw-avatar--56 {
-  min-width: 56px;
-  width: 56px;
-  height: 56px;
-}
 .tw-avatar--56.tw-avatar--emoji,
 .tw-avatar--56.tw-avatar--icon {
   font-size: 28px;
@@ -410,11 +381,6 @@ div.critical-comms .critical-comms-body {
   content: "";
   border-radius: 50%;
 }
-.tw-avatar--72 {
-  min-width: 72px;
-  width: 72px;
-  height: 72px;
-}
 .tw-avatar--72.tw-avatar--emoji,
 .tw-avatar--72.tw-avatar--icon {
   font-size: 36px;
@@ -463,10 +429,6 @@ div.critical-comms .critical-comms-body {
   --badge-mask-offset: calc(var(--badge-size) / 2);
   --badge-border-color: rgba(255, 255, 255, 0.08);
 }
-.tw-badge.tw-badge-md {
-  --badge-size: 20px;
-  --badge-mask: 2px;
-}
 .tw-badge.tw-badge-lg {
   --badge-size: 24px;
   --badge-mask: 3px;
@@ -484,16 +446,10 @@ div.critical-comms .critical-comms-body {
 }
 .tw-badge > .tw-badge__content {
   position: absolute;
-  width: var(--badge-size);
-  height: var(--badge-size);
   bottom: 0;
   right: 0;
   box-sizing: border-box;
-  border-radius: 50%;
   text-align: center;
-  display: flex;
-  align-items: center;
-  justify-content: center;
   overflow: hidden;
   -webkit-user-select: none;
      -moz-user-select: none;
@@ -1029,36 +985,6 @@ div.critical-comms .critical-comms-body {
   cursor: pointer;
   position: relative;
 }
-.np-circular-btn input[type="button"] {
-  min-height: 40px;
-  min-height: var(--size-40);
-  width: 40px;
-  width: var(--size-40);
-  height: 40px;
-  height: var(--size-40);
-  padding: 0;
-  border-radius: 50%;
-  margin-bottom: 8px;
-  margin-bottom: var(--size-8);
-}
-.np-theme-personal .np-circular-btn input[type="button"] {
-  min-height: 56px;
-  min-height: var(--size-56);
-  width: 56px;
-  width: var(--size-56);
-  height: 56px;
-  height: var(--size-56);
-}
-@media (max-width: 320px) {
-  .np-theme-personal .np-circular-btn input[type="button"] {
-    min-height: 64px;
-    min-height: var(--size-64);
-    width: 64px;
-    width: var(--size-64);
-    height: 64px;
-    height: var(--size-64);
-  }
-}
 .np-circular-btn .tw-icon {
   position: absolute;
   top: 16px;
@@ -1099,13 +1025,6 @@ div.critical-comms .critical-comms-body {
 .np-theme-personal .np-circular-btn.negative.secondary:not(.disabled):not(:disabled) .tw-icon {
   color: var(--color-sentiment-negative) !important;
 }
-.np-circular-btn__label {
-  transition: color 0.15s ease-in-out;
-  font-size: 0.875rem;
-  font-size: var(--font-size-14);
-  font-weight: 600;
-  font-weight: var(--font-weight-semi-bold);
-}
 .np-circular-btn.accent .np-circular-btn__label {
   color: #00a2dd;
   color: var(--color-interactive-accent);
@@ -1232,6 +1151,13 @@ div.critical-comms .critical-comms-body {
 .np-theme-personal .np-circular-btn.negative.secondary:active input[type="button"] + .tw-icon {
   color: var(--color-interactive-control);
 }
+.np-circle {
+  border-radius: 9999px;
+  border-radius: var(--radius-full);
+  width: var(--circle-size);
+  height: var(--circle-size);
+  flex-shrink: 0;
+}
 .np-bottom-sheet {
   border-radius: 10px 10px 0 0;
 }
@@ -4224,13 +4150,6 @@ html:not([dir="rtl"]) .np-navigation-option {
   width: 32px;
   width: var(--size-32);
 }
-.status-circle {
-  border-radius: 50%;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  flex-shrink: 0;
-}
 .status-circle .light {
   color: var(--color-contrast);
 }
@@ -4246,24 +4165,6 @@ html:not([dir="rtl"]) .np-navigation-option {
 .np-theme-personal .status-circle.pending .status-icon {
   color: var(--color-dark);
 }
-.status-circle-lg {
-  width: 48px;
-  width: var(--size-48);
-  height: 48px;
-  height: var(--size-48);
-}
-.status-circle-md {
-  width: 40px;
-  width: var(--size-40);
-  height: 40px;
-  height: var(--size-40);
-}
-.status-circle-sm {
-  width: 16px;
-  width: var(--size-16);
-  height: 16px;
-  height: var(--size-16);
-}
 .status-circle-sm .status-icon > svg {
   height: 14px;
   height: var(--size-14);
@@ -4278,14 +4179,6 @@ html:not([dir="rtl"]) .np-navigation-option {
     height: var(--size-24);
   }
 }
-@media (max-width: 320px) {
-  .status-circle-sm {
-    width: 32px;
-    width: var(--size-32);
-    height: 32px;
-    height: var(--size-32);
-  }
-}
 .status-circle.negative,
 .status-circle.error {
   background-color: var(--color-sentiment-negative);

package/src/main.less

@@ -9,6 +9,7 @@
 @import "./checkboxButton/CheckboxButton.less";
 @import "./chips/Chip.less";
 @import "./circularButton/CircularButton.less";
+@import "./common/circle/Circle.less";
 @import "./common/bottomSheet/BottomSheet.less";
 @import "./common/card/Card.less";
 @import "./common/closeButton/CloseButton.less";

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

@@ -81,7 +81,7 @@ describe('MoneyInput', () => {
       </>,
     );
 
-    expect(screen.getByLabelText('Prioritized label')).toHaveClass('input-group');
+    expect(screen.getAllByLabelText('Prioritized label')[0]).toHaveClass('input-group');
   });
 
   it('supports `Field` for labeling', () => {
@@ -137,4 +137,13 @@ 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/moneyInput/MoneyInput.tsx

@@ -391,7 +391,7 @@ class MoneyInput extends Component<MoneyInputPropsWithInputAttributes, MoneyInpu
               UNSAFE_triggerButtonProps={{
                 id: undefined,
                 'aria-labelledby': undefined,
-                'aria-describedby': undefined,
+                'aria-describedby': ariaLabelledBy,
                 'aria-invalid': undefined,
                 'aria-label': this.props.intl.formatMessage(messages.selectCurrencyLabel),
               }}

package/src/overlayHeader/__snapshots__/OverlayHeader.spec.tsx.snap

@@ -18,10 +18,12 @@ exports[`OverlayHeader renders as expected 1`] = `
         class="d-flex align-items-center order-2"
       >
         <div
-          class="tw-avatar tw-avatar--48 tw-avatar--initials np-text-title-body"
+          class="np-circle d-flex align-items-center justify-content-center tw-avatar tw-avatar--48 tw-avatar--initials np-text-title-body"
+          style="--circle-size: 48px;"
         >
           <div
-            class="tw-avatar__content"
+            class="np-circle d-flex align-items-center justify-content-center tw-avatar__content"
+            style="--circle-size: 48px;"
           >
             TM
           </div>

package/src/radio/__snapshots__/Radio.rtl.spec.tsx.snap

@@ -34,10 +34,12 @@ exports[`Radio shows the avatar when supplied 1`] = `
         class="np-radio__avatar m-l-auto"
       >
         <div
-          class="tw-avatar tw-avatar--48 tw-avatar--initials np-text-title-body"
+          class="np-circle d-flex align-items-center justify-content-center tw-avatar tw-avatar--48 tw-avatar--initials np-text-title-body"
+          style="--circle-size: 48px;"
         >
           <div
-            class="tw-avatar__content"
+            class="np-circle d-flex align-items-center justify-content-center tw-avatar__content"
+            style="--circle-size: 48px;"
           >
             HD
           </div>

package/src/statusIcon/StatusIcon.css

@@ -4,13 +4,6 @@
   width: 32px;
   width: var(--size-32);
 }
-.status-circle {
-  border-radius: 50%;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  flex-shrink: 0;
-}
 .status-circle .light {
   color: var(--color-contrast);
 }
@@ -26,24 +19,6 @@
 .np-theme-personal .status-circle.pending .status-icon {
   color: var(--color-dark);
 }
-.status-circle-lg {
-  width: 48px;
-  width: var(--size-48);
-  height: 48px;
-  height: var(--size-48);
-}
-.status-circle-md {
-  width: 40px;
-  width: var(--size-40);
-  height: 40px;
-  height: var(--size-40);
-}
-.status-circle-sm {
-  width: 16px;
-  width: var(--size-16);
-  height: 16px;
-  height: var(--size-16);
-}
 .status-circle-sm .status-icon > svg {
   height: 14px;
   height: var(--size-14);
@@ -58,14 +33,6 @@
     height: var(--size-24);
   }
 }
-@media (max-width: 320px) {
-  .status-circle-sm {
-    width: 32px;
-    width: var(--size-32);
-    height: 32px;
-    height: var(--size-32);
-  }
-}
 .status-circle.negative,
 .status-circle.error {
   background-color: var(--color-sentiment-negative);

package/src/statusIcon/StatusIcon.less

@@ -4,12 +4,6 @@
 }
 
 .status-circle {
-  border-radius: 50%;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  flex-shrink: 0;
-
   .light {
     color: var(--color-contrast);
   }
@@ -29,20 +23,7 @@
     }
   }
 
-  &-lg {
-    width: var(--size-48);
-    height: var(--size-48);
-  }
-
-  &-md {
-    width: var(--size-40);
-    height: var(--size-40);
-  }
-
   &-sm {
-    width: var(--size-16);
-    height: var(--size-16);
-
     .status-icon > svg {
       height: var(--size-14);
       width: var(--size-14);
@@ -52,11 +33,6 @@
         height: var(--size-24);
       }
     }
-
-    @media (--screen-400-zoom) {
-      width: var(--size-32);
-      height: var(--size-32);
-    }
   }
 }
 

package/src/statusIcon/StatusIcon.spec.tsx

@@ -1,8 +1,10 @@
 import { Sentiment, Size, SizeLarge, SizeMedium, SizeSmall } from '../common';
-import { render, cleanup, screen } from '../test-utils';
+import { render, cleanup, screen, mockMatchMedia } from '../test-utils';
 
 import StatusIcon from '.';
 
+mockMatchMedia();
+
 describe('StatusIcon', () => {
   const renderStatusIcon = (props?: {
     sentiment?: Sentiment;
@@ -33,7 +35,7 @@ describe('StatusIcon', () => {
   ])(
     "if prop 'size' equals '%s' is passed, renders the status icon with class '%s'",
     (size, expectedClass) => {
-      renderStatusIcon({ size: size });
+      renderStatusIcon({ size });
 
       expect(screen.getByTestId('status-icon')).toHaveClass(expectedClass);
       cleanup();
@@ -49,7 +51,7 @@ describe('StatusIcon', () => {
   ])(
     "if prop 'sentiment' equals '%s' is passed, renders the status icon with class '%s'",
     (sentiment, expectedClass) => {
-      renderStatusIcon({ sentiment: sentiment });
+      renderStatusIcon({ sentiment });
 
       expect(screen.getByTestId('status-icon')).toHaveClass(expectedClass);
       cleanup();