Submitted 29 days ago

Responsive contact form component with react and tailwindcss

react, tailwind-css

Stefano Lezzi•350

@Steno-95

A solution to the Contact form challenge

Preview Code

Solution retrospective

What challenges did you encounter, and how did you overcome them?

Making the toast window be read from the screen reader, i was not able to do it

What specific areas of your project would you like help with?

As mentioned before, i have no idea how to make the screen reader read the toast window on success when the form is submitted, any tips or resources about it is welcome!

Code

Please log in to post a comment

Community feedback

Anamay•450

@anamaydev

Posted 24 days ago

To make screen readers announce the toast or modal, you can programmatically shift focus to it when it appears. This can be done by assigning a ref to the toast element and setting tabIndex={-1} to make it focusable if it’s not inherently focusable. Then in a useEffect focus the element when it becomes visible:

  useEffect(() => {
    if (showToast && toastRef.current) {
      toastRef.current.focus();
    }
  }, [showToast]);

pass the toastRef as props to ModalToast.jsx

    <article
      className="toast"
      aria-live="assertive"
      ref={ref}
      tabIndex={-1}
    >...</article>

I did not find any good tutorial on it so I had to learn it from chatGPT. So I can not give you any source. But this will give you small idea and you can learn more about it using chatGPT or any other AI.

Marked as helpful

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord