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=0the same problem, no visual indicator for dropdown.Question: what should I to ensure the drowndown is highlighted when it is on focus?
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.
ThanksBruno Marcelino
this does not seem to work for outsystems 11 reactive.
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
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
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, @b.marcelino. This is helpful.Regards,