@ckeditor/ckeditor5-ui - npm Package Compare versions

Comparing version 34.2.0 to 35.0.0

lang/contexts.json

 {
-	"Rich Text Editor, %0": "Title of the CKEditor5 editor.",
 	"Rich Text Editor": "Title of the CKEditor5 editor.",
+	"Editor editing area: %0": "Accessible label of the specific editing area belonging to a container with an ARIA application role.",
 	"Edit block": "Label of the block toolbar icon (a block toolbar is displayed next to each paragraph, heading, list item, etc. and contains e.g. block formatting options)",
@@ -5,0 +5,0 @@ "Next": "Label for a button showing the next thing (tab, page, etc.).",

LICENSE.md

@@ -14,2 +14,6 @@ Software License Agreement
 
+The following libraries are included in CKEditor under the [MIT license](https://opensource.org/licenses/MIT):
+
+* lodash - Copyright (c) JS Foundation and other contributors https://js.foundation/. Based on Underscore.js, copyright Jeremy Ashkenas, DocumentCloud and Investigative Reporters & Editors http://underscorejs.org/.
+
 Trademarks
@@ -16,0 +20,0 @@ ----------

package.json

 {
   "name": "@ckeditor/ckeditor5-ui",
-  "version": "34.2.0",
+  "version": "35.0.0",
   "description": "The UI framework and standard UI library of CKEditor 5.",
@@ -14,23 +14,23 @@ "keywords": [
   "dependencies": {
-    "@ckeditor/ckeditor5-utils": "^34.2.0",
-    "@ckeditor/ckeditor5-core": "^34.2.0",
+    "@ckeditor/ckeditor5-utils": "^35.0.0",
+    "@ckeditor/ckeditor5-core": "^35.0.0",
     "lodash-es": "^4.17.15"
   },
   "devDependencies": {
-    "@ckeditor/ckeditor5-basic-styles": "^34.2.0",
-    "@ckeditor/ckeditor5-block-quote": "^34.2.0",
-    "@ckeditor/ckeditor5-editor-balloon": "^34.2.0",
-    "@ckeditor/ckeditor5-editor-classic": "^34.2.0",
-    "@ckeditor/ckeditor5-engine": "^34.2.0",
-    "@ckeditor/ckeditor5-enter": "^34.2.0",
-    "@ckeditor/ckeditor5-essentials": "^34.2.0",
-    "@ckeditor/ckeditor5-heading": "^34.2.0",
-    "@ckeditor/ckeditor5-image": "^34.2.0",
-    "@ckeditor/ckeditor5-link": "^34.2.0",
-    "@ckeditor/ckeditor5-list": "^34.2.0",
-    "@ckeditor/ckeditor5-mention": "^34.2.0",
-    "@ckeditor/ckeditor5-paragraph": "^34.2.0",
-    "@ckeditor/ckeditor5-horizontal-line": "^34.2.0",
-    "@ckeditor/ckeditor5-table": "^34.2.0",
-    "@ckeditor/ckeditor5-typing": "^34.2.0"
+    "@ckeditor/ckeditor5-basic-styles": "^35.0.0",
+    "@ckeditor/ckeditor5-block-quote": "^35.0.0",
+    "@ckeditor/ckeditor5-editor-balloon": "^35.0.0",
+    "@ckeditor/ckeditor5-editor-classic": "^35.0.0",
+    "@ckeditor/ckeditor5-engine": "^35.0.0",
+    "@ckeditor/ckeditor5-enter": "^35.0.0",
+    "@ckeditor/ckeditor5-essentials": "^35.0.0",
+    "@ckeditor/ckeditor5-heading": "^35.0.0",
+    "@ckeditor/ckeditor5-image": "^35.0.0",
+    "@ckeditor/ckeditor5-link": "^35.0.0",
+    "@ckeditor/ckeditor5-list": "^35.0.0",
+    "@ckeditor/ckeditor5-mention": "^35.0.0",
+    "@ckeditor/ckeditor5-paragraph": "^35.0.0",
+    "@ckeditor/ckeditor5-horizontal-line": "^35.0.0",
+    "@ckeditor/ckeditor5-table": "^35.0.0",
+    "@ckeditor/ckeditor5-typing": "^35.0.0"
   },
@@ -54,4 +54,5 @@ "engines": {
     "theme",
-    "ckeditor5-metadata.json"
+    "ckeditor5-metadata.json",
+    "CHANGELOG.md"
   ]
 }

src/button/buttonview.js

@@ -16,2 +16,3 @@ /**
 import { getEnvKeystrokeText } from '@ckeditor/ckeditor5-utils/src/keyboard';
+import env from '@ckeditor/ckeditor5-utils/src/env';
 
@@ -131,3 +132,3 @@ import '../../theme/components/button/button.css';
 
-		this.setTemplate( {
+		const template = {
 			tag: 'button',
@@ -150,3 +151,3 @@
 				'aria-disabled': bind.if( 'isEnabled', true, value => !value ),
-				'aria-pressed': bind.to( 'isOn', value => this.isToggleable ? String( value ) : false )
+				'aria-pressed': bind.to( 'isOn', value => this.isToggleable ? String( !!value ) : false )
 			},
@@ -157,6 +158,2 @@
 			on: {
-				mousedown: bind.to( evt => {
-					evt.preventDefault();
-				} ),
-
 				click: bind.to( evt => {
@@ -174,3 +171,14 @@ // We can't make the button disabled using the disabled attribute, because it won't be focusable.
 			}
-		} );
+		};
+
+		// On Safari we have to force the focus on a button on click as it's the only browser
+		// that doesn't do that automatically. See #12115.
+		if ( env.isSafari ) {
+			template.on.mousedown = bind.to( evt => {
+				this.focus();
+				evt.preventDefault();
+			} );
+		}
+
+		this.setTemplate( template );
 	}
@@ -177,0 +185,0 @@

src/dropdown/dropdownpanelview.js

@@ -11,2 +11,3 @@ /**
 import View from '../view';
+import { logWarning } from '@ckeditor/ckeditor5-utils/src/ckeditorerror';
 
@@ -85,3 +86,3 @@ /**
 	/**
-	 * Focuses the view element or first item in view collection on opening dropdown's panel.
+	 * Focuses the first view in the {@link #children} collection.
 	 *
@@ -92,3 +93,22 @@ * See also {@link module:ui/dropdown/dropdownpanelfocusable~DropdownPanelFocusable}.
 		if ( this.children.length ) {
-			this.children.first.focus();
+			if ( typeof this.children.first.focus === 'function' ) {
+				this.children.first.focus();
+			} else {
+				/**
+				 * The child view of a dropdown could not be focused because it is missing the `focus()` method.
+				 *
+				 * This warning appears when a dropdown {@link module:ui/dropdown/dropdownview~DropdownView#isOpen gets open} and it
+				 * attempts to focus the {@link module:ui/dropdown/dropdownpanelview~DropdownPanelView#children first child} of its panel
+				 * but the child does not implement the
+				 * {@link module:ui/dropdown/dropdownpanelfocusable~DropdownPanelFocusable focusable interface}.
+				 *
+				 * Focusing the content of a dropdown on open greatly improves the accessibility. Please make sure the view instance
+				 * provides the `focus()` method for the best user experience.
+				 *
+				 * @error ui-dropdown-panel-focus-child-missing-focus
+				 * @param {module:ui/view~View} childView
+				 * @param {module:ui/dropdown/dropdownpanelview~DropdownPanelView} dropdownPanel
+				 */
+				logWarning( 'ui-dropdown-panel-focus-child-missing-focus', { childView: this.children.first, dropdownPanel: this } );
+			}
 		}
@@ -95,0 +115,0 @@ }

