8
0
Просмотр исходного кода

Basic accessibility in BoxedEditorUIView, EditableUI and EditableUIView.

Aleksander Nowodzinski 9 лет назад
Родитель
Сommit
24bd2e3158

+ 24 - 3
packages/ckeditor5-ui/src/boxededitorui/boxededitoruiview.js

@@ -6,29 +6,50 @@
 'use strict';
 
 import EditorUIView from '/ckeditor5/ui/editorui/editoruiview.js';
+import utils from '/ckeditor5/utils/utils.js';
 
 export default class BoxedEditorUIView extends EditorUIView {
 	constructor( model, locale ) {
 		super( model, locale );
 
+		const t = this.t;
+		const ariaLabelUid = utils.uid();
+
 		this.template = {
 			tag: 'div',
 
 			attributes: {
-				class: 'ck-reset ck-editor'
+				class: 'ck-reset ck-editor',
+				role: 'application',
+				dir: 'ltr',
+				lang: locale.lang,
+				'aria-labelledby': `cke-editor__ariaLabel_${ ariaLabelUid }`
 			},
 
 			children: [
+				{
+					tag: 'span',
+					attributes: {
+						id: `cke-editor__ariaLabel_${ ariaLabelUid }`,
+						class: 'cke-voice-label',
+						children: [
+							// TODO: Editor name?
+							t( 'Rich Text Editor' )
+						]
+					}
+				},
 				{
 					tag: 'div',
 					attributes: {
-						class: 'ck-editor-top ck-reset-all'
+						class: 'ck-editor-top ck-reset-all',
+						role: 'presentation'
 					}
 				},
 				{
 					tag: 'div',
 					attributes: {
-						class: 'ck-editor-main'
+						class: 'ck-editor-main',
+						role: 'presentation'
 					}
 				}
 			]

+ 1 - 0
packages/ckeditor5-ui/src/editableui/editableui.js

@@ -38,5 +38,6 @@ export default class EditableUI extends Controller {
 		 */
 		this.viewModel = new Model();
 		this.viewModel.bind( 'isEditable', 'isFocused' ).to( editableModel );
+		this.viewModel.set( 'editableName', editableModel.name );
 	}
 }

+ 7 - 0
packages/ckeditor5-ui/src/editableui/editableuiview.js

@@ -38,6 +38,7 @@ export default class EditableUIView extends View {
 	 */
 	setEditableElement( editableElement, def = { attributes: {} } ) {
 		const bind = this.attributeBinder;
+		const t = this.t;
 
 		if ( this.editableElement ) {
 			throw new CKEditorError(
@@ -51,6 +52,12 @@ export default class EditableUIView extends View {
 			def.attributes.class = [];
 		}
 
+		Object.assign( def.attributes, {
+			role: 'textbox',
+			'aria-label': t( 'Rich Text Editor, %0', [ this.model.editableName ] ),
+			title: t( 'Rich Text Editor, %0', [ this.model.editableName ] ),
+		} );
+
 		def.attributes.class.push(
 			'ck-editor__editable',
 			bind.to( 'isFocused', value => value ? 'ck-focused' : 'ck-blurred' )