The Suggestion component adds zero-width spaces to the label

[TomasEng]

Version number

1.12.1

Description of the bug

The Suggestion component adds a suffix of zero-width spaces to the label. Although these characters are neither visible nor hearable, they break our tests in Altinn Studio.

The problem may be observed in The Design System's own demo:

Steps To Reproduce

Here is a test that reproduces the issue within The Design System's code:

// packages/react/src/components/suggestion/suggestion.test.tsx

import { EXPERIMENTAL_Suggestion } from './';
import { render, screen } from '@testing-library/react';
import { Field } from '../field';

vi.useFakeTimers();

test('Suggestion', () => {
  const name = 'Lorem ipsum';
  render(
    <Field>
      <label>{name}</label>
      <EXPERIMENTAL_Suggestion multiple={false}>
        <EXPERIMENTAL_Suggestion.Input/>
        <EXPERIMENTAL_Suggestion.Clear/>
        <EXPERIMENTAL_Suggestion.List>
          <EXPERIMENTAL_Suggestion.Option>Option</EXPERIMENTAL_Suggestion.Option>
        </EXPERIMENTAL_Suggestion.List>
      </EXPERIMENTAL_Suggestion>
    </Field>
  );
  vi.runAllTimers();
  expect(screen.getByRole('combobox', { name })).toBeInTheDocument();
});

This test results in the following error message:

TestingLibraryElementError: Unable to find an accessible element with the role "combobox" and name "Lorem ipsum"

Here are the accessible roles:

  combobox:

  Name "Lorem ipsum     ​​​​​":
  <input
    aria-autocomplete="list"
    aria-controls=":u-datalist1"
    aria-expanded="true"
    aria-label="Lorem ipsum     ​​​​​"
    autocomplete="off"
    class="ds-input"
    data-label="Lorem ipsum"
    id="mmswt0dwi021"
    list=":u-datalist1"
    placeholder=" "
    popovertarget=":u-datalist1"
    role="combobox"
    type="text"
  />

Additional Information

No response

[oddvernes]

This appears to be an intentional trick for screen-reader purposes. here is the relevant code in u-comobobox

[Barsnes]

This is the same issue as this: u-elements/u-elements#19