src/dropdown/dropdownview.js

@@ -109,2 +109,6 @@ /**
 		 *
+		 * **Note**: When the dropdown gets open, it will attempt to call `focus()` on the first child of its {@link #panelView}.
+		 * See {@link module:ui/dropdown/utils~addToolbarToDropdown}, {@link module:ui/dropdown/utils~addListToDropdown}, and
+		 * {@link module:ui/dropdown/utils~focusChildOnDropdownOpen} to learn more about focus management in dropdowns.
+		 *
 		 * @observable
@@ -252,2 +256,5 @@ * @member {Boolean} #isOpen
 			if ( !this.isOpen ) {
+				// If the dropdown was closed, move the focus back to the button (#12125).
+				this.focus();
+
 				return;
@@ -268,2 +275,5 @@ }
 			}
+
+			// Focus the first item in the dropdown when the dropdown opened
+			this.panelView.focus();
 		} );
@@ -276,3 +286,2 @@
 			if ( this.isOpen ) {
-				this.buttonView.focus();
 				this.isOpen = false;
@@ -279,0 +288,0 @@ cancel();

src/dropdown/utils.js

@@ -22,2 +22,4 @@ /**
 
+import { logWarning } from '@ckeditor/ckeditor5-utils/src/ckeditorerror';
+
 import '../../theme/components/dropdown/toolbardropdown.css';
@@ -127,2 +129,5 @@ import '../../theme/components/dropdown/listdropdown.css';
  *
+ * **Note:** To improve the accessibility, you can tell the dropdown to focus the first active button of the toolbar when the dropdown
+ * {@link module:ui/dropdown/dropdownview~DropdownView#isOpen gets open}. See the documentation of `options` to learn more.
+ *
  * See {@link module:ui/dropdown/utils~createDropdown} and {@link module:ui/toolbar/toolbarview~ToolbarView}.
@@ -132,4 +137,11 @@ *
  * @param {Iterable.<module:ui/button/buttonview~ButtonView>} buttons
+ * @param {Object} [options]
+ * @param {Boolean} [options.enableActiveItemFocusOnDropdownOpen=false] When set `true`, the focus will automatically move to the first
+ * active {@link module:ui/toolbar/toolbarview~ToolbarView#items item} of the toolbar upon
+ * {@link module:ui/dropdown/dropdownview~DropdownView#isOpen opening} the dropdown. Active items are those with the `isOn` property set
+ * `true` (for instance {@link module:ui/button/buttonview~ButtonView buttons}). If no active items is found, the toolbar will be focused
+ * as a whole resulting in the focus moving to its first focusable item (default behavior of
+ * {@link module:ui/dropdown/dropdownview~DropdownView}).
  */
