Преглед изворни кода

Create static aria label, fix tests.

Mateusz Samsel пре 6 година
родитељ
комит
9f81fd50d0

+ 0 - 2
packages/ckeditor5-ui/src/toolbar/balloon/balloontoolbar.js

@@ -138,8 +138,6 @@ export default class BalloonToolbar extends Plugin {
 		const factory = this.editor.ui.componentFactory;
 
 		this.toolbarView.fillFromConfig( config.items, factory );
-
-		this.toolbarView.label = this.editor.t( config.label );
 	}
 
 	/**

+ 3 - 8
packages/ckeditor5-ui/src/toolbar/normalizetoolbarconfig.js

@@ -29,24 +29,19 @@
  * @returns {Object} A normalized toolbar config object.
  */
 export default function normalizeToolbarConfig( config ) {
-	const defaultLabel = 'Editor\'s toolbar';
-
 	if ( Array.isArray( config ) ) {
 		return {
-			items: config,
-			label: defaultLabel
+			items: config
 		};
 	}
 
 	if ( !config ) {
 		return {
-			items: [],
-			label: defaultLabel
+			items: []
 		};
 	}
 
 	return Object.assign( {
-		items: [],
-		label: defaultLabel
+		items: []
 	}, config );
 }

+ 14 - 57
packages/ckeditor5-ui/src/toolbar/toolbarview.js

@@ -14,7 +14,6 @@ import KeystrokeHandler from '@ckeditor/ckeditor5-utils/src/keystrokehandler';
 import ToolbarSeparatorView from './toolbarseparatorview';
 import preventDefault from '../bindings/preventdefault.js';
 import log from '@ckeditor/ckeditor5-utils/src/log';
-import uid from '@ckeditor/ckeditor5-utils/src/uid';
 
 import '../../theme/components/toolbar/toolbar.css';
 
