Console error on conflicting properties for a <div> on the Join Court container

[jaybuidl]

Blocked aria-hidden on a <div> element because the element that just received focus must not be hidden from assistive technology users. Avoid using aria-hidden on a focused element or its ancestor. Consider using the inert attribute instead, which will also prevent focus. For more details, see the aria-hidden section of the WAI-ARIA specification at https://w3c.github.io/aria/#aria-hidden

This error means you're trying to hide an element from assistive technology (like screen readers) while it's currently focused. This is a problem because it prevents users relying on these technologies from accessing the content.

Here's a breakdown:

• aria-hidden="true": This attribute tells assistive technologies to ignore the element.
• tabindex="0": This attribute makes the element focusable.

The conflict: You've made the element focusable and hidden from assistive technology. This creates a confusing experience for users who rely on screen readers to navigate the page.