Tests: Added tests for ariaLabel option in addMenuToDropdown and role…

… of DropdownMenuNestedMenuView.

packages/ckeditor5-ui/src/dropdown/utils.ts

@@ -188,6 +188,7 @@ export function createDropdown(
  * @param dropdownView A dropdown instance to which the menu component will be added.
  * @param body Body collection to which floating menu panels will be added.
  * @param definition The menu component definition.
+ * @param options.ariaLabel Label used by assistive technologies to describe the top-level menu.
  */
 export function addMenuToDropdown(
 	dropdownView: DropdownView,

packages/ckeditor5-ui/tests/dropdown/menu/dropdownmenunestedmenuview.js

@@ -124,6 +124,10 @@ describe( 'DropdownMenuNestedMenuView', () => {
 			it( 'should have CSS classes', () => {
 				expect( menuView.template.attributes.class ).to.include.members( [ 'ck', 'ck-dropdown-menu-list__nested-menu' ] );
 			} );
+
+			it( 'should have a presentation role to keep the a11y tree clean', () => {
+				expect( menuView.template.attributes.role ).to.include.members( [ 'presentation' ] );
+			} );
 		} );
 	} );
 

packages/ckeditor5-ui/tests/dropdown/utils.js

@@ -1339,6 +1339,24 @@ describe( 'utils', () => {
 			expect( dropdownView.menuView ).to.be.instanceof( DropdownMenuRootListView );
 		} );
 
+		it( 'should set a default aria-label for #menuView', () => {
+			addMenuToDropdown( dropdownView, body, definition );
+
+			dropdownView.isOpen = true;
+
+			expect( dropdownView.menuView.ariaLabel ).to.equal( 'Dropdown menu' );
+		} );
+
+		it( 'should allow for configuring a custom aria-label for #menuView', () => {
+			addMenuToDropdown( dropdownView, body, definition, {
+				ariaLabel: 'Custom menu dropdown'
+			} );
+
+			dropdownView.isOpen = true;
+
+			expect( dropdownView.menuView.ariaLabel ).to.equal( 'Custom menu dropdown' );
+		} );
+
 		it( 'should not do anything before the dropdown is opened for the first time', () => {
 			addMenuToDropdown( dropdownView, body, definition );