Unanswered

TabIndex support in PCF component

(0) Share

Report

Posted on by Alex_Chen

Hi, team

We have a requirements to optimize the tab navigation for the input controls inside PCF components, but we didn't figure out a proper way to determine the proper tab index value, could you advise? Thank you.

In the PCF component, looks like we could get the TabIndex settings of the PCF component by context.accessibility.assignedTabIndex, but this property isn't included in the TypeScript definition, also even though we could work around and get this value, but is that safe to use this internal property?
With the tab index retrieved by the approach above, that's still hard to assign a proper tab index to the input controls inside the PCF component, as the PowerApps will re-calculate and assign the tab index internally, for example, when I insert 3 text input controls in a blank screen and with the TabIndex 1,2,3, the actual tabindex present in the generated HTML might be 2,4,6, so is there a better safe way to assign the TabIndex for the input controls inside the PCF components?

Categories:

Power Apps Pro Dev & ISV

I have the same question (0)

All responses (6)

Answers (0)

ScottDurow 1,039 on at

Like (0)

Report
Copy link

Link copied!

Thanks @HemantG - exposing it would be great - but it also needs to be translated into the 'real' tabindex that is being used by the CanvasApp runtime - this is different to the logical tabindex set by the user at design time.

Was this reply helpful? Yes No
Hemant Gaur on at

Like (1)

Report
Copy link

Link copied!

Thanks for the clarification. Canvas tabIndex support is planned and can be explicitly assigned using properties panel. I think we would need to expose this via properties to controls explicitly too because unlike model UCI canvas PCF will need to assign subrange for the tab stops within the controls.

I will get this marked as open issue in the docs.

Thanks,

Hemant

Was this reply helpful? Yes No
ScottDurow 1,039 on at

Like (0)

Report
Copy link

Link copied!

I have faced the same issue - the accessibility.assignedTabIndex value isn't supported because it's not documented.
As you say, even if we did get this value - it makes it hard to know what actual value your tabindex needs to be because of the runtime rendering. Best I've found is to use the DOM explorer to find what tabindexes are being assigned and then set accordingly. This does make it challenging when the Canvas App layout changes.

In Model Driven Apps - it's easier because the tab index is automatically assigned and the PCF control is added to the dom in the order that tab focus is accepted.
@HemantG can we expect this to be documented and exposed and converted to the 'real' tabindex.

Was this reply helpful? Yes No
Alex_Chen 10 on at

Like (0)

Report
Copy link

Link copied!

P.S. We are using Canvas app, not model-driven app.

Was this reply helpful? Yes No
Alex_Chen 10 on at

Like (0)

Report
Copy link

Link copied!

@HemantGThanks Hemant, however, the tabindex="0" didn't work to me, as we have both the PowerApps OOB controls and PCF components on the same screen, the PowerApps will automatically adjust the tabindex values of the OOB input controls when generating the HTML content, regardless which TabIndex value configured in the PowerApps, while the <input /> inserted by the PCF component will keep the tabindex="0" we assigned, then the final tab index is "INPUT (OOB): 2, INPUT (PCF): 0, BUTTON (OOB): 5", see the attachments for example, our goal is to use tab navigating to access the controls as per their display order in the web UI, any idea?

Was this reply helpful? Yes No
Hemant Gaur on at

Like (0)

Report
Copy link

Link copied!

Unified interface for model apps uses DOM ordering without need of explicit tabIndex assignment.

So setting tabindex="0" should enable the controls to participate in the tab ordering for the app.

Please check and let me know if you find any issues.

hemant

Was this reply helpful? Yes No