Log in to AnswerLog in to Follow
2021-07-21 12-04-07
George.Qiao
171Views
6Comments
Solved
[OutSystems UI] No visual indication when dropdown widget is on focus
Question
Reactive
Forge
outsystems-ui
Reactive icon
OutSystems UI
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?

0
0
16 Mar
2019-07-01 15-21-53
b.marcelino
Staff
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

1
0
16 Mar

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

0
0
16 Mar

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

0
0
16 Mar

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

0
0
17 Mar

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

1
0
17 Mar

Thanks, @b.marcelino. This is helpful.

Regards,

George 

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