Skip to content

Commit

Permalink
Merge pull request #16070 from ckeditor/ck/15506-pressing-the-tab-key…
Browse files Browse the repository at this point in the history 
…-in-restricted-editing-mode-enters-a-table-thats-non-editable

Fix (widget): Native browser `tab` key support should be disabled for cycling nested editable elements inside the editor. Closes #15506.
  • Loading branch information
@niegowski
niegowski authored Apr 2, 2024
2 parents 69ec642 + 28d4fce commit e55c6c1
Show file tree
Hide file tree
Showing 12 changed files with 137 additions and 75 deletions.
3 changes: 2 additions & 1 deletion packages/ckeditor5-ckbox/tests/ckboxediting.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -789,7 +789,8 @@ describe( 'CKBoxEditing', () => {
'class="ck-editor__editable ck-editor__nested-editable" ' +
'contenteditable="true" ' +
'data-placeholder="Enter image caption" ' +
'role="textbox">' +
'role="textbox" ' +
'tabindex="-1">' +
'<a data-ckbox-resource-id="link-id" href="/assets/sample.png">Text of the caption</a>' +
'</figcaption>' +
'</figure>'
Expand Down
43 changes: 22 additions & 21 deletions packages/ckeditor5-image/tests/imagecaption/imagecaptionediting.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -201,7 +201,7 @@ describe( 'ImageCaptionEditing', () => {
'<figure class="ck-widget image" contenteditable="false">' +
'<img src="img.png"></img>' +
'<figcaption aria-label="Caption for the image" class="ck-editor__editable ck-editor__nested-editable" ' +
'contenteditable="true" data-placeholder="Enter image caption" role="textbox">' +
'contenteditable="true" data-placeholder="Enter image caption" role="textbox" tabindex="-1">' +
'Foo bar baz.' +
'</figcaption>' +
'</figure>'
Expand Down Expand Up @@ -257,7 +257,7 @@ describe( 'ImageCaptionEditing', () => {
'<figure class="ck-widget image" contenteditable="false">' +
'<img src="img.png"></img>' +
'<figcaption aria-label="Caption for the image" class="ck-editor__editable ck-editor__nested-editable" ' +
'contenteditable="true" data-placeholder="Enter image caption" role="textbox">' +
'contenteditable="true" data-placeholder="Enter image caption" role="textbox" tabindex="-1">' +
'foo bar' +
'</figcaption>' +
'</figure>'
Expand All @@ -280,7 +280,7 @@ describe( 'ImageCaptionEditing', () => {
'<img src="img.png"></img>' +
'<figcaption aria-label="Caption for the image" ' +
'class="ck-editor__editable ck-editor__nested-editable ck-placeholder" ' +
'contenteditable="true" data-placeholder="Enter image caption" role="textbox">' +
'contenteditable="true" data-placeholder="Enter image caption" role="textbox" tabindex="-1">' +
'</figcaption>' +
'</figure>'
);
Expand All @@ -301,7 +301,7 @@ describe( 'ImageCaptionEditing', () => {
'<figure class="ck-widget image" contenteditable="false">' +
'<img src="img.png"></img>' +
'<figcaption aria-label="Caption for the image" class="ck-editor__editable ck-editor__nested-editable" ' +
'contenteditable="true" data-placeholder="Enter image caption" role="textbox">baz</figcaption>' +
'contenteditable="true" data-placeholder="Enter image caption" role="textbox" tabindex="-1">baz</figcaption>' +
'</figure>'
);
} );
Expand Down Expand Up @@ -338,7 +338,8 @@ describe( 'ImageCaptionEditing', () => {
'<img src="img.png"></img>' +
'<figcaption aria-label="Caption for the image" ' +
'class="ck-editor__editable ck-editor__nested-editable highlight-yellow" ' +
'contenteditable="true" data-foo="yellow" data-placeholder="Enter image caption" role="textbox">' +
'contenteditable="true" data-foo="yellow" data-placeholder="Enter image caption" role="textbox" ' +
'tabindex="-1">' +
'Foo bar baz.' +
'</figcaption>' +
'</figure>'
Expand All @@ -352,7 +353,7 @@ describe( 'ImageCaptionEditing', () => {
'<figure class="ck-widget image" contenteditable="false">' +
'<img src="img.png"></img>' +
'<figcaption aria-label="Caption for the image" class="ck-editor__editable ck-editor__nested-editable" ' +
'contenteditable="true" data-placeholder="Enter image caption" role="textbox">' +
'contenteditable="true" data-placeholder="Enter image caption" role="textbox" tabindex="-1">' +
'Foo bar baz.' +
'</figcaption>' +
'</figure>'
Expand Down Expand Up @@ -451,7 +452,7 @@ describe( 'ImageCaptionEditing', () => {
'[<figure class="ck-widget image" contenteditable="false">' +
'<img alt="" src=""></img>' +
'<figcaption aria-label="Caption for the image" class="ck-editor__editable ck-editor__nested-editable" ' +
'contenteditable="true" data-placeholder="Enter image caption" role="textbox">' +
'contenteditable="true" data-placeholder="Enter image caption" role="textbox" tabindex="-1">' +
'foo bar' +
'</figcaption>' +
'</figure>]' +
Expand Down Expand Up @@ -481,7 +482,7 @@ describe( 'ImageCaptionEditing', () => {
'<img alt="" src=""></img>' +
'<figcaption aria-label="Caption for the image" ' +
'class="ck-editor__editable ck-editor__nested-editable ck-placeholder" ' +
'contenteditable="true" data-placeholder="Enter image caption" role="textbox"></figcaption>' +
'contenteditable="true" data-placeholder="Enter image caption" role="textbox" tabindex="-1"></figcaption>' +
'</figure>]' +
'<p></p>'
);
Expand Down Expand Up @@ -533,7 +534,7 @@ describe( 'ImageCaptionEditing', () => {
'<img src=""></img>' +
'<figcaption aria-label="Caption for the image" ' +
'class="ck-editor__editable ck-editor__nested-editable ck-placeholder" ' +
'contenteditable="true" data-placeholder="Enter image caption" role="textbox">' +
'contenteditable="true" data-placeholder="Enter image caption" role="textbox" tabindex="-1">' +
'</figcaption>' +
'</figure>]'
);
Expand All @@ -548,7 +549,7 @@ describe( 'ImageCaptionEditing', () => {
'<img src=""></img>' +
'<figcaption aria-label="Caption for the image" ' +
'class="ck-editor__editable ck-editor__nested-editable ck-placeholder" ' +
'contenteditable="true" data-placeholder="Enter image caption" role="textbox">' +
'contenteditable="true" data-placeholder="Enter image caption" role="textbox" tabindex="-1">' +
'</figcaption>' +
'</figure>'
);
Expand All @@ -565,7 +566,7 @@ describe( 'ImageCaptionEditing', () => {
'<img src=""></img>' +
'<figcaption aria-label="Caption for the image" ' +
'class="ck-editor__editable ck-editor__nested-editable ck-placeholder" ' +
'contenteditable="true" data-placeholder="Enter image caption" role="textbox">' +
'contenteditable="true" data-placeholder="Enter image caption" role="textbox" tabindex="-1">' +
'</figcaption>' +
'</figure>]'
);
Expand All @@ -585,7 +586,7 @@ describe( 'ImageCaptionEditing', () => {
'<img src=""></img>' +
'<figcaption aria-label="Caption for the image" ' +
'class="ck-editor__editable ck-editor__nested-editable ck-editor__nested-editable_focused ck-placeholder" ' +
'contenteditable="true" data-placeholder="Enter image caption" role="textbox">[]' +
'contenteditable="true" data-placeholder="Enter image caption" role="textbox" tabindex="-1">[]' +
'</figcaption>' +
'</figure>'
);
Expand All @@ -599,7 +600,7 @@ describe( 'ImageCaptionEditing', () => {
'[<figure class="ck-widget image" contenteditable="false">' +
'<img src=""></img>' +
'<figcaption aria-label="Caption for the image" class="ck-editor__editable ck-editor__nested-editable" ' +
'contenteditable="true" data-placeholder="Enter image caption" role="textbox">foo bar</figcaption>' +
'contenteditable="true" data-placeholder="Enter image caption" role="textbox" tabindex="-1">foo bar</figcaption>' +
'</figure>]'
);
} );
Expand All @@ -617,7 +618,7 @@ describe( 'ImageCaptionEditing', () => {
'<img src=""></img>' +
'<figcaption aria-label="Caption for the image" ' +
'class="ck-editor__editable ck-editor__nested-editable ck-placeholder" ' +
'contenteditable="true" data-placeholder="Enter image caption" role="textbox">' +
'contenteditable="true" data-placeholder="Enter image caption" role="textbox" tabindex="-1">' +
'</figcaption>' +
'</figure>'
);
Expand All @@ -635,7 +636,7 @@ describe( 'ImageCaptionEditing', () => {
'<img src=""></img>' +
'<figcaption aria-label="Caption for the image" ' +
'class="ck-editor__editable ck-editor__nested-editable ck-placeholder" ' +
'contenteditable="true" data-placeholder="Enter image caption" role="textbox">' +
'contenteditable="true" data-placeholder="Enter image caption" role="textbox" tabindex="-1">' +
'[]' +
'</figcaption>' +
'</figure>'
Expand All @@ -656,7 +657,7 @@ describe( 'ImageCaptionEditing', () => {
'<img src=""></img>' +
'<figcaption aria-label="Caption for the image" ' +
'class="ck-editor__editable ck-editor__nested-editable ck-placeholder" ' +
'contenteditable="true" data-placeholder="Enter image caption" role="textbox"></figcaption>' +
'contenteditable="true" data-placeholder="Enter image caption" role="textbox" tabindex="-1"></figcaption>' +
'</figure>]'
);
} );
Expand All @@ -675,13 +676,13 @@ describe( 'ImageCaptionEditing', () => {
'<figure class="ck-widget image" contenteditable="false">' +
'<img src=""></img>' +
'<figcaption aria-label="Caption for the image" class="ck-editor__editable ck-editor__nested-editable" ' +
'contenteditable="true" data-placeholder="Enter image caption" role="textbox">foo bar</figcaption>' +
'contenteditable="true" data-placeholder="Enter image caption" role="textbox" tabindex="-1">foo bar</figcaption>' +
'</figure>' +
'[<figure class="ck-widget image" contenteditable="false">' +
'<img src=""></img>' +
'<figcaption aria-label="Caption for the image" ' +
'class="ck-editor__editable ck-editor__nested-editable ck-placeholder" ' +
'contenteditable="true" data-placeholder="Enter image caption" role="textbox"></figcaption>' +
'contenteditable="true" data-placeholder="Enter image caption" role="textbox" tabindex="-1"></figcaption>' +
'</figure>]'
);
} );
Expand All @@ -696,7 +697,7 @@ describe( 'ImageCaptionEditing', () => {
'<img src="img.png"></img>' +
'<figcaption aria-label="Caption for the image" ' +
'class="ck-editor__editable ck-editor__nested-editable ck-placeholder" ' +
'contenteditable="false" data-placeholder="Enter image caption" role="textbox"></figcaption>' +
'contenteditable="false" data-placeholder="Enter image caption" role="textbox" tabindex="-1"></figcaption>' +
'</figure>]'
);
} );
Expand All @@ -722,7 +723,7 @@ describe( 'ImageCaptionEditing', () => {
'<img src=""></img>' +
'<figcaption aria-label="Caption for the image" ' +
'class="ck-editor__editable ck-editor__nested-editable ck-placeholder" ' +
'contenteditable="true" data-placeholder="Enter image caption" role="textbox">' +
'contenteditable="true" data-placeholder="Enter image caption" role="textbox" tabindex="-1">' +
'</figcaption>' +
'</figure>'
);
Expand All @@ -735,7 +736,7 @@ describe( 'ImageCaptionEditing', () => {
'<figure class="ck-widget image" contenteditable="false">' +
'<img src=""></img>' +
'<figcaption aria-label="Caption for the image" class="ck-editor__editable ck-editor__nested-editable" ' +
'contenteditable="true" data-placeholder="Enter image caption" role="textbox">' +
'contenteditable="true" data-placeholder="Enter image caption" role="textbox" tabindex="-1">' +
'{foo bar baz}' +
'</figcaption>' +
'</figure>'
Expand Down
15 changes: 10 additions & 5 deletions packages/ckeditor5-image/tests/pictureediting.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1049,7 +1049,8 @@ describe( 'PictureEditing', () => {
'class="ck-editor__editable ck-editor__nested-editable" ' +
'contenteditable="true" ' +
'data-placeholder="Enter image caption" ' +
'role="textbox"' +
'role="textbox" ' +
'tabindex="-1"' +
'>' +
'Caption' +
'</figcaption>' +
Expand Down Expand Up @@ -1221,7 +1222,8 @@ describe( 'PictureEditing', () => {
'class="ck-editor__editable ck-editor__nested-editable" ' +
'contenteditable="true" ' +
'data-placeholder="Enter image caption" ' +
'role="textbox"' +
'role="textbox" ' +
'tabindex="-1"' +
'>' +
'Text of the caption' +
'</figcaption>' +
Expand Down Expand Up @@ -1385,7 +1387,8 @@ describe( 'PictureEditing', () => {
'class="ck-editor__editable ck-editor__nested-editable" ' +
'contenteditable="true" ' +
'data-placeholder="Enter image caption" ' +
'role="textbox"' +
'role="textbox" ' +
'tabindex="-1"' +
'>' +
'Caption' +
'</figcaption>' +
Expand Down Expand Up @@ -1431,7 +1434,8 @@ describe( 'PictureEditing', () => {
'class="ck-editor__editable ck-editor__nested-editable" ' +
'contenteditable="true" ' +
'data-placeholder="Enter image caption" ' +
'role="textbox"' +
'role="textbox" ' +
'tabindex="-1"' +
'>' +
'Text of the caption' +
'</figcaption>' +
Expand Down Expand Up @@ -1473,7 +1477,8 @@ describe( 'PictureEditing', () => {
'class="ck-editor__editable ck-editor__nested-editable" ' +
'contenteditable="true" ' +
'data-placeholder="Enter image caption" ' +
'role="textbox"' +
'role="textbox" ' +
'tabindex="-1"' +
'>' +
'Text of the caption' +
'</figcaption>' +
Expand Down
2 changes: 1 addition & 1 deletion packages/ckeditor5-link/tests/linkimageediting.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -520,7 +520,7 @@ describe( 'LinkImageEditing', () => {
'</a>' +
'<figcaption aria-label="Caption for image: alt text" ' +
'class="ck-editor__editable ck-editor__nested-editable" ' +
'contenteditable="true" data-placeholder="Enter image caption" role="textbox">' +
'contenteditable="true" data-placeholder="Enter image caption" role="textbox" tabindex="-1">' +
'Foo Bar.' +
'</figcaption>' +
'</figure>'
Expand Down
2 changes: 1 addition & 1 deletion packages/ckeditor5-list/tests/todolist/todolistediting.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -594,7 +594,7 @@ describe( 'TodoListEditing', () => {
'<tbody>' +
'<tr>' +
'<td class="ck-editor__editable ck-editor__nested-editable" ' +
'contenteditable="true" role="textbox">' +
'contenteditable="true" role="textbox" tabindex="-1">' +
'<span class="ck-table-bogus-paragraph">foo</span>' +
'</td>' +
'</tr>' +
Expand Down
4 changes: 4 additions & 0 deletions packages/ckeditor5-restricted-editing/tests/manual/restrictedediting.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -39,3 +39,7 @@ <h2>Heading 1</h2>
<p>Quote</p>
</blockquote>
</div>

<div style="margin-top: 10px">
<button>Focusable element</button>
</div>
3 changes: 2 additions & 1 deletion packages/ckeditor5-restricted-editing/tests/restrictededitingmodeediting.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -322,7 +322,8 @@ 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" role="textbox" ' +
'tabindex="-1">' +
'<span class="ck-table-bogus-paragraph"><span class="restricted-editing-exception"><b>foo bar baz</b></span></span>' +
'</td></tr></tbody></table>' +
'</figure>'
Expand Down
1 change: 1 addition & 0 deletions packages/ckeditor5-table/tests/_utils/utils.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -380,6 +380,7 @@ function makeRows( tableData, options ) {
attributes.class = getClassToSet( attributes );
attributes.contenteditable = 'true';
attributes.role = 'textbox';
attributes.tabindex = '-1';
}

if ( isObject ) {
Expand Down
Loading

0 comments on commit e55c6c1

Please sign in to comment.