Focus state on in-page navigation

[charleneyjh1]

Hello Paste team,
In the implementation of the in-page navigation component, the tab stays on the focus state with a blue border after it's clicked and doesn't go away automatically.
Is this the intended behavior of the component? Is there anyway to automatically hide the blue border after user finished clicking? It looks quite bulky visually with the blue border always on.

Thanks!

[TwilioPasteBot]

Disclaimer: This is a very experimental bot using OpenAI's GPT-4. The answers may not be correct, a human will review the answer and update it if necessary.

---

Hi there!

The behavior you're describing, where a button (or in this case, a tab from the in-page navigation component) remains in a focused state with a blue border after being clicked, is indeed the intended behavior. This focus state is crucial for accessibility reasons, ensuring that users who rely on keyboard navigation or screen readers can clearly see which element is currently focused. The focus state provides a visual cue that helps in navigating through the page content using the keyboard.

However, there isn't a built-in way to automatically hide the focus border after the user finishes clicking because maintaining the focus state until another interactive element is focused is a standard web accessibility practice. This practice ensures that keyboard users can navigate through interactive elements in a predictable manner.

While it might seem visually bulky, the focus state plays a significant role in making web content accessible to all users, including those with disabilities. It's important to balance aesthetic considerations with accessibility requirements to create inclusive web experiences.

If the focus state's appearance is a concern, it's worth noting that customizing it (for example, to make it less visually intrusive) could potentially reduce the accessibility of your web page. Any modifications to the focus state should be approached with caution and should ensure that the element remains clearly visible and distinguishable when focused.

For more information on the focus state and accessibility considerations, you can refer to the Paste documentation and accessibility guidelines:

• Tabs: https://paste.twilio.design/components/tabs/#about-tabs
• Accessibility at Paste: https://paste.twilio.design/getting-started/accessibility

Remember, the goal is to create a web experience that is accessible and inclusive for all users.

I also did a search, and I managed to find these other Discussions that might be similar or related to your question. Give them a read to see if they answer your question. If they do, head back here and update this discussion and mark it as answered, pointing others to the related discussion:

• Focus borders around content in many components are sometimes too distracting? - Answer (updated: 02/01/2023, similarity score: 88%)
• Focus borders around content in many components are sometimes too distracting? (updated: 02/01/2023, similarity score: 88%)
• In page nav and tabs visual representation - Answer (updated: 08/02/2023, similarity score: 84%)

[krisantrobus]

Hi @charleneyjh1 Paste Bot summarized this very well. This is an intentional design decision to support accessibility.

"This focus state is crucial for accessibility reasons, ensuring that users who rely on keyboard navigation or screen readers can clearly see which element is currently focused. The focus state provides a visual cue that helps in navigating through the page content using the keyboard."

As it is the focus state it will not go away automatically until a user has removed the focus state by setting focus on another element. This is done by licking or navigating via keyboard to the next element to aid with accessibility. We understand it may seem bulky but it is necessary for this component.

[charleneyjh1]

thanks for your response @krisantrobus ! but when i'm playing with the in-page navigation on Paste site, the focus state does automatically goes away without clicking another element (Attaching a video). Is this not the right implementation?

Screen.Recording.2024-06-24.at.12.29.15.PM.mov

[krisantrobus]

Hey @charleneyjh1 that is a very good point. My guess here is that the components in the page re-render on navigation change, restoring default focus. This is due to using NextJS with server side rendering vs react which renders in the client. With react you can utilize nested outlets but NextJS navigates fully by using slugs (paths).

That describes what you are seeing when using our pages but if you use the examples in the component page you will see when it is not navigating it gives the same functionality previously described.

Screen.Recording.2024-06-24.at.7.26.38.PM.mov