How to make a SAPUI5 Custom Control accessible (focus handling)?

1
votes

I am searching for a way to make a SAPUI5 custom control accessible. I build a kind of tile (based on a VBox control) and try to get this custom control accessible over keyboard (tab) or by clicking the mouse.

My idea was to implement sap.ui.core.Control#getAccessibilityInfo in my control, but this seems never be called. Currently I am trying to debug how other stuff is doing it like https://github.com/SAP/openui5/blob/master/src/sap.m/src/sap/m/ListBase.js but I can't find a way that works.

My control is currently placed inside a table, if I click on it the focus will be set to the table column. If I press tab-key it jumps to an input control inside my control.

My assumption, I miss something so that the control would be considered as focusable somehow.

2
sapui5
Code of the control would be helpful to see if you have missed something that would allow the control to be keyboard focus-able. – JakeofSpades

2 Answers

0
votes

I think that you are looking for ItemNavigation. VBox wasn't design to support keyboard navigation on it's content, but you could add a hook to onAfterRendering of your custom control, collect all dom refs you need to navigate on and pass them to ItemNavigation.setItemDomRefs.

If you need an inspiration you can have a look at sap.m.List implementation.

0
votes

The important thing is to add oRM.writeAttribute("tabindex", "0"); // allows selection into the renderer of my own control. That allows to use the tab handling. Full code in a different question: How to copy&paste SAPUI5 controls by pressing Ctrl+C and Ctrl.V? With this the control can be selected.

Also notice the this._bExcludeFromTabChain = false; in init section.