-export function addToolbarToDropdown( dropdownView, buttons ) {
+export function addToolbarToDropdown( dropdownView, buttons, options = {} ) {
 	const locale = dropdownView.locale;
@@ -149,2 +161,7 @@ const t = locale.t;
 
+	if ( options.enableActiveItemFocusOnDropdownOpen ) {
+		// Accessibility: Focus the first active button in the toolbar when the dropdown gets open.
+		focusChildOnDropdownOpen( dropdownView, () => toolbarView.items.find( item => item.isOn ) );
+	}
+
 	dropdownView.panelView.children.add( toolbarView );
@@ -189,2 +206,5 @@ toolbarView.items.delegate( 'execute' ).to( dropdownView );
  *
+ * **Note:** To improve the accessibility, when a list is added to the dropdown using this helper the dropdown will automatically attempt
+ * to focus the first active item (a host to a {@link module:ui/button/buttonview~ButtonView} with
+ * {@link module:ui/button/buttonview~ButtonView#isOn} set `true`) or the very first item when none are active.
  *
@@ -227,4 +247,54 @@ * See {@link module:ui/dropdown/utils~createDropdown} and {@link module:list/list~List}.
 	listView.items.delegate( 'execute' ).to( dropdownView );
+
+	// Accessibility: Focus the first active button in the list when the dropdown gets open.
+	focusChildOnDropdownOpen( dropdownView, () => listView.items.find( item => {
+		if ( item instanceof ListItemView ) {
+			return item.children.first.isOn;
+		}
+
+		return false;
+	} ) );
 }
 
+/**
+ * A helper to be used on an existing {@link module:ui/dropdown/dropdownview~DropdownView} that focuses
+ * a specific child in DOM when the dropdown {@link module:ui/dropdown/dropdownview~DropdownView#isOpen gets open}.
+ *
+ * @param {module:ui/dropdown/dropdownview~DropdownView} dropdownView A dropdown instance to which the focus behavior will be added.
+ * @param {Function} childSelectorCallback A callback executed when the dropdown gets open. It should return a {@link module:ui/view~View}
+ * instance (child of {@link module:ui/dropdown/dropdownview~DropdownView#panelView}) that will get focused or a falsy value.
+ * If falsy value is returned, a default behavior of the dropdown will engage focusing the first focusable child in
+ * the {@link module:ui/dropdown/dropdownview~DropdownView#panelView}.
+ */
+export function focusChildOnDropdownOpen( dropdownView, childSelectorCallback ) {
+	dropdownView.on( 'change:isOpen', () => {
+		if ( !dropdownView.isOpen ) {
+			return;
+		}
+
+		const childToFocus = childSelectorCallback();
+
+		if ( !childToFocus ) {
+			return;
+		}
+
+		if ( typeof childToFocus.focus === 'function' ) {
+			childToFocus.focus();
+		} else {
+			/**
+			 * The child view of a {@link module:ui/dropdown/dropdownview~DropdownView dropdown} is missing the `focus()` method
+			 * and could not be focused when the dropdown got {@link module:ui/dropdown/dropdownview~DropdownView#isOpen open}.
+			 *
+			 * Making the content of a dropdown focusable in this case greatly improves the accessibility. Please make the view instance
+			 * implements the {@link module:ui/dropdown/dropdownpanelfocusable~DropdownPanelFocusable focusable interface} for the best user
+			 * experience.
+			 *
+			 * @error ui-dropdown-focus-child-on-open-child-missing-focus
+			 * @param {module:ui/view~View} view
+			 */
+			logWarning( 'ui-dropdown-focus-child-on-open-child-missing-focus', { view: childToFocus } );
+		}
+	}, { priority: 'low' } );
+}
+
 // Add a set of default behaviors to dropdown view.
@@ -231,0 +301,0 @@ //

src/editableui/inline/inlineeditableuiview.js

@@ -26,6 +26,12 @@ /**
 	 * will create it. Otherwise, the existing element will be used.
+	 * @param {Object} [options] Additional configuration of the view.
+	 * @param {Function} [options.label] A function that gets called with the instance of this view as an argument
+	 * and should return a string that represents the label of the editable for assistive technologies. If not provided,
+	 * a default label generator is used.
 	 */
-	constructor( locale, editingView, editableElement ) {
+	constructor( locale, editingView, editableElement, options = {} ) {
 		super( locale, editingView, editableElement );
 
+		const t = locale.t;
+
 		this.extendTemplate( {
@@ -37,2 +43,12 @@ attributes: {
 		} );
+
+		/**
+		 * A function that gets called with the instance of this view as an argument and should return a string that
+		 * represents the label of the editable for assistive technologies.
+		 *
+		 * @private
+		 * @readonly
+		 * @param {Function}
+		 */
+		this._generateLabel = options.label || ( () => t( 'Editor editing area: %0', this.name ) );
 	}
@@ -47,3 +63,2 @@
 		const editingView = this._editingView;
-		const t = this.t;
 
@@ -53,5 +68,5 @@ editingView.change( writer => {
 
-			writer.setAttribute( 'aria-label', t( 'Rich Text Editor, %0', this.name ), viewRoot );
+			writer.setAttribute( 'aria-label', this._generateLabel( this ), viewRoot );
 		} );
 	}
 }

src/panel/balloon/balloonpanelview.js

@@ -759,3 +759,3 @@ /**
  *
- * @member {Object.<String,module:utils/dom/position~positioningFunction>}
+ * @member {Object.<String,module:utils/dom/position~PositioningFunction>}
  * module:ui/panel/balloon/balloonpanelview~BalloonPanelView.defaultPositions
@@ -767,3 +767,3 @@ */
  * Returns available {@link module:ui/panel/balloon/balloonpanelview~BalloonPanelView}
- * {@link module:utils/dom/position~positioningFunction positioning functions} adjusted by the specific offsets.
+ * {@link module:utils/dom/position~PositioningFunction positioning functions} adjusted by the specific offsets.
  *
@@ -784,4 +784,4 @@ * @protected
  * Currently only {@link module:ui/panel/balloon/balloonpanelview~BalloonPanelView#withArrow} is supported. Learn more
- * about {@link module:utils/dom/position~positioningFunction positioning functions}.
- * @returns {Object.<String,module:utils/dom/position~positioningFunction>}
+ * about {@link module:utils/dom/position~PositioningFunction positioning functions}.
+ * @returns {Object.<String,module:utils/dom/position~PositioningFunction>}
  */
@@ -788,0 +788,0 @@ export function generatePositions( {

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

633773

increased by12.55%

Number of package files

158

increased by3.27%

Lines of code

11528

increased by0.97%

Dependency changes

• + Added@ckeditor/ckeditor5-core@35.4.0(transitive)

• + Added@ckeditor/ckeditor5-engine@35.4.0(transitive)

• + Added@ckeditor/ckeditor5-ui@35.4.0(transitive)

• + Added@ckeditor/ckeditor5-utils@35.4.0(transitive)

• - Removed@ckeditor/ckeditor5-core@34.2.0(transitive)

• - Removed@ckeditor/ckeditor5-engine@34.2.0(transitive)

• - Removed@ckeditor/ckeditor5-utils@34.2.0(transitive)

• Updated@ckeditor/ckeditor5-core@^35.0.0

• Updated@ckeditor/ckeditor5-utils@^35.0.0