Name, role, value accessibility fixes (#16295)

Fix (restricted-editing): Improved the accessibility of the restricted editing dropdown by setting the correct ARIA role on the toolbar menu. Fix (minimap): Addressed the issue of the minimap `<iframe>` being unnecessarily exposed to assistive technologies. --------- Co-authored-by: Aleksander Nowodzinski <a.nowodzinski@cksource.com>
ckeditor · May 7, 2024 · 04a8c63 · 04a8c63
1 parent ffe310e
commit 04a8c63
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 1 deletion.
diff --git a/packages/ckeditor5-minimap/src/minimapiframeview.ts b/packages/ckeditor5-minimap/src/minimapiframeview.ts
@@ -55,6 +55,7 @@ export default class MinimapIframeView extends IframeView {
 		this.extendTemplate( {
 			attributes: {
 				tabindex: -1,
+				'aria-hidden': 'true',
 				class: [
 					'ck-minimap__iframe'
 				],

diff --git a/packages/ckeditor5-restricted-editing/src/restrictededitingmodeui.ts b/packages/ckeditor5-restricted-editing/src/restrictededitingmodeui.ts
@@ -49,7 +49,9 @@ export default class RestrictedEditingModeUI extends Plugin {
 				listItems.add( this._getButtonDefinition( commandName, label, keystroke ) );
 			} );
 
-			addListToDropdown( dropdownView, listItems );
+			addListToDropdown( dropdownView, listItems, {
+				role: 'menu'
+			} );
 
 			dropdownView.buttonView.set( {
 				label: t( 'Navigate editable regions' ),
@@ -141,6 +143,7 @@ export default class RestrictedEditingModeUI extends Plugin {
 				withText: true,
 				keystroke,
 				withKeystroke: true,
+				role: 'menuitem',
 				_commandName: commandName
 			} )
 		};

diff --git a/packages/ckeditor5-restricted-editing/tests/restrictededitingmodeui.js b/packages/ckeditor5-restricted-editing/tests/restrictededitingmodeui.js
@@ -63,6 +63,12 @@ describe( 'RestrictedEditingModeUI', () => {
 			expect( button ).to.have.property( 'isOn', false );
 		} );
 
+		it( 'has role="menu" attribute set in items list', () => {
+			dropdown.isOpen = true;
+
+			expect( dropdown.panelView.children.first.role ).to.be.equal( 'menu' );
+		} );
+
 		describe( 'exceptions navigation buttons', () => {
 			beforeEach( () => {
 				dropdown.render();
@@ -84,6 +90,7 @@ describe( 'RestrictedEditingModeUI', () => {
 				expect( button.withKeystroke ).to.be.true;
 				expect( button.label ).to.equal( 'Previous editable region' );
 				expect( button.keystroke ).to.equal( 'Shift+Tab' );
+				expect( button.role ).to.equal( 'menuitem' );
 			} );
 
 			it( 'should have one that goes forward', () => {
@@ -95,6 +102,7 @@ describe( 'RestrictedEditingModeUI', () => {
 				expect( button.withKeystroke ).to.be.true;
 				expect( button.label ).to.equal( 'Next editable region' );
 				expect( button.keystroke ).to.equal( 'Tab' );
+				expect( button.role ).to.equal( 'menuitem' );
 			} );
 
 			it( 'should focus the view after executing the command', () => {