Creating accessible / keyboard navigation UI components

[Anonymous User]

Hi,

I'm developing my own widget / UI for Experience Builder. I'm trying to ensure I create accessible components that allow keyboard navigation. By default, TAB does move from element to element. But on my Label/Checkbox components I do NOT see any sort of highlight/selection on the element. (It does work out of the box with < A href= > components.)

I was able to find one method that achieves some of what I desire, but creating the component in this way does not honor the app theme / color.
The first component here is created with a <Label check> and <Input type="checkbox"> (first code snippet below) and shows keyboard focus. The second element is created with <Label> and <Checkbox> and will not show focus, but does respect the app's theme.

This is my desired keyboard focus (show inactive facilities), as set by manually having Chrome apply focus.

Can anyone steer me towards the right combination to get the keyboard focus while respecting the app's theme?

Reference code:

1st component:

<Label check>
	<Input type="checkbox" aria-label= {defaultMessages.cluster_aria} id="clusterTglId" name="clusterTgl" checked={this.state.clusterinOn} onChange={(e) => {this.UI_Update({
	target: {
		name: e.target.name,
		value: e.target.checked,
		},
	}); 
	}}
	/>{defaultMessages.cluster_btn}
</Label>

2nd component

// this css doesnt help if included or excluded	
const highlight = css`		
:focus {
	outline-offset:2px solid orange;
	outline: webkit-focus-ring-color auto 1px;
  }
`;

<Label css={highlight}>
<Checkbox aria-label= {defaultMessages.inactive_aria} name="activechk" checked={this.state.inactive} onChange={(e) => {this.UI_Update({
		target: {
			name: e.target.name,
			value: e.target.checked,
			},
		}); 
	}}
/> {defaultMessages.inactive_btn}   </Label>

[DavidMartinez · Accepted solution]

Hi Kevin,

Currently, we do not have focus style support on our components. This is something we are currently working on and will be implemented over several releases. To support this today you would have to add your own styles to support this.

Cheers,

David

[Anonymous User · Accepted solution]

For sake of completion, the code solution is to use focus-within. Normal css focus isn't enough.

		const focusOutline = css`
			:focus-within {
				outline :1px solid black;
			}
		`

					<Label check css={focusOutline}>
						<Checkbox aria-label= {defaultMessages.cluster_aria} id="clusterTglId" name="clusterTgl" checked={this.state.clusterinOn} onChange={(e) => {this.UI_Update({
						target: {
							name: e.target.name,
							value: e.target.checked,
							},
						}); 
						}}
						/>{defaultMessages.cluster_btn}
					</Label>