Ver código fonte

Other: Made the text highlight toolbar more accessible by providing an aria-label (see ckeditor/ckeditor5#1404).

Aleksander Nowodzinski 6 anos atrás
pai
commit
0ef34055e6

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

@@ -6,5 +6,6 @@
 	"Red pen": "Toolbar button tooltip for applying red pen (text color).",
 	"Green pen": "Toolbar button tooltip for applying green pen (text color).",
 	"Remove highlight": "Toolbar button tooltip for removing text highlight.",
-	"Highlight": "Toolbar button tooltip for the text highlight feature."
+	"Highlight": "Toolbar button tooltip for the text highlight feature.",
+	"Text highlight toolbar": "Label describing the highlight feature toolbar used by assistive technologies."
 }

+ 2 - 0
packages/ckeditor5-highlight/src/highlightui.js

@@ -223,6 +223,8 @@ export default class HighlightUI extends Plugin {
 			addToolbarToDropdown( dropdownView, buttons );
 			bindToolbarIconStyleToActiveColor( dropdownView );
 
+			dropdownView.toolbarView.ariaLabel = t( 'Text highlight toolbar' );
+
 			// Execute current action from dropdown's split button action button.
 			splitButtonView.on( 'execute', () => {
 				editor.execute( 'highlight', { value: splitButtonView.commandValue } );

+ 6 - 0
packages/ckeditor5-highlight/tests/highlightui.js

@@ -83,6 +83,12 @@ describe( 'HighlightUI', () => {
 			expect( button ).to.have.property( 'isToggleable', true );
 		} );
 
+		it( 'toolbar nas the basic properties', () => {
+			const toolbarView = dropdown.toolbarView;
+
+			expect( toolbarView ).to.have.property( 'ariaLabel', 'Text highlight toolbar' );
+		} );
+
 		it( 'should have proper icons in dropdown', () => {
 			const toolbar = dropdown.toolbarView;