Creating accessible / keyboard navigation UI components

113
2
Jump to solution
01-04-2021 09:35 AM
KevinHibma
Esri Contributor

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.

UI.png

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

ui2.png

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>

 

 

2 Solutions

Accepted Solutions
DavidMartinez
Esri Regular Contributor

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

View solution in original post

Reply
0 Kudos
KevinHibma
Esri Contributor

For sake of completion, the code solution is to use focus-withinNormal 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>

 

View solution in original post

2 Replies
DavidMartinez
Esri Regular Contributor

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

View solution in original post

Reply
0 Kudos
KevinHibma
Esri Contributor

For sake of completion, the code solution is to use focus-withinNormal 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>

 

View solution in original post