@@ -26,13 +25,23 @@ import '../../theme/components/toolbar/toolbar.css';
  */
 export default class ToolbarView extends View {
 	/**
-	 * @inheritDoc
+	 * Creates an instance of the {@link module:ui/view~View} class.
+	 *
+	 * Also see {@link #render}.
+	 *
+	 * @param {module:utils/locale~Locale} locale The localization services instance.
+	 * @param {Object} [config]
+	 * @param {String} [config.ariaLabel] Custom label value for assistive technologies
 	 */
-	constructor( locale ) {
+	constructor( locale, { ariaLabel } = {} ) {
 		super( locale );
 
 		const bind = this.bindTemplate;
-		const ariaLabelUid = uid();
+		const t = this.t;
+
+		if ( ariaLabel === undefined ) {
+			ariaLabel = t( 'Editor\'s toolbar' );
+		}
 
 		/**
 		 * Collection of the toolbar items (like buttons).
@@ -74,22 +83,6 @@ export default class ToolbarView extends View {
 		 */
 		this.set( 'class' );
 
-		/**
-		 * The label of the toolbar.
-		 *
-		 * @observable
-		 * @member {String} #label
-		 */
-		this.set( 'label' );
-
-		/**
-		 * Label of the toolbar view. It is configurable using the {@link #label label attribute}.
-		 *
-		 * @readonly
-		 * @member {module:ui/view~View} #labelView
-		 */
-		this.labelView = this._createLabelView( ariaLabelUid );
-
 		/**
 		 * Helps cycling over focusable {@link #items} in the toolbar.
 		 *
@@ -120,7 +113,7 @@ export default class ToolbarView extends View {
 					bind.to( 'class' )
 				],
 				role: 'toolbar',
-				'aria-labelledby': `ck-editor__aria-label_${ ariaLabelUid }`
+				'aria-label': ariaLabel
 			},
 
 			children: this.items,
@@ -130,9 +123,6 @@ export default class ToolbarView extends View {
 				mousedown: preventDefault( this )
 			}
 		} );
-
-		// Add label in a way to not be present in this.items.
-		this.registerChild( this.labelView );
 	}
 
 	/**
@@ -154,8 +144,6 @@ export default class ToolbarView extends View {
 			this.focusTracker.remove( item.element );
 		} );
 
-		this.element.appendChild( this.labelView.element );
-
 		// Start listening for the keystrokes coming from #element.
 		this.keystrokes.listenTo( this.element );
 	}
@@ -212,36 +200,5 @@ export default class ToolbarView extends View {
 			}
 		} );
 	}
-
-	/**
-	 * Creates a label view instance and binds it with toolbar attributes.
-	 *
-	 * @private
-	 * @param {String} ariaLabelUid The aria label UID.
-	 * @returns {module:ui/view~View}
-	 */
-	_createLabelView( ariaLabelUid ) {
-		const labelView = new View();
-
-		labelView.setTemplate( {
-			tag: 'span',
-
-			attributes: {
-				class: [
-					'ck',
-					'ck-toolbar__label'
-				],
-				id: `ck-editor__aria-label_${ ariaLabelUid }`,
-			},
-
-			children: [
-				{
-					text: this.bindTemplate.to( 'label' )
-				}
-			]
-		} );
-
-		return labelView;
-	}
 }
 

+ 2 - 2
packages/ckeditor5-ui/tests/toolbar/enabletoolbarkeyboardfocus.js

@@ -19,7 +19,7 @@ describe( 'enableToolbarKeyboardFocus()', () => {
 		origin = viewCreator();
 		originFocusTracker = new FocusTracker();
 		originKeystrokeHandler = new KeystrokeHandler();
-		toolbar = new ToolbarView();
+		toolbar = new ToolbarView( { t: langString => langString } );
 
 		toolbar.render();
 
@@ -93,7 +93,7 @@ describe( 'enableToolbarKeyboardFocus()', () => {
 		origin = viewCreator();
 		originFocusTracker = new FocusTracker();
 		originKeystrokeHandler = new KeystrokeHandler();
-		toolbar = new ToolbarView();
+		toolbar = new ToolbarView( { t: langString => langString } );
 
 		const toolbarFocusSpy = sinon.spy( toolbar, 'focus' );
 		const originFocusSpy = origin.focus = sinon.spy();

+ 2 - 4
packages/ckeditor5-ui/tests/toolbar/normalizetoolbarconfig.js

@@ -17,8 +17,7 @@ describe( 'normalizeToolbarConfig()', () => {
 	it( 'passes through an already normalized config', () => {
 		const cfg = {
 			items: [ 'foo', 'bar' ],
-			foo: 'bar',
-			label: 'Foo'
+			foo: 'bar'
 		};
 		const normalized = normalizeToolbarConfig( cfg );
 
@@ -34,8 +33,7 @@ describe( 'normalizeToolbarConfig()', () => {
 
 		expect( normalized ).to.deep.equal( {
 			items: [],
-			foo: 'bar',
-			label: 'Editor\'s toolbar'
+			foo: 'bar'
 		} );
 		expect( normalized ).to.not.equal( cfg ); // Make sure we don't modify an existing obj.
 	} );

+ 23 - 24
packages/ckeditor5-ui/tests/toolbar/toolbarview.js

@@ -16,14 +16,28 @@ import ViewCollection from '../../src/viewcollection';
 import log from '@ckeditor/ckeditor5-utils/src/log';
 import View from '../../src/view';
 import testUtils from '@ckeditor/ckeditor5-core/tests/_utils/utils';
+import { add as addTranslations, _clear as clearTranslations } from '@ckeditor/ckeditor5-utils/src/translation-service';
+import Locale from '@ckeditor/ckeditor5-utils/src/locale';
 
 describe( 'ToolbarView', () => {
 	let locale, view;
 
 	testUtils.createSinonSandbox();
 
+	before( () => {
+		addTranslations( 'pl', {
+			'Editor\'s toolbar': 'Pasek narzędzi edytora'
+		} );
+		addTranslations( 'en', {
+			'Editor\'s toolbar': 'Editor\'s toolbar'
+		} );
+	} );
+	after( () => {
+		clearTranslations();
+	} );
+
 	beforeEach( () => {
-		locale = {};
+		locale = new Locale( 'en' );
 		view = new ToolbarView( locale );
 		view.render();
 	} );
@@ -56,10 +70,6 @@ describe( 'ToolbarView', () => {
 		it( 'creates #_focusCycler instance', () => {
 			expect( view._focusCycler ).to.be.instanceOf( FocusCycler );
 		} );
-
-		it( 'sets #labelView', () => {
-			expect( view.labelView ).to.be.instanceOf( View );
-		} );
 	} );
 
 	describe( 'template', () => {
@@ -123,7 +133,7 @@ describe( 'ToolbarView', () => {
 		} );
 
 		it( 'starts listening for #keystrokes coming from #element', () => {
-			const view = new ToolbarView();
+			const view = new ToolbarView( new Locale( 'en' ) );
 			const spy = sinon.spy( view.keystrokes, 'listenTo' );
 
 			view.render();
@@ -327,30 +337,19 @@ describe( 'ToolbarView', () => {
 	} );
 
 	describe( 'aria', () => {
-		it( 'poses required attributes', () => {
+		it( 'should poses required attributes', () => {
 			expect( view.element.getAttribute( 'role' ) ).to.equal( 'toolbar' );
-			expect( view.element.getAttribute( 'aria-labelledby' ) ).to.equal( view.labelView.element.id )
-				.and.to.match( /^ck-editor__aria-label_[0-9a-f]{16}/ );
+			expect( view.element.getAttribute( 'aria-label' ) ).to.equal( 'Editor\'s toolbar' );
 		} );
 	} );
 
-	describe( '_createLabelView()', () => {
-		let labelElement;
+	describe( 'localization', () => {
+		it( 'should have translated aria label', () => {
+			const view = new ToolbarView( new Locale( 'pl' ) );
 
-		beforeEach( () => {
-			labelElement = view.labelView.element;
-		} );
-
-		it( 'label is attached as last element in toolbar', () => {
-			expect( labelElement ).to.equal( view.element.lastElementChild );
-		} );
-
-		it( 'label has proper attributes', () => {
-			view.label = 'Foo';
+			view.render();
 
-			expect( labelElement.innerHTML ).to.equal( 'Foo' );
-			expect( labelElement.classList.contains( 'ck' ) ).to.be.true;
-			expect( labelElement.classList.contains( 'ck-toolbar__label' ) ).to.be.true;
+			expect( view.element.getAttribute( 'aria-label' ) ).to.equal( 'Pasek narzędzi edytora' );
 		} );
 	} );
 } );