Search code examples
javascripthtmlsapui5tabindex

Add tabindex to text in openui5

I am using sap.m.Text to display a status of a task (failed, success, error, etc..) and I want the status keyboard accessible, but keyboard 'tab' press does not read the status.

The text is a rendered inside <span> tag in DOM, is there anyway to add tabindex="0" to span while declaration of sap.m.Text component itself? or is there any other component of OpenUI5 I can use to show the status which is also keyboard accessible? (I also used sap.m.Label, but not getting accessed by keyboard again.

Thank you.

Solution

  • Elements can be tabbed to if they can receive focus. To determine which OpenUI5 UI controls can receive focus, look at whether:

    • an element in the HTML DOM structure that is rendered by the control's renderer can receive focus (e.g. sap.m.Button renders an HTML <button>, which can be focused.
    • the control's renderer specifically writes the tabindex property.

    Examples of such controls include Button, Input, Link, and an ObjectAttribute that is active (i.e. also a link). So you could, for example, use ObjectAttribute, but then your status will look like a hyperlink. To determine the above, you can, for example, search the OpenUI5 repository online or in your local editor.

    If there is no suitable control, you can easily extend one. For example, you can extend sap.m.Text. This should be a simple extension, as you only need to add tabindex. Here is an example that is very close to what you'll need to do Extending Input Rendering.