Merge pull request #18201 from ckeditor/ck/16923-drop-role

Fix (table): Removed `role: textbox` from `td` / `th` editables. Windows Narrator no longer reads table dimensions as 0 by 0.  Closes #16923

Author: Mati365

packages/ckeditor5-list/tests/todolist/todolistediting.js

@@ -648,7 +648,7 @@ describe( 'TodoListEditing', () => {
 								'<tbody>' +
 									'<tr>' +
 										'<td class="ck-editor__editable ck-editor__nested-editable" ' +
-											'contenteditable="true" role="textbox" tabindex="-1">' +
+											'contenteditable="true" tabindex="-1">' +
 											'<span class="ck-table-bogus-paragraph">foo</span>' +
 										'</td>' +
 									'</tr>' +

packages/ckeditor5-restricted-editing/tests/restrictededitingmodeediting.js

@@ -354,7 +354,7 @@ describe( 'RestrictedEditingModeEditing', () => {
 				).to.equalMarkup(
 					'<figure class="ck-widget ck-widget_with-selection-handle table" contenteditable="false">' +
 					'<div class="ck ck-widget__selection-handle"></div>' +
-					'<table><tbody><tr><td class="ck-editor__editable ck-editor__nested-editable" contenteditable="true" role="textbox" ' +
+					'<table><tbody><tr><td class="ck-editor__editable ck-editor__nested-editable" contenteditable="true" ' +
 					'tabindex="-1">' +
 					'<span class="ck-table-bogus-paragraph"><span class="restricted-editing-exception"><b>foo bar baz</b></span></span>' +
 					'</td></tr></tbody></table>' +

packages/ckeditor5-table/src/converters/downcast.ts

@@ -112,7 +112,7 @@ export function downcastCell( options: { asWidget?: boolean } = {} ): ElementCre
 				const cellElementName = isHeading ? 'th' : 'td';
 
 				result = options.asWidget ?
-					toWidgetEditable( writer.createEditableElement( cellElementName ), writer ) :
+					toWidgetEditable( writer.createEditableElement( cellElementName ), writer, { withAriaRole: false } ) :
 					writer.createContainerElement( cellElementName );
 				break;
 			}

packages/ckeditor5-table/tests/_utils/utils.js

@@ -379,7 +379,6 @@ function makeRows( tableData, options ) {
 				if ( asWidget ) {
 					attributes.class = getClassToSet( attributes );
 					attributes.contenteditable = 'true';
-					attributes.role = 'textbox';
 					attributes.tabindex = '-1';
 				}
 

packages/ckeditor5-table/tests/converters/downcast.js

@@ -309,7 +309,7 @@ describe( 'TableCaptionEditing', () => {
 						'<table>' +
 							'<tbody>' +
 								'<tr>' +
-									'<td class="ck-editor__editable ck-editor__nested-editable" contenteditable="true" role="textbox"' +
+									'<td class="ck-editor__editable ck-editor__nested-editable" contenteditable="true"' +
 										' tabindex="-1">' +
 										'<span class="ck-table-bogus-paragraph">xyz</span>' +
 									'</td>' +

packages/ckeditor5-table/tests/tablecaption/tablecaptionediting.js

@@ -243,6 +243,7 @@ export function getLabel( element: ViewElement ): string {
  * * adds the `ck-editor__editable` and `ck-editor__nested-editable` CSS classes,
  * * adds the `ck-editor__nested-editable_focused` CSS class when the editable is focused and removes it when it is blurred.
  * * implements the {@link ~setHighlightHandling view highlight on widget's editable}.
+ * * sets the `role` attribute to `textbox` for accessibility purposes.
  *
  * Similarly to {@link ~toWidget `toWidget()`} this function should be used in `editingDowncast` only and it is usually
  * used together with {@link module:engine/conversion/downcasthelpers~DowncastHelpers#elementToElement `elementToElement()`}.
@@ -275,18 +276,24 @@ export function getLabel( element: ViewElement ): string {
  *
  * @param options Additional options.
  * @param options.label Editable's label used by assistive technologies (e.g. screen readers).
+ * @param options.withAriaRole Whether to add the role="textbox" attribute on the editable. Defaults to `true`.
  * @returns Returns the same element that was provided in the `editable` parameter
  */
 export function toWidgetEditable(
 	editable: ViewEditableElement,
 	writer: DowncastWriter,
 	options: {
 		label?: string;
+		withAriaRole?: boolean;
 	} = {}
 ): ViewEditableElement {
 	writer.addClass( [ 'ck-editor__editable', 'ck-editor__nested-editable' ], editable );
 
-	writer.setAttribute( 'role', 'textbox', editable );
+	// Set role="textbox" only if explicitly requested (defaults to true for backward compatibility).
+	if ( options.withAriaRole !== false ) {
+		writer.setAttribute( 'role', 'textbox', editable );
+	}
+
 	writer.setAttribute( 'tabindex', '-1', editable );
 
 	if ( options.label ) {

packages/ckeditor5-widget/src/utils.ts

@@ -240,6 +240,27 @@ describe( 'widget utils', () => {
 			expect( element.getAttribute( 'tabindex' ) ).to.equal( '-1' );
 		} );
 
+		it( 'should add role attribute by default for backward compatibility', () => {
+			const element = new ViewEditableElement( viewDocument, 'div' );
+			toWidgetEditable( element, writer );
+
+			expect( element.getAttribute( 'role' ) ).to.equal( 'textbox' );
+		} );
+
+		it( 'should add role attribute when withAriaRole is set to true', () => {
+			const element = new ViewEditableElement( viewDocument, 'div' );
+			toWidgetEditable( element, writer, { withAriaRole: true } );
+
+			expect( element.getAttribute( 'role' ) ).to.equal( 'textbox' );
+		} );
+
+		it( 'should not add role attribute when withAriaRole is set to false', () => {
+			const element = new ViewEditableElement( viewDocument, 'div' );
+			toWidgetEditable( element, writer, { withAriaRole: false } );
+
+			expect( element.hasAttribute( 'role' ) ).to.be.false;
+		} );
+
 		it( 'should add label if it was passed through options', () => {
 			toWidgetEditable( element, writer, { label: 'foo' } );
 			expect( element.getAttribute( 'aria-label' ) ).to.equal( 'foo' );