fix(ui5-checkbox): make acc configurable (#11773)

Author: elenastoyanovaa

packages/base/src/jsx-runtime.ts

@@ -22,6 +22,7 @@ declare namespace JSX {
 	export interface DOMAttributes<T extends EventTarget> extends _JSX.DOMAttributes<T> {}
 	export interface SVGAttributes extends _JSX.SVGAttributes {}
 	export type AriaRole = _JSX.AriaRole;
+	export type AriaAttributes = _JSX.AriaAttributes;
 	export type MouseEventHandler<T extends EventTarget> = _JSX.MouseEventHandler<T>;
 	export type TargetedMouseEvent<Target extends EventTarget> = _JSX.TargetedMouseEvent<Target>;
 	export type TargetedInputEvent<Target extends EventTarget> = _JSX.TargetedInputEvent<Target>;

packages/base/src/types.ts

@@ -19,6 +19,9 @@ export type PassiveEventListenerObject = EventListenerObject & { passive: boolea
 
 // Accessibility
 export type AriaRole = JSX.AriaRole;
+export type AriaDisabled = JSX.AriaAttributes["aria-disabled"];
+export type AriaChecked = JSX.AriaAttributes["aria-checked"];
+export type AriaReadonly = JSX.AriaAttributes["aria-readonly"];
 export type AriaHasPopup = "dialog" | "grid" | "listbox" | "menu" | "tree";
 export type AriaCurrent = "page" | "step" | "location" | "date" | "time" | "true" | "false" | boolean | undefined;
 export type AriaAutoComplete = "list" | "none" | "inline" | "both" | undefined;

packages/main/cypress/specs/MultiComboBox.cy.tsx

@@ -582,4 +582,46 @@ describe("Accessibility", () => {
 			.find("input")
 			.should("have.attr", "aria-label", label);
 	});
+
+	it("checkbox should be presentational", () => {
+		cy.mount(
+			<MultiComboBox>
+				<MultiComboBoxItem text="Algeria"></MultiComboBoxItem>
+				<MultiComboBoxItem text="Bulgaria"></MultiComboBoxItem>
+				<MultiComboBoxItem text="England"></MultiComboBoxItem>
+			</MultiComboBox>
+		);
+
+		cy.get("ui5-multi-combobox")
+			.as("multiComboBox");
+
+		cy.get("@multiComboBox")
+			.shadow()
+			.find("ui5-icon")
+			.as("icon");
+
+		cy.get("@icon")
+			.click();
+
+		cy.get("ui5-mcb-item")
+			.eq(0)
+			.shadow()
+			.find("ui5-checkbox")
+			.as("checkbox");
+
+		cy.get("@checkbox")
+			.shadow()
+			.find("input[type='checkbox']")
+			.should("not.exist");
+		
+		cy.get("@checkbox")
+			.shadow()
+			.find(".ui5-checkbox-root")
+			.should("have.attr", "role", "presentation");
+
+		cy.get("@checkbox")
+			.shadow()
+			.find(".ui5-checkbox-root")
+			.should("not.have.attr", "tabindex");
+	});
 });

packages/main/src/CheckBox.ts

@@ -11,6 +11,12 @@ import { getEffectiveAriaLabelText } from "@ui5/webcomponents-base/dist/util/Acc
 import { isSpace, isEnter } from "@ui5/webcomponents-base/dist/Keys.js";
 import type { IFormInputElement } from "@ui5/webcomponents-base/dist/features/InputElementsFormSupport.js";
 import type WrappingType from "./types/WrappingType.js";
+import type {
+	AriaRole,
+	AriaChecked,
+	AriaDisabled,
+	AriaReadonly,
+} from "@ui5/webcomponents-base/dist/types.js";
 import {
 	VALUE_STATE_ERROR,
 	VALUE_STATE_WARNING,
@@ -27,6 +33,15 @@ import CheckBoxTemplate from "./CheckBoxTemplate.js";
 let isGlobalHandlerAttached = false;
 let activeCb: CheckBox;
 
+type CheckBoxAccInfo = {
+	role?: AriaRole,
+	ariaChecked?: AriaChecked,
+	ariaReadonly?: AriaReadonly,
+	ariaDisabled?: AriaDisabled,
+	ariaRequired?: boolean,
+	tabindex?: number | undefined,
+}
+
 /**
  * @class
  *
@@ -254,6 +269,13 @@ class CheckBox extends UI5Element implements IFormInputElement {
 	@property({ type: Boolean })
 	active = false;
 
+	/**
+	 * Defines custom aria implementation object.
+	 * @private
+	 */
+	@property({ type: Object })
+	_accInfo?: CheckBoxAccInfo;
+
 	@i18n("@ui5/webcomponents")
 	static i18nBundle: I18nBundle;
 	_deactivate: () => void;
@@ -442,6 +464,17 @@ class CheckBox extends UI5Element implements IFormInputElement {
 	get isDisplayOnly() {
 		return this.displayOnly && !this.disabled;
 	}
+
+	get accInfo() {
+		return {
+			"role": this._accInfo ? this._accInfo.role : "checkbox" as AriaRole,
+			"ariaChecked": this._accInfo ? this._accInfo.ariaChecked : this.effectiveAriaChecked as AriaChecked,
+			"ariaReadonly": this._accInfo ? this._accInfo.ariaReadonly : this.ariaReadonly as AriaReadonly,
+			"ariaDisabled": this._accInfo ? this._accInfo.ariaDisabled : this.effectiveAriaDisabled as AriaDisabled,
+			"ariaRequired": this._accInfo ? this._accInfo.ariaRequired : this.required,
+			"tabindex": this._accInfo ? this._accInfo.tabindex : this.effectiveTabIndex,
+		};
+	}
 }
 
 CheckBox.define();

packages/main/src/CheckBoxTemplate.tsx

@@ -15,16 +15,16 @@ export default function CheckBoxTemplate(this: CheckBox) {
 				"ui5-checkbox-root": true,
 				"ui5-checkbox--hoverable": !this.disabled && !this.readonly && isDesktop(),
 			}}
-			role="checkbox"
+			role={this.accInfo.role}
 			part="root"
-			aria-checked={this.effectiveAriaChecked}
-			aria-readonly={this.ariaReadonly}
-			aria-disabled={this.effectiveAriaDisabled}
+			aria-checked={this.accInfo.ariaChecked}
+			aria-readonly={this.accInfo.ariaReadonly}
+			aria-disabled={this.accInfo.ariaDisabled}
 			aria-label={this.ariaLabelText}
 			aria-labelledby={this.ariaLabelledBy}
 			aria-describedby={this.ariaDescribedBy}
-			aria-required={this.required}
-			tabindex={this.effectiveTabIndex}
+			aria-required={this.accInfo.ariaRequired}
+			tabindex={this.accInfo.tabindex}
 			onMouseDown={this._onmousedown}
 			onMouseUp={this._onmouseup}
 			onKeyDown={this._onkeydown}
@@ -45,6 +45,7 @@ export default function CheckBoxTemplate(this: CheckBox) {
 				</div>
 			}
 
+			{this.accInfo.role === "checkbox" &&
 			<input
 				id={`${this._id}-CB`}
 				type="checkbox"
@@ -56,6 +57,7 @@ export default function CheckBoxTemplate(this: CheckBox) {
 				aria-hidden="true"
 				data-sap-no-tab-ref
 			/>
+			}
 
 			{this.text &&
 			<Label

packages/main/src/MultiComboBoxItem.ts

@@ -15,6 +15,7 @@ import {
 import styles from "./generated/themes/MultiComboBoxItem.css.js";
 import MultiComboBoxItemTemplate from "./MultiComboBoxItemTemplate.js";
 import type { SelectionRequestEventDetail } from "./ListItem.js";
+import type { AriaRole } from "@ui5/webcomponents-base";
 
 /**
  * @class
@@ -74,6 +75,12 @@ class MultiComboBoxItem extends ComboBoxItem implements IMultiComboBoxItem {
 	get _accessibleName() {
 		return MultiComboBoxItem.i18nBundle.getText(ARIA_LABEL_LIST_ITEM_CHECKBOX);
 	}
+
+	get checkBoxAccInfo() {
+		return {
+			role: "presentation" as AriaRole,
+		};
+	}
 }
 
 const isInstanceOfMultiComboBoxItem = (object: any): object is MultiComboBoxItem => {

packages/main/src/MultiComboBoxItemTemplate.tsx

@@ -12,8 +12,7 @@ function listItemContent(this: MultiComboBoxItem) {
 			<CheckBox
 				disabled={this._readonly}
 				checked={this.selected}
-				tabindex={-1}
-				accessibleName={this._accessibleName}
+				_accInfo = {this.checkBoxAccInfo}
 			/>
 			<div part="content" id="content" class="ui5-li-content">
 				<div class="ui5-li-text-wrapper">

packages/main/test/pages/CheckBox.html

@@ -62,6 +62,9 @@
 	<ui5-checkbox value-state="Positive" text="Long long long text" indeterminate checked></ui5-checkbox>
 	<ui5-checkbox value-state="Information" text="Long long long text" indeterminate checked></ui5-checkbox>
 
+	<ui5-title id="cb-label">ACC Test - custom acc</ui5-title>
+	<ui5-checkbox id="accCustomAria"></ui5-checkbox>
+
 	<br />
 	<ui5-checkbox id="checkboxChecked" checked></ui5-checkbox>
 
@@ -101,8 +104,13 @@
 		var checkBox2 = document.querySelector("#cb2");
 		var displayOnlyCb = document.querySelector("#displayOnlyCb");
 		var cbFormSubmitted = document.querySelector("#cbFormSubmitted");
+		var cdCustomAria = document.querySelector("#accCustomAria");
 		var counter = 0;
 
+		cdCustomAria._accInfo = {
+			role: "presentation",
+		};
+
 		[checkBox1, checkBox2, displayOnlyCb].forEach(function(el) {
 			el.addEventListener("ui5-change", function(event) {
 				counter += 1;

packages/main/test/specs/CheckBox.spec.js

@@ -99,6 +99,15 @@ describe("CheckBox general interaction", () => {
 		assert.strictEqual(await accNameRefCheckBox.getAttribute("aria-label"), EXPECTED_ARIA_LABEL_NAME_REF, "aria-label is set");
 	});
 
+	it("tests _accInfo", async () => {
+		const cbCustomAria = await browser.$("#accCustomAria").shadow$(".ui5-checkbox-root");
+
+		const EXPECTED_ROLE = "presentation";
+
+		assert.strictEqual(await cbCustomAria.getAttribute("role"), EXPECTED_ROLE, "aria role is custom set");
+		assert.notOk(await cbCustomAria.getAttribute("aria-checked"), "aria-checked should not be rendered if not set in _accInfo");
+	});
+
 	it("tests ui5-icon", async () => {
 		const checkboxChecked = await browser.$("#checkboxChecked").shadow$(".ui5-checkbox-icon");