Browse Source

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

Other: The media widget toolbar should have a proper `aria-label` attribute (see ckeditor/ckeditor5#1404).
Aleksander Nowodzinski 6 years ago
parent
commit
a8fae1eb28

+ 2 - 1
packages/ckeditor5-media-embed/lang/contexts.json

@@ -5,5 +5,6 @@
 	"Tip: Paste the URL into the content to embed faster.": "The tip displayed next to the media URL input informing about an easier way of embedding.",
 	"The URL must not be empty.": "An error message that informs about an empty value in the URL input.",
 	"This media URL is not supported.": "An error message that informs about unsupported media URL.",
-	"Insert media": "Toolbar button tooltip for the Media Embed feature."
+	"Insert media": "Toolbar button tooltip for the Media Embed feature.",
+	"Media toolbar": "The label used by assistive technologies describing an image toolbar attached to an image widget."
 }

+ 2 - 0
packages/ckeditor5-media-embed/src/mediaembedtoolbar.js

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

+ 8 - 0
packages/ckeditor5-media-embed/tests/mediaembedtoolbar.js

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