@ckeditor/ckeditor5-ui - npm Package Compare versions

Comparing version 13.0.2 to 14.0.0

CHANGELOG.md

 Changelog
 =========
 
+## [14.0.0](https://github.com/ckeditor/ckeditor5-ui/compare/v13.0.2...v14.0.0) (2019-08-26)
+
+### Features
+
+* Brought support for right–to–left (RTL) languages to various UI components. See [ckeditor/ckeditor5#1151](https://github.com/ckeditor/ckeditor5/issues/1151). ([d6c7f55](https://github.com/ckeditor/ckeditor5-ui/commit/d6c7f55))
+
+### Bug fixes
+
+* `ColorGrid` should set the `#isOn` property value of new `ColorTiles`. See [ckeditor/ckeditor5-font#51](https://github.com/ckeditor/ckeditor5-font/issues/51). ([e89ad60](https://github.com/ckeditor/ckeditor5-ui/commit/e89ad60))
+* All editor toolbars should come with the `role` and `aria-label` attributes. Closes [ckeditor/ckeditor5#1404](https://github.com/ckeditor/ckeditor5/issues/1404). ([bdede90](https://github.com/ckeditor/ckeditor5-ui/commit/bdede90))
+* Screen reader will now properly prompt errors for text inputs. Closes [ckeditor/ckeditor5#1406](https://github.com/ckeditor/ckeditor5/issues/1406). ([3a164b7](https://github.com/ckeditor/ckeditor5-ui/commit/3a164b7))
+
+### Other changes
+
+* The issue tracker for this package was moved to https://github.com/ckeditor/ckeditor5/issues. See [ckeditor/ckeditor5#1988](https://github.com/ckeditor/ckeditor5/issues/1988). ([451df7b](https://github.com/ckeditor/ckeditor5-ui/commit/451df7b))
+* Updated translations. ([eca9fe6](https://github.com/ckeditor/ckeditor5-ui/commit/eca9fe6))
+
+### BREAKING CHANGES
+
+* The `ToolbarView` class requires the [editor locale](https://ckeditor.com/docs/ckeditor5/latest/api/module_utils_locale-Locale.html) to be passed into the constructor.
+
+
 ## [13.0.2](https://github.com/ckeditor/ckeditor5-ui/compare/v13.0.1...v13.0.2) (2019-07-10)
@@ -8,3 +30,3 @@
 
-* Updated translations. ([ad189b6](https://github.com/ckeditor/ckeditor5-ui/commit/ad189b6)) 
+* Updated translations. ([ad189b6](https://github.com/ckeditor/ckeditor5-ui/commit/ad189b6))
 
@@ -11,0 +33,0 @@

lang/contexts.json

@@ -7,3 +7,5 @@ {
 	"Previous": "Label for a button showing the previous thing (tab, page, etc.).",
-	"%0 of %1": "Label for a 'page X of Y' status of a typical next/previous page navigation."
+	"%0 of %1": "Label for a 'page X of Y' status of a typical next/previous page navigation.",
+	"Editor toolbar": "Label used by assistive technologies describing a generic editor toolbar.",
+	"Dropdown toolbar": "Label used by assistive technologies describing a toolbar displayed inside a dropdown."
 }

package.json

 {
   "name": "@ckeditor/ckeditor5-ui",
-  "version": "13.0.2",
+  "version": "14.0.0",
   "description": "The UI framework and standard UI library of CKEditor 5.",
@@ -12,21 +12,21 @@ "keywords": [
   "dependencies": {
-    "@ckeditor/ckeditor5-core": "^12.2.1",
-    "@ckeditor/ckeditor5-utils": "^13.0.1",
+    "@ckeditor/ckeditor5-core": "^12.3.0",
+    "@ckeditor/ckeditor5-utils": "^14.0.0",
     "lodash-es": "^4.17.10"
   },
   "devDependencies": {
-    "@ckeditor/ckeditor5-basic-styles": "^11.1.3",
-    "@ckeditor/ckeditor5-block-quote": "^11.1.2",
-    "@ckeditor/ckeditor5-editor-balloon": "^12.2.1",
-    "@ckeditor/ckeditor5-editor-classic": "^12.1.3",
-    "@ckeditor/ckeditor5-engine": "^13.2.1",
-    "@ckeditor/ckeditor5-enter": "^11.0.4",
-    "@ckeditor/ckeditor5-essentials": "^11.0.4",
-    "@ckeditor/ckeditor5-heading": "^11.0.4",
-    "@ckeditor/ckeditor5-image": "^13.1.2",
-    "@ckeditor/ckeditor5-link": "^11.1.1",
-    "@ckeditor/ckeditor5-list": "^12.0.4",
-    "@ckeditor/ckeditor5-mention": "^12.0.1",
-    "@ckeditor/ckeditor5-paragraph": "^11.0.4",
-    "@ckeditor/ckeditor5-typing": "^12.1.1",
+    "@ckeditor/ckeditor5-basic-styles": "^11.1.4",
+    "@ckeditor/ckeditor5-block-quote": "^11.1.3",
+    "@ckeditor/ckeditor5-editor-balloon": "^12.2.2",
+    "@ckeditor/ckeditor5-editor-classic": "^12.1.4",
+    "@ckeditor/ckeditor5-engine": "^14.0.0",
+    "@ckeditor/ckeditor5-enter": "^11.1.0",
+    "@ckeditor/ckeditor5-essentials": "^11.0.5",
+    "@ckeditor/ckeditor5-heading": "^11.0.5",
+    "@ckeditor/ckeditor5-image": "^14.0.0",
+    "@ckeditor/ckeditor5-link": "^11.1.2",
+    "@ckeditor/ckeditor5-list": "^12.1.0",
+    "@ckeditor/ckeditor5-mention": "^13.0.0",
+    "@ckeditor/ckeditor5-paragraph": "^11.0.5",
+    "@ckeditor/ckeditor5-typing": "^12.2.0",
     "eslint": "^5.5.0",
@@ -44,3 +44,3 @@ "eslint-config-ckeditor5": "^2.0.0",
   "homepage": "https://ckeditor.com/ckeditor-5",
-  "bugs": "https://github.com/ckeditor/ckeditor5-ui/issues",
+  "bugs": "https://github.com/ckeditor/ckeditor5/issues",
   "repository": {
@@ -47,0 +47,0 @@ "type": "git",

src/button/buttonview.js

@@ -55,2 +55,3 @@ /**
 		this.set( 'isVisible', true );
+		this.set( 'isToggleable', false );
 		this.set( 'keystroke' );
@@ -136,3 +137,3 @@ this.set( 'label' );
 				'aria-disabled': bind.if( 'isEnabled', true, value => !value ),
-				'aria-pressed': bind.if( 'isOn', true )
+				'aria-pressed': bind.to( 'isOn', value => this.isToggleable ? String( value ) : false )
 			},
@@ -139,0 +140,0 @@

src/button/switchbuttonview.js

@@ -38,2 +38,4 @@ /**
 
+		this.isToggleable = true;
+
 		/**
@@ -40,0 +42,0 @@ * The toggle switch of the button.

src/colorgrid/colorgridview.js

@@ -93,2 +93,6 @@ /**
 
+		this.items.on( 'add', ( evt, colorTile ) => {
+			colorTile.isOn = colorTile.color === this.selectedColor;
+		} );
+
 		colorDefinitions.forEach( item => {
@@ -95,0 +99,0 @@ const colorTile = new ColorTileView();

src/dropdown/button/splitbuttonview.js

@@ -53,2 +53,3 @@ /**
 		this.set( 'isOn', false );
+		this.set( 'isToggleable', false );
 		this.set( 'isVisible', true );
@@ -177,2 +178,3 @@ this.set( 'keystroke' );
 			'isOn',
+			'isToggleable',
 			'keystroke',
@@ -207,2 +209,3 @@ 'label',
 		const arrowView = new ButtonView();
+		const bind = arrowView.bindTemplate;
 
@@ -214,3 +217,4 @@ arrowView.icon = dropdownArrowIcon;
 				class: 'ck-splitbutton__arrow',
-				'aria-haspopup': true
+				'aria-haspopup': true,
+				'aria-expanded': bind.to( 'isOn', value => String( value ) )
 			}
@@ -217,0 +221,0 @@ } );

src/dropdown/dropdownview.js

@@ -256,14 +256,7 @@ /**
 			if ( this.panelPosition === 'auto' ) {
-				const defaultPanelPositions = DropdownView.defaultPanelPositions;
-
-				this.panelView.position = getOptimalPosition( {
+				this.panelView.position = DropdownView._getOptimalPosition( {
 					element: this.panelView.element,
 					target: this.buttonView.element,
 					fitInViewport: true,
-					positions: [
-						defaultPanelPositions.southEast,
-						defaultPanelPositions.southWest,
-						defaultPanelPositions.northEast,
-						defaultPanelPositions.northWest
-					]
+					positions: this._panelPositions
 				} ).name;
@@ -316,2 +309,20 @@ } else {
 	}
+
+	/**
+	 * Returns {@link #panelView panel} positions to be used by the
+	 * {@link module:utils/dom/position~getOptimalPosition `getOptimalPosition()`}
+	 * utility considering the direction of the language the UI of the editor is displayed in.
+	 *
+	 * @type {module:utils/dom/position~Options#positions}
+	 * @private
+	 */
+	get _panelPositions() {
+		const { southEast, southWest, northEast, northWest } = DropdownView.defaultPanelPositions;
+
+		if ( this.locale.uiLanguageDirection === 'ltr' ) {
+			return [ southEast, southWest, northEast, northWest ];
+		} else {
+			return [ southWest, southEast, northWest, northEast ];
+		}
+	}
 }
@@ -397,1 +408,9 @@
 };
+
+/**
+ * A function used to calculate the optimal position for the dropdown panel.
+ *
+ * @protected
+ * @member {Function} module:ui/dropdown/dropdownview~DropdownView._getOptimalPosition
+ */
+DropdownView._getOptimalPosition = getOptimalPosition;

src/dropdown/utils.js

@@ -132,4 +132,8 @@ /**
 export function addToolbarToDropdown( dropdownView, buttons ) {
-	const toolbarView = dropdownView.toolbarView = new ToolbarView();
+	const locale = dropdownView.locale;
+	const t = locale.t;
+	const toolbarView = dropdownView.toolbarView = new ToolbarView( locale );
 
+	toolbarView.set( 'ariaLabel', t( 'Dropdown toolbar' ) );
+
 	dropdownView.extendTemplate( {
@@ -136,0 +140,0 @@ attributes: {

src/editableui/editableuiview.js

@@ -37,3 +37,5 @@ /**
 					'ck-rounded-corners'
-				]
+				],
+				lang: locale.contentLanguage,
+				dir: locale.contentLanguageDirection
 			}
@@ -40,0 +42,0 @@ } );

src/editorui/boxed/boxededitoruiview.js

@@ -69,4 +69,4 @@ /**
 				role: 'application',
-				dir: 'ltr',
-				lang: locale.language,
+				dir: locale.uiLanguageDirection,
+				lang: locale.uiLanguage,
 				'aria-labelledby': `ck-editor__aria-label_${ ariaLabelUid }`
@@ -73,0 +73,0 @@ },

src/editorui/editoruiview.js

@@ -72,2 +72,3 @@ /**
 	_renderBodyCollection() {
+		const locale = this.locale;
 		const bodyElement = this._bodyCollectionContainer = new Template( {
@@ -81,3 +82,4 @@ tag: 'div',
 					'ck-rounded-corners'
-				]
+				],
+				dir: locale.uiLanguageDirection,
 			},
@@ -84,0 +86,0 @@ children: this.body

src/labeledinput/labeledinputview.js

@@ -213,3 +213,4 @@ /**
 				],
-				id: statusUid
+				id: statusUid,
+				role: bind.if( 'errorText', 'alert' )
 			},
@@ -216,0 +217,0 @@ children: [

src/template.js

@@ -18,3 +18,2 @@ /**
 import isNode from '@ckeditor/ckeditor5-utils/src/dom/isnode';
-import log from '@ckeditor/ckeditor5-utils/src/log';
 import { isObject, cloneDeepWith } from 'lodash-es';
@@ -43,3 +42,3 @@
  *				click: bind.to( 'clicked' )
- *			}
+ *			},
  *			children: [
@@ -386,3 +385,6 @@ *				'A paragraph.'
 			 */
-			log.warn( 'template-extend-render: Attempting to extend a template which has already been rendered.' );
+			throw new CKEditorError(
+				'template-extend-render: Attempting to extend a template which has already been rendered.',
+				[ this, template ]
+			);
 		}
@@ -806,4 +808,4 @@
 	 * @param {HTMLElement|Text} node A node to be reverted.
-	 * @param {module:ui/template~RenderData#revertData} revertData Stores information about
-	 * what changes have been made by {@link #apply} to the node.
+	 * @param {Object} revertData An object that stores information about what changes have been made by
+	 * {@link #apply} to the node. See {@link module:ui/template~RenderData#revertData} for more information.
 	 */
@@ -810,0 +812,0 @@ _revertTemplateFromNode( node, revertData ) {

src/toolbar/block/blockbuttonview.js

@@ -37,2 +37,4 @@ /**
 
+		this.isToggleable = true;
+
 		/**
@@ -39,0 +41,0 @@ * Top offset.

src/toolbar/block/blocktoolbar.js

@@ -56,2 +56,10 @@ /**
  *
+ * **Note**: If you plan to run the editor in a right–to–left (RTL) language, keep in mind the button
+ * will be attached to the **right** boundary of the editable area. In that case, make sure the
+ * CSS position adjustment works properly by adding the following styles:
+ *
+ * 		.ck[dir="rtl"] .ck-block-toolbar-button {
+ * 			transform: translateX( 10px );
+ * 		}
+ *
  * @extends module:core/plugin~Plugin
@@ -365,5 +373,13 @@ */
 				( contentRect, buttonRect ) => {
+					let left;
+
+					if ( this.editor.locale.uiLanguageDirection === 'ltr' ) {
+						left = editableRect.left - buttonRect.width;
+					} else {
+						left = editableRect.right;
+					}
+
 					return {
-						top: contentRect.top + contentPaddingTop + ( ( contentLineHeight - buttonRect.height ) / 2 ),
-						left: editableRect.left - buttonRect.width
+						top: contentRect.top + contentPaddingTop + ( contentLineHeight - buttonRect.height ) / 2,
+						left
 					};
@@ -370,0 +386,0 @@ }

src/toolbar/toolbarview.js

@@ -10,2 +10,4 @@ /**
 
+/* globals console */
+
 import View from '../view';
@@ -17,5 +19,5 @@ import FocusTracker from '@ckeditor/ckeditor5-utils/src/focustracker';
 import preventDefault from '../bindings/preventdefault.js';
-import log from '@ckeditor/ckeditor5-utils/src/log';
 
 import '../../theme/components/toolbar/toolbar.css';
+import { attachLinkToDocumentation } from '@ckeditor/ckeditor5-utils/src/ckeditorerror';
 
@@ -30,3 +32,7 @@ /**
 	/**
-	 * @inheritDoc
+	 * Creates an instance of the {@link module:ui/toolbar/toolbarview~ToolbarView} class.
+	 *
+	 * Also see {@link #render}.
+	 *
+	 * @param {module:utils/locale~Locale} locale The localization services instance.
 	 */
@@ -37,4 +43,13 @@ constructor( locale ) {
 		const bind = this.bindTemplate;
+		const t = this.t;
 
 		/**
+		 * Label used by assistive technologies to describe this toolbar element.
+		 *
+		 * @default 'Editor toolbar'
+		 * @member {String} #ariaLabel
+		 */
+		this.set( 'ariaLabel', t( 'Editor toolbar' ) );
+
+		/**
 		 * Collection of the toolbar items (like buttons).
@@ -107,3 +122,5 @@ *
 					bind.to( 'class' )
-				]
+				],
+				role: 'toolbar',
+				'aria-label': bind.to( 'ariaLabel' )
 			},
@@ -188,6 +205,4 @@
 				 */
-				log.warn(
-					'toolbarview-item-unavailable: The requested toolbar item is unavailable.',
-					{ name }
-				);
+				console.warn( attachLinkToDocumentation(
+					'toolbarview-item-unavailable: The requested toolbar item is unavailable.' ), { name } );
 			}
@@ -194,0 +209,0 @@ } );

src/viewcollection.js

@@ -142,3 +142,3 @@ /**
 	 *
-	 * See {@link module:utils/emittermixin~EmitterMixin#delegate}.
+	 * See {@link module:utils/emittermixin~Emitter#delegate}.
 	 *
@@ -149,3 +149,3 @@ * @param {...String} events {@link module:ui/view~View} event names to be delegated to another
 	 * @returns {Function} return.to A function which accepts the destination of
-	 * {@link module:utils/emittermixin~EmitterMixin#delegate delegated} events.
+	 * {@link module:utils/emittermixin~Emitter#delegate delegated} events.
 	 */
@@ -167,7 +167,7 @@ delegate( ...events ) {
 			/**
-			 * Selects destination for {@link module:utils/emittermixin~EmitterMixin#delegate} events.
+			 * Selects destination for {@link module:utils/emittermixin~Emitter#delegate} events.
 			 *
 			 * @memberOf module:ui/viewcollection~ViewCollection#delegate
 			 * @function module:ui/viewcollection~ViewCollection#delegate.to
-			 * @param {module:utils/emittermixin~EmitterMixin} dest An `EmitterMixin` instance which is
+			 * @param {module:utils/emittermixin~Emitter} dest An `Emitter` instance which is
 			 * the destination for delegated events.
@@ -174,0 +174,0 @@ */

New alerts

No bug tracker

Maintenance

Package does not have a linked bug tracker in package.json.

Found 1 instance in 1 package

Fixed alerts

No bug tracker

Maintenance

Package does not have a linked bug tracker in package.json.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

391076

increased by0.07%

Number of package files

130

increased by0.78%

Lines of code

8872

increased by0.85%

Dependency changes

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

• Updated@ckeditor/ckeditor5-core@^12.3.0

• Updated@ckeditor/ckeditor5-utils@^14.0.0