Add focus outlines to controls used during onboarding

[johnny9]

Changes to the controls within the Onboarding flows to show which control is in active focus. This will be the main indicator when navigating with a keyboard/tabbing.

[jarolrod]

concept ACK, going in the right direction here.

Not a blocker for this PR but: seems we can cycle into components in pages that aren't currently in view, right now this is an issue for proper tab-focus functionality and for accessibility features like a screenreader.

A benefit of doing this is that it exposes some slight padding+layout issues with some components :D

[johnny9]

Some of these come out a little strange. TextEdits and external links in particular.

Continue button and top right icon	Back and about page	TextEdits and switch	OptionButtons

ContinueButton and the OptionButtons work well. The navigation buttons are close but the alignment needs a little work since the icon makes the widths odd. Looking for thoughts mainly on the TextEdits and Labels for external links/about information.

[johnny9]

concept ACK, going in the right direction here.

Not a blocker for this PR but: seems we can cycle into components in pages that aren't currently in view, right now this is an issue for proper tab-focus functionality and for accessibility features like a screenreader.

Yeah, I've been working on the KeyNavigation to prevent the focus from going to outside pages. It's more complicated than I thought it would be but it seems to be workable. Good motivation to get some simple qml testing going too since its something that could be broken fairly easily with changes to the controls.

[jarolrod]

Why have different values like here? The border should be nicely defined and uniform, it is the elements themselves that differ in how much space they take up, and we need to address those issues in follow-ups.

I would keep the definitions in all of these to just specify anchors.margins: -4 and address the issues in the elements themselves, instead of changing how the border works to accommodate the size issues.

It might be possible to extrapolate this out into our theme file, but we can leave that for much later.

[johnny9]

Ok, I like that approach. I'll try it out and see if it can be adjusted properly with margins/padding values on the elements.

[jarolrod]

I'm going to ACK this

this pr doesn't have to address the issues with the elements, only to keep the declaration of the margins of the border to only anchors.margins: -4 for now, alternatively we can merge like this and address the issues in a follow-up and clean up the definition of the border.

[jarolrod]

ACK 6f00bc3

[hebasto]

Tested on Ubuntu 22.04. Having multiple warnings:

qrc:/qml/controls/ValueInput.qml:22:9: Unable to assign [undefined] to bool

[hebasto]

@johnny9

Mind rebasing?

And #214 (comment) remains unaddressed...

[johnny9]

Update from 6f00bc3 to 85317d3:

• Rebase with main
• Address Jarol's comment by using margins: -4 for all components
• Make ValueInput a Control so it can receive tab focus and fix the error seen by hebasto

[jarolrod]

The tab focus for Setting should be the setting row itself, we'd have to move out the separator rectangle from the setting control into the ColumnLayout containing the settings though

[jarolrod]

Replaced by #263