Added tabindex="0" to editable element to make it focusable in read-only mode

package.json

@@ -18,6 +18,7 @@
     "@ckeditor/ckeditor5-block-quote": "^16.0.0",
     "@ckeditor/ckeditor5-editor-balloon": "^16.0.0",
     "@ckeditor/ckeditor5-editor-classic": "^16.0.0",
+    "@ckeditor/ckeditor5-editor-inline": "^16.0.0",
     "@ckeditor/ckeditor5-engine": "^16.0.0",
     "@ckeditor/ckeditor5-enter": "^16.0.0",
     "@ckeditor/ckeditor5-essentials": "^16.0.0",

src/editableui/editableuiview.js

@@ -29,6 +29,7 @@ export default class EditableUIView extends View {
 		this.setTemplate( {
 			tag: 'div',
 			attributes: {
+				tabindex: '0',
 				class: [
 					'ck',
 					'ck-content',

tests/editableui/editableuiview.js

@@ -56,6 +56,7 @@ describe( 'EditableUIView', () => {
 			expect( view.element.classList.contains( 'ck-rounded-corners' ) ).to.be.true;
 			expect( view.element.getAttribute( 'lang' ) ).to.equal( 'en' );
 			expect( view.element.getAttribute( 'dir' ) ).to.equal( 'ltr' );
+			expect( view.element.getAttribute( 'tabindex' ) ).to.equal( '0' );
 			expect( view._externalElement ).to.be.undefined;
 			expect( view.isRendered ).to.be.true;
 		} );

tests/manual/tickets/6200/1.html

@@ -0,0 +1,116 @@
+<button id="btn-readonly">Toggle read-only</button>
+
+<br><br>
+
+<input type="text" value="Focusable input"><br>
+<input type="text" value="Focusable input"><br>
+
+<h2>Classic editor</h2>
+<div id="editor-classic">
+	<h2>Appreciation of diversity</h2>
+	<figure class="image">
+		<img src="sample.jpg" alt="Sample image">
+	</figure>
+	<p>
+		Getting used to an entirely <a href="https://ckeditor.com">different culture can be challenging</a>. While it’s also nice to learn about
+		cultures online or from books, nothing comes close to experiencing cultural diversity in person.
+	</p>
+	<figure class="table">
+		<table>
+			<thead>
+				<tr>
+					<th>foo</th>
+					<th>bar</th>
+					<th>baz</th>
+				</tr>
+			</thead>
+			<tbody>
+				<tr>
+					<td>1</td>
+					<td>2</td>
+					<td>3</td>
+				</tr>
+			</tbody>
+		</table>
+	</figure>
+	<p>
+		You learn to appreciate each and every single one of the differences while you become more culturally fluid.
+	</p>
+</div>
+
+<input type="text" value="Focusable input"><br>
+<input type="text" value="Focusable input"><br>
+
+<h2>Inline editor</h2>
+<div id="editor-inline">
+	<h2>Appreciation of diversity</h2>
+	<figure class="image">
+		<img src="sample.jpg" alt="Sample image">
+	</figure>
+	<p>
+		Getting used to an entirely <a href="https://ckeditor.com">different culture can be challenging</a>. While it’s also nice to learn about
+		cultures online or from books, nothing comes close to experiencing cultural diversity in person.
+	</p>
+	<figure class="table">
+		<table>
+			<thead>
+				<tr>
+					<th>foo</th>
+					<th>bar</th>
+					<th>baz</th>
+				</tr>
+			</thead>
+			<tbody>
+				<tr>
+					<td>1</td>
+					<td>2</td>
+					<td>3</td>
+				</tr>
+			</tbody>
+		</table>
+	</figure>
+	<p>
+		You learn to appreciate each and every single one of the differences while you become more culturally fluid.
+	</p>
+</div>
+
+<input type="text" value="Focusable input"><br>
+<input type="text" value="Focusable input"><br>
+
+<h2>Balloon editor</h2>
+<div id="editor-balloon">
+	<h2>Appreciation of diversity</h2>
+	<figure class="image">
+		<img src="sample.jpg" alt="Sample image">
+	</figure>
+	<p>
+		Getting used to an entirely <a href="https://ckeditor.com">different culture can be challenging</a>. While it’s also nice to learn about
+		cultures online or from books, nothing comes close to experiencing cultural diversity in person.
+	</p>
+	<figure class="table">
+		<table>
+			<thead>
+				<tr>
+					<th>foo</th>
+					<th>bar</th>
+					<th>baz</th>
+				</tr>
+			</thead>
+			<tbody>
+				<tr>
+					<td>1</td>
+					<td>2</td>
+					<td>3</td>
+				</tr>
+			</tbody>
+		</table>
+	</figure>
+	<p>
+		You learn to appreciate each and every single one of the differences while you become more culturally fluid.
+	</p>
+</div>
+
+<br><br>
+
+<input type="text" value="Focusable input"><br>
+<input type="text" value="Focusable input">

tests/manual/tickets/6200/1.js

@@ -0,0 +1,74 @@
+/**
+ * @license Copyright (c) 2003-2020, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+ */
+
+/* globals window, document, console:false */
+
+import ClassicEditor from '@ckeditor/ckeditor5-editor-classic/src/classiceditor';
+import InlineEditor from '@ckeditor/ckeditor5-editor-inline/src/inlineeditor';
+import BalloonEditor from '@ckeditor/ckeditor5-editor-balloon/src/ballooneditor';
+import ArticlePluginSet from '@ckeditor/ckeditor5-core/tests/_utils/articlepluginset';
+
+const EDITOR_CONFIG = {
+	plugins: [ ArticlePluginSet ],
+	toolbar: [
+		'heading',
+		'|',
+		'bold',
+		'italic',
+		'link',
+		'|',
+		'bulletedList',
+		'numberedList',
+		'blockQuote',
+		'insertTable',
+		'mediaEmbed',
+		'|',
+		'undo',
+		'redo'
+	],
+	image: {
+		toolbar: [ 'imageStyle:full', 'imageStyle:side', '|', 'imageTextAlternative' ]
+	},
+	table: {
+		contentToolbar: [
+			'tableColumn',
+			'tableRow',
+			'mergeTableCells'
+		]
+	}
+};
+
+ClassicEditor
+	.create( document.querySelector( '#editor-classic' ), EDITOR_CONFIG )
+	.then( editor => {
+		window.classicEditor = editor;
+	} )
+	.catch( err => {
+		console.error( err.stack );
+	} );
+
+InlineEditor
+	.create( document.querySelector( '#editor-inline' ), EDITOR_CONFIG )
+	.then( editor => {
+		window.inlineEditor = editor;
+	} )
+	.catch( err => {
+		console.error( err.stack );
+	} );
+
+BalloonEditor
+	.create( document.querySelector( '#editor-balloon' ), EDITOR_CONFIG )
+	.then( editor => {
+		window.balloonEditor = editor;
+	} )
+	.catch( err => {
+		console.error( err.stack );
+	} );
+
+document.querySelector( '#btn-readonly' ).addEventListener( 'click', () => {
+	window.classicEditor.isReadOnly = !window.classicEditor.isReadOnly;
+	window.inlineEditor.isReadOnly = !window.inlineEditor.isReadOnly;
+	window.balloonEditor.isReadOnly = !window.balloonEditor.isReadOnly;
+} );

tests/manual/tickets/6200/1.md

@@ -0,0 +1,6 @@
+## `tabindex="0"` for editable element [#6200](https://github.com/ckeditor/ckeditor5/issues/6200)
+
+Check if the editor behaves correctly when it comes to:
+
+- focusing order (<kbd>Tab</kbd> and <kbd>Shift + Tab</kbd>),
+- focusing editor in read-only mode and editor features.