Microsoft-ui-xaml: Proposal: Tab Index button on In-App Toolbar

[JerryNixon]

Proposal: Tab Index button on In-App Toolbar

Summary

Especially for UWP, working with tab index order is a challenge. I am building bigger and bigger forms over data for enterprises and, well, this is a pain point. I propose adding the tab index management functionality as a button on the in-app toolbar.

Something like this:

Note: the high-fidelity mock up above is not intended to be a guide for your design. Just illustrating the idea. You guys do a great job with icons without any help from me.

This is a screenshot of the Windows Forms implementation of this feature in Visual Studio. I make this point only because there is no such functionality in UWP for me to provide here. (WPF has it).

Rationale

You just need this feature to build nice forms, especially big ones. Adding it to the in-app toolbar is the perfect time to review, interact with and and validate the flow of a form, too.

Open questions

1. The current in-app toolbar implementation doesn't actually change the underlying XAML. This would be the first to do that. Which means, it would probably be a little more involved.
2. This is more than just adding a button, I realize that. The functionality for UWP would need to be added. That said, could this be added for WPF first, then introduced for UWP _soon_ after?
3. This is a can of works, isn't it? Why not show keyboard acceleration, too? Why not show accessibility hints and enable language switching? Let's not scope creep this simple idea to death.

[mdtauk]

Is there a way to render arrows from tab index to tab index? And if you can, is there any point to visualise the flow? Are the complex tab order controls that could benefit?

[JerryNixon]

Visualizing the flow, especially for controller navigation for apps on the Xbox would be another neat feature, for sure. Good idea, Martin. You should submit a feature proposal.

[chingucoding]

This is a great idea! This would definitely make it easier to test for tab order!

I am not quite sure if those arrows would work, since complex layouts may have a complex tabbing order, where arrows would intersect a lot and the visualization would look rather messy than being helpful.

[mdtauk]

Visualizing the flow, especially for controller navigation for apps on the Xbox would be another neat feature, for sure. Good idea, Martin. You should submit a feature proposal.

I tend not to make proposals on ideas I am unsure would be worth doing, hence a series of questions for those who want some better Tab Index visualising. 😀

[shaheedmalik]

Visualizing the flow, especially for controller navigation for apps on the Xbox would be another neat feature, for sure. Good idea, Martin. You should submit a feature proposal.

I tend not to make proposals on ideas I am unsure would be worth doing, hence a series of questions for those who want some better Tab Index visualising. 😀

Do it!

[mdtauk]

Visualizing the flow, especially for controller navigation for apps on the Xbox would be another neat feature, for sure. Good idea, Martin. You should submit a feature proposal.

I tend not to make proposals on ideas I am unsure would be worth doing, hence a series of questions for those who want some better Tab Index visualising. 😀

Do it!

Not sure if the arrows are needed, but grouping with colour, and the use of a decimal delimiter could help show the tabbing, as well as the arrow to change focus.

[chingucoding]

You might want to look the Accessibility Insights extension for the Microsoft Edge Beta for inspiration, which already has this feature:

_Tab order visualized for the WinUI GitHub page_

[stevenbrix]

@chabiss @maxbrister adding you guys since this is related to the in-app toolbar, which is owned by VS

[marb2000]

This is a feature request for the XAML Tooling team in VS, @DmitriyKomin can you take care of this?

[marb2000]

Closing it given should be in the VS backlog rather than WinUI.