Add aria-checked property to checkbox/radio menu items

src/menu/MenuItem.ts

@@ -60,7 +60,7 @@ export class MenuItem extends MenuItemBase<MenuItemProperties> {
 			hasPopup = false,
 			hasMenu = false,
 			properties,
-			selected,
+			selected = false,
 			tag = 'span',
 			type = 'item'
 		} = this.properties;
@@ -71,7 +71,7 @@ export class MenuItem extends MenuItemBase<MenuItemProperties> {
 			selected ? css.selected : null
 		);
 
-		return v(tag, assign(Object.create(null), properties, {
+		const itemProperties: { [key: string]: any; } = {
 			'aria-controls': controls,
 			'aria-expanded': String(expanded),
 			'aria-haspopup': hasPopup ? 'true' : undefined,
@@ -82,7 +82,13 @@ export class MenuItem extends MenuItemBase<MenuItemProperties> {
 			onkeydown: this.onKeyDown,
 			role: roleMap[type],
 			tabIndex: active ? 0 : -1
-		}), this.children);
+		};
+
+		if (type === 'checkbox' || type === 'radio') {
+			itemProperties['aria-checked'] = String(selected);
+		}
+
+		return v(tag, assign(Object.create(null), properties, itemProperties), this.children);
 	}
 
 	protected onClick(event: MouseEvent) {

src/menu/tests/unit/MenuItem.ts

@@ -212,15 +212,41 @@ registerSuite({
 			'the `aria-haspopup` attribute should be undefined');
 	},
 
-	selected() {
-		const item = new MenuItem();
-		let vnode: any = item.__render__();
+	selected: {
+		basic() {
+			const item = new MenuItem();
+			let vnode: any = item.__render__();
 
-		assert.notOk(vnode.properties.classes[css.selected]);
+			assert.notOk(vnode.properties.classes[css.selected]);
 
-		item.setProperties({ selected: true });
-		vnode = item.__render__();
-		assert.isTrue(vnode.properties.classes[css.selected]);
+			item.setProperties({ selected: true });
+			vnode = item.__render__();
+			assert.isTrue(vnode.properties.classes[css.selected]);
+		},
+
+		'type="checkbox"'() {
+			const item = new MenuItem();
+			item.setProperties({ type: 'checkbox' });
+			let vnode: any = item.__render__();
+
+			assert.strictEqual(vnode.properties['aria-checked'], 'false');
+
+			item.setProperties({ type: 'checkbox', selected: true });
+			vnode = item.__render__();
+			assert.strictEqual(vnode.properties['aria-checked'], 'true');
+		},
+
+		'type="radio"'() {
+			const item = new MenuItem();
+			item.setProperties({ type: 'radio' });
+			let vnode: any = item.__render__();
+
+			assert.strictEqual(vnode.properties['aria-checked'], 'false');
+
+			item.setProperties({ type: 'radio', selected: true });
+			vnode = item.__render__();
+			assert.strictEqual(vnode.properties['aria-checked'], 'true');
+		}
 	},
 
 	tag() {