[Bug][a11y]: ActionGroup should have role="toolbar" as default / selected button should use aria-pressed

[majornista]

Code of conduct

• I agree to follow this project's code of conduct.

Impacted component(s)

ActionGroup

Expected behavior

Since ActionGroup uses the RovingTabindexController to manage focus using arrow keys to navigate between items, we should add role="toolbar" when no other role or selection mode is specified, so that screen readers will switch into forms mode and keyboard navigation will behave as expected.

Also, when selects is undefined, selected buttons should use aria-pressed rather than aria-checked.

Actual behavior

ActionGroup does not use role="toolbar" when no other role or selection mode is specified, so arrow keys will continue to navigate using a screen reader's browse/virtual cursor mode rather than move focus as they should for a toolbar.

Also, selected items with role="button" use aria-checked, when they should use aria-pressed:

See:

spectrum-web-components/packages/action-group/src/ActionGroup.ts

Lines 271 to 300 in 123f54c

	default:
	// if user defines .selected
	if (this.selected.length) {
	const selections: ActionButton[] = [];
	const updates = options.map(async (option) => {
	await option.updateComplete;
	option.setAttribute(
	'aria-checked',
	option.selected ? 'true' : 'false'
	);
	option.setAttribute('role', 'button');
	if (option.selected) {
	selections.push(option);
	}
	});
	if (applied) break;
	await Promise.all(updates);
	this.setSelected(
	selections.map((button) => {
	return button.value;
	})
	);
	} else {
	this.buttons.forEach((option) => {
	option.setAttribute('role', 'button');
	});
	this.removeAttribute('role');
	break;
	}

.

Screenshots

No response

What browsers are you seeing the problem in?

No response

How can we reproduce this issue?

1. Go to '...'
2. Click on '....'
3. Scroll to '....'
4. Check console
5. See error

Sample code that illustrates the problem

See:

spectrum-web-components/packages/action-group/src/ActionGroup.ts

Lines 271 to 300 in 123f54c

	default:
	// if user defines .selected
	if (this.selected.length) {
	const selections: ActionButton[] = [];
	const updates = options.map(async (option) => {
	await option.updateComplete;
	option.setAttribute(
	'aria-checked',
	option.selected ? 'true' : 'false'
	);
	option.setAttribute('role', 'button');
	if (option.selected) {
	selections.push(option);
	}
	});
	if (applied) break;
	await Promise.all(updates);
	this.setSelected(
	selections.map((button) => {
	return button.value;
	})
	);
	} else {
	this.buttons.forEach((option) => {
	option.setAttribute('role', 'button');
	});
	this.removeAttribute('role');
	break;
	}

Logs taken while reproducing problem

No response

[najikahalsema]

completed via #3227