瀏覽代碼

Merge pull request #302 from ckeditor/t/ckeditor5/1404

Other: The image widget toolbar should have a proper `aria-label` attribute (see ckeditor/ckeditor5#1404).
Aleksander Nowodzinski 6 年之前
父節點
當前提交
564352eaac

+ 2 - 1
packages/ckeditor5-image/lang/contexts.json

@@ -9,5 +9,6 @@
 	"Text alternative": "Label for the image text alternative input.",
 	"Enter image caption": "Placeholder text for image caption displayed when caption is empty.",
 	"Insert image": "Label for the insert image toolbar button.",
-	"Upload failed": "Title of the notification displayed when upload fails."
+	"Upload failed": "Title of the notification displayed when upload fails.",
+	"Image toolbar": "The label used by assistive technologies describing an image toolbar attached to an image widget."
 }

+ 2 - 0
packages/ckeditor5-image/src/imagetoolbar.js

@@ -44,9 +44,11 @@ export default class ImageToolbar extends Plugin {
 	 */
 	afterInit() {
 		const editor = this.editor;
+		const t = editor.t;
 		const widgetToolbarRepository = editor.plugins.get( WidgetToolbarRepository );
 
 		widgetToolbarRepository.register( 'image', {
+			ariaLabel: t( 'Image toolbar' ),
 			items: editor.config.get( 'image.toolbar' ) || [],
 			getRelatedElement: getSelectedImageWidget,
 		} );

+ 8 - 0
packages/ckeditor5-image/tests/imagetoolbar.js

@@ -89,6 +89,14 @@ describe( 'ImageToolbar', () => {
 				balloonClassName: 'ck-toolbar-container'
 			} );
 		} );
+
+		it( 'should set aria-label attribute', () => {
+			toolbar.render();
+
+			expect( toolbar.element.getAttribute( 'aria-label' ) ).to.equal( 'Image toolbar' );
+
+			toolbar.destroy();
+		} );
 	} );
 
 	describe( 'integration with the editor focus', () => {