Merge pull request #16550 from ckeditor/ck/16544

Fix (UI): The aria-live views will no longer violate the a11y aXe rule: `landmarks should be unique`. Closes #16544.
ckeditor · Jun 13, 2024 · 50c09aa · 50c09aa
2 parents 07840aa + a524de9
commit 50c09aa
Show file tree

Hide file tree

Showing 2 changed files with 3 additions and 4 deletions.
diff --git a/packages/ckeditor5-ui/src/arialiveannouncer.ts b/packages/ckeditor5-ui/src/arialiveannouncer.ts
@@ -169,7 +169,6 @@ export class AriaLiveAnnouncerRegionView extends View {
 		this.setTemplate( {
 			tag: 'div',
 			attributes: {
-				role: 'region',
 				'aria-live': politeness,
 				'aria-relevant': 'additions'
 			},

diff --git a/packages/ckeditor5-ui/tests/editorui/arialiveannouncer.js b/packages/ckeditor5-ui/tests/editorui/arialiveannouncer.js
@@ -56,7 +56,7 @@ describe( 'AriaLiveAnnouncer', () => {
 			expect( firstRegion.politeness ).to.equal( 'polite' );
 			expect( firstRegion.element.parentNode ).to.equal( announcer.view.element );
 
-			expect( firstRegion.element.getAttribute( 'role' ) ).to.equal( 'region' );
+			expect( firstRegion.element.getAttribute( 'role' ) ).to.be.null;
 			expect( firstRegion.element.getAttribute( 'aria-live' ) ).to.equal( 'polite' );
 			expect( firstRegion.element.querySelector( 'li' ).innerHTML ).to.equal( 'bar' );
 		} );
@@ -73,7 +73,7 @@ describe( 'AriaLiveAnnouncer', () => {
 			expect( firstRegion.politeness ).to.equal( 'polite' );
 			expect( firstRegion.element.parentNode ).to.equal( announcer.view.element );
 
-			expect( firstRegion.element.getAttribute( 'role' ) ).to.equal( 'region' );
+			expect( firstRegion.element.getAttribute( 'role' ) ).to.be.null;
 			expect( firstRegion.element.getAttribute( 'aria-live' ) ).to.equal( 'polite' );
 			expect( firstRegion.element.querySelector( 'li:last-child' ).innerHTML ).to.equal( 'baz' );
 		} );
@@ -188,6 +188,6 @@ describe( 'AriaLiveAnnouncerRegionView', () => {
 	} );
 
 	function queryAllMessages() {
-		return [ ...announcerRegionView.element.querySelectorAll( 'div[role="region"] ul li' ) ].map( element => element.innerHTML );
+		return [ ...announcerRegionView.element.querySelectorAll( 'div[aria-live] ul li' ) ].map( element => element.innerHTML );
 	}
 } );