Has anyone hit problems using DropDownServerSide and ensuring keyboard accessibility?
The first issue I hit was that Outsystems UI CSS does not have an entry for the focus state of an item, only a hover. So it is hard to work out which option currently has focus. I can fix that easily with
.osui-dropdown-serverside-item:focus { background-color:var(--color-neutral-2);}
The problem I'm now having is that using a list of options with an infinite scroll action, when you get to the bottom of the list of currently displayed items, and onscrollending fires, instead of scrolling down to the next one, the focus moves inexplicably to the top of the body, with the DropDownServerSide still open. I haven't worked out a solution to this yet.
Well,
1) The focus is there applied through the selector ".has-accessible-features :focus", however the shadow is being cropped due to the items position. That said, you can add the "position:relative;" to the ".osui-dropdown-serverside-item" selector and it will be fixed with the same type of style defined for all other patterns.
2) When I said this is an expected behaviour is related with the functionality of this pattern. Since you have control with almost everything on the scope of this pattern, we can't ensure everything. Also due to List update, dom elements will be also updated and we can not ensure that a specific element Id will be the same after the reload, and in order to save the reference of that ListItem the validations we had to to are huge, we will face performance issues due that validations when dealing with big lists.The only way I see this working is adding a FocusEvent to the DropdownServerSideItem (ListItem) returning the ItemId on the DataBase, but this is overengineering once we've the ability to have a local List and update it accordingly the amount of items we need to load from the DataBase.
To conclude,- We will implement the 1), and it will be available at the next release of OutSystemsUI.- Hope you understood why 2) was not a default implemented behaviour.
Cheers,JR
Hi @Darren Meldrum,
First, in order to have the accessibility features enabled, you should set EnableAccessibilityFeatures layout attribute as True. That way, accessible selectores will be enabled as well.
Secondly, that's an expected behaviour once List will be reloaded and focus will be loosed on that moment.You must ensure that to use accessibility the infinite scroll will not be available in order to prevent list to be reloaded, or, you must have a local list, and ensure that local list will be only updated with the next items to be shown from the default list, in order to prevent the reload of the list and only append new items into it!
Hope it helps.
1) Yes, I have EnableAccessibilityFeatures enabled
2) I'm not sure I agree that this is "expected behaviour". Mouse users can scroll down a list, with the aggregate refreshing regularly to add more items. That's one of the objectives of a DropdownServerSide, so you can present very long lists of data without having to pre-load a local list. We just have to find a way to make sure that keyboard users are not disadvantaged. Perhaps there is a way of capturing the current focus element in the OnScrollEnding action, and then return focus to that element when the list has been refreshed? Or perhaps Outsystems can engineer it so that focus is not lost in the first place?