Other (ui): Icons (IconView) are no longer individually accessible …

…by assistive technologies, improving overall accessibility. Closes #17554. * fix: Add aria-hidden to icons inside ButtonView to prevent accessing them individually. * fix(ui): Move aria-hidden from ButtonView to IconView. Prevent icons inside ButtonView from accessing them individually. * fix(ui): Move test to existing describe block for IconView. * fix(ui): Move test to existing describe block for IconView. * Fix bookmarks tests
ckeditor · Dec 10, 2024 · 513f8d3 · 513f8d3
1 parent 92fd8eb
commit 513f8d3
Show file tree

Hide file tree

Showing 3 changed files with 4 additions and 2 deletions.
diff --git a/packages/ckeditor5-bookmark/tests/bookmarkediting.js b/packages/ckeditor5-bookmark/tests/bookmarkediting.js
@@ -33,7 +33,7 @@ import { isWidget, getLabel } from '@ckeditor/ckeditor5-widget';
 
 describe( 'BookmarkEditing', () => {
 	// eslint-disable-next-line max-len
-	const domUIElement = '<span class="ck-bookmark__icon"><svg class="ck ck-icon ck-reset_all-excluded" viewBox="0 0 14 16"><path class="ck-icon__fill" d="M2 14.436V2a1 1 0 0 1 1-1h8a1 1 0 0 1 1 1v12.436a.5.5 0 0 1-.819.385l-3.862-3.2a.5.5 0 0 0-.638 0l-3.862 3.2A.5.5 0 0 1 2 14.436Z"></path></svg></span>';
+	const domUIElement = '<span class="ck-bookmark__icon"><svg class="ck ck-icon ck-reset_all-excluded" viewBox="0 0 14 16" aria-hidden="true"><path class="ck-icon__fill" d="M2 14.436V2a1 1 0 0 1 1-1h8a1 1 0 0 1 1 1v12.436a.5.5 0 0 1-.819.385l-3.862-3.2a.5.5 0 0 0-.638 0l-3.862 3.2A.5.5 0 0 1 2 14.436Z"></path></svg></span>';
 
 	let editor, element, model, view, converter;
 

diff --git a/packages/ckeditor5-ui/src/icon/iconview.ts b/packages/ckeditor5-ui/src/icon/iconview.ts
@@ -123,7 +123,8 @@ export default class IconView extends View {
 					// (https://github.com/ckeditor/ckeditor5/issues/12599).
 					bind.if( 'isColorInherited', 'ck-icon_inherit-color' )
 				],
-				viewBox: bind.to( 'viewBox' )
+				viewBox: bind.to( 'viewBox' ),
+				'aria-hidden': true
 			}
 		} );
 	}

diff --git a/packages/ckeditor5-ui/tests/icon/iconview.js b/packages/ckeditor5-ui/tests/icon/iconview.js
@@ -40,6 +40,7 @@ describe( 'IconView', () => {
 			expect( view.element.classList.contains( 'ck' ) ).to.be.true;
 			expect( view.element.classList.contains( 'ck-icon' ) ).to.be.true;
 			expect( view.element.getAttribute( 'viewBox' ) ).to.equal( '0 0 20 20' );
+			expect( view.element.getAttribute( 'aria-hidden' ) ).to.equal( 'true' );
 		} );
 	} );