[OutSystems UI] No visual indication when dropdown widget is on focus
outsystems-ui
Reactive icon
Forge component by Platform Maintenance
Application Type
Reactive

In OutSystems UI reactive web app, when I press tab key to cycle through widget, there is a properly visual indicator to highlight textbox that is on focus. However, when dropdown is on focus, I can press keyboard up/down arrow to change dropdown value. However, the dropdown widget itself has no visual indication to tell me it is on focus.

I tried with OutSystems UI official sample page: https://outsystemsui.outsystems.com/outsystemsuiwebsite/Requestcreation?Sample_RequestId=0

the same problem, no visual indicator for dropdown.

Question: what should I to ensure the drowndown is highlighted when it is on focus?

Solution

Hi Qiao,

Thanks for your feedback and for catching this issue on OutSystems UI Web. There are missing styles on dropdowns when is focused. Please add this CSS snippet to your theme as a quick workaround:

.dropdown-container > div.dropdown-display:focus,
.dropdown-container > select.dropdown-display:focus {
border: var(--border-size-s) solid var(--color-primary);
}

We will take a look at this issue and in our next release will be fixed by default.

Thanks
Bruno Marcelino

Thanks, @b.marcelino. It works.

Also, hope to add the CSS to the button as well, e.g.

.btn:focus{

    box-shadow: 0 0 0 3px var(--color-focus-outer);

  }


Regards,

George

Hi @George.Qiao ,

The focus styles that are missing its for a simple focus of each element. To highlight the button when is focused, you can add the CSS that you shared.

However, if you want to apply the correct styles of focus, you just need to enable the accessibility features on layout. With this feature enabled, all the focus styles will be the same. Please check the attached video.

Thanks

LayoutA11Y.mp4

Hi @b.marcelino

As of now, the accessibility features do not work on the widget on a popup page. 

I turned on the accessibility feature for a specific page. The button on the base page works but the button inside a popup does not.

Also, do I have to turn on the accessibility features page by page? The "EnableAccessibilityFeatures" option is only available for individual pages, as shown below.

Is there any way I can turn on globally (module, application, theme etc)?

Regards,

George Qiao

Hi @George.Qiao ,

Yes, it's possible. Just need to go to UIFlows folder >> Layouts >> Select your layout (EX: LayoutTopMenu) and change the default value of EnableAccessibilityFeatures to True:

If you want to create a client variable to enable / disable this feature, you can create it on Client variables and set it to the layout parameter.

Thanks
Bruno Marcelino

Thanks, @b.marcelino. This is helpful.

Regards,

George 

Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.