Accessibility Focus Indictor around Text Widget in Sidebar of Experience Builder

MeaganFairfield-PeakMDP

I am developing an application in experience builder and am working on making sure it is accessible. When using keyboard controls the focus indicator clearly identifies what widget or tab it is on except for the text widgets within the sidebar of my application. 

Is there any way to make sure there is a focus indicator around the text widget in the application's sidebar? 

DanielFox1

Hi @MeaganFairfield-PeakMDP

From my understanding the text widget is non-interactive by default, although it is designed to display static or dynamic text, the text widget seems to lack visibility if it is not padded. If anyone wants to verify this please do, but it is not directly stated in the linked documentation.

Text widget—ArcGIS Experience Builder | Documentation

I have included some potential fixes for this below 

1. Enable Focus Styling via Padding

• Add padding to your Text Widget container (e.g., 10–20 px).
• This ensures that when focus is applied, the outline has space to render visibly.

2. Use the A11Y Tab Order Tool

• Click the A11Y button in the lower-right corner of the Experience Builder canvas.
• Enable Auto-calculate element tab orders.
• Make a small layout adjustment (e.g., resize a widget) to trigger recalculation.

3. Wrap Text Widget in a Card or Section

• Place the Text Widget inside a Card or Section widget.
• These containers are more reliably focusable and can display outlines when tabbed to.

4. Apply Custom CSS (Advanced)

If you're hosting the app yourself and have access to custom styling:

.jimu-widget-text:focus {
outline: 2px solid #000;
outline-offset: 4px;
}

This should hopefully force a visible focus indicator when the Text Widget receives keyboard focus. I hope this helps.