Help: Why does screen readers doesn't apply styles?

[IDrissAitHafid]

When a screen reader is used, the react-select classes are not applied which leads to a destroyed UI.

Here's how it looks in a normal screen:

Here's how it looks using a screen reader:

I couldn't reproduce the issue on codesandbox, that's why I think it's more of a problem on my end. and unfortunately, my app doesn't fully support accessibility as I am really ignorant about it 😓

Have you encountered the same issue? If so, could you share your thoughts about what could be the reasons?

Thank you 🙏

[IDrissAitHafid]

It turned out on my case it is a hydration problem, using hydrateRoot doesn't append the styles to the head, I used hydrate instead which resolved the problem for the moment.

For more details check this Remix discord thread

[avnp16]

Resolve :
https://stackoverflow.com/questions/75706454/how-to-render-component-only-client-side-with-remix

import type { ComponentType } from 'react';
import { useEffect, useState } from 'react';

export const CurrencySelect = (): JSX.Element => {
  // react-select doesn't work on server https://github.com/JedWatson/react-select/issues/3590 so we import dynamically
  const [Select, setReactSelectImported] = useState < ComponentType < any >> ();

  useEffect(() => {
    const loadReactSelectOnClient = async() => {
      const module = await import ('react-select');
      setReactSelectImported(module.default);
    };

    loadReactSelectOnClient();
  }, []);

  return Select ? < Select menuPlacement = "auto"
  isSearchable = {
    false
  }
  /> : <div>Loading...</div > ;
};