clay-link - npm Package Compare versions

Comparing version 2.22.4 to 2.23.1

CHANGELOG.md

@@ -6,2 +6,30 @@ # Change Log
 
+## [2.23.1](https://github.com/liferay/clay/tree/master/packages/clay-link/compare/v2.23.0...v2.23.1) (2021-12-14)
+
+
+### Bug Fixes
+
+* **clay-link:** listens for the `handleClick` event and removes the preventDefault call by default ([29be437](https://github.com/liferay/clay/tree/master/packages/clay-link/commit/29be437))
+
+
+
+
+
+# [2.23.0](https://github.com/liferay/clay/tree/master/packages/clay-link/compare/v2.22.4...v2.23.0) (2021-12-13)
+
+
+### Bug Fixes
+
+* Add title in a span element, so it can be accessible to screen readers tools ([564bbaf](https://github.com/liferay/clay/tree/master/packages/clay-link/commit/564bbaf))
+* Regenerate snapshots and updates tests files ([8aa4aac](https://github.com/liferay/clay/tree/master/packages/clay-link/commit/8aa4aac))
+
+
+### Features
+
+* **clay-link:** Trigger an "itemClicked" event and improve a11y ([190e060](https://github.com/liferay/clay/tree/master/packages/clay-link/commit/190e060))
+
+
+
+
+
 ## [2.22.2](https://github.com/liferay/clay/tree/master/packages/clay-link/compare/v2.22.1...v2.22.2) (2021-02-11)
@@ -8,0 +36,0 @@

lib/ClayLink.js

@@ -8,2 +8,4 @@ 'use strict';
 
+var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
+
 require('clay-icon');
@@ -50,2 +52,37 @@
 
+	_createClass(ClayLink, [{
+		key: 'attached',
+
+		/**
+   * @inheritDoc
+   */
+		value: function attached() {
+			this.addListener('click', this._handleClick, true);
+		}
+
+		/**
+   * @inheritDoc
+   */
+
+	}, {
+		key: 'disposed',
+		value: function disposed() {
+			this.removeListener('click', this._handleClick);
+		}
+
+		/**
+   * HandleClick is a void callback which is just a workaround so we can
+   * explicitly add a click listener to force invoke the
+   * `defaultEventHandler` method, this is for when only the
+   * `defaultEventHandler` method is set on the component property and when
+   * the `events` property and the native Metal.js `on` method is not used.
+   * @param {!Event} event
+   * @protected
+   */
+
+	}, {
+		key: '_handleClick',
+		value: function _handleClick() {}
+	}]);
+
 	return ClayLink;
@@ -52,0 +89,0 @@ }(_clayComponent2.default);

lib/ClayLink.soy.js

@@ -148,3 +148,3 @@ 'use strict';
     incrementalDom.elementOpenEnd();
-    $content({ icon: icon, iconAlignment: ($$temp = iconAlignment) == null ? 'left' : $$temp, imageAlt: imageAlt, imageSrc: imageSrc, label: label, spritemap: spritemap }, null, opt_ijData);
+    $content({ icon: icon, iconAlignment: ($$temp = iconAlignment) == null ? 'left' : $$temp, imageAlt: imageAlt, imageSrc: imageSrc, label: label, spritemap: spritemap, title: title }, null, opt_ijData);
     incrementalDom.elementClose('a');
@@ -185,3 +185,4 @@ }
    *  label: (!goog.soy.data.SanitizedContent|function()|null|string|undefined),
-   *  spritemap: (!goog.soy.data.SanitizedContent|null|string|undefined)
+   *  spritemap: (!goog.soy.data.SanitizedContent|null|string|undefined),
+   *  title: (!goog.soy.data.SanitizedContent|null|string|undefined)
    * }} opt_data
@@ -209,2 +210,11 @@ * @param {Object<string, *>=} opt_ijData
     var spritemap = soy.asserts.assertType(opt_data.spritemap == null || goog.isString(opt_data.spritemap) || opt_data.spritemap instanceof goog.soy.data.SanitizedContent, 'spritemap', opt_data.spritemap, '!goog.soy.data.SanitizedContent|null|string|undefined');
+    /** @type {!goog.soy.data.SanitizedContent|null|string|undefined} */
+    var title = soy.asserts.assertType(opt_data.title == null || goog.isString(opt_data.title) || opt_data.title instanceof goog.soy.data.SanitizedContent, 'title', opt_data.title, '!goog.soy.data.SanitizedContent|null|string|undefined');
+    if (title) {
+      incrementalDom.elementOpenStart('span');
+      incrementalDom.attr('class', 'sr-only');
+      incrementalDom.elementOpenEnd();
+      soyIdom.print(title);
+      incrementalDom.elementClose('span');
+    }
     if (imageSrc) {
@@ -235,3 +245,4 @@ incrementalDom.elementOpenStart('img');
    *  label: (!goog.soy.data.SanitizedContent|function()|null|string|undefined),
-   *  spritemap: (!goog.soy.data.SanitizedContent|null|string|undefined)
+   *  spritemap: (!goog.soy.data.SanitizedContent|null|string|undefined),
+   *  title: (!goog.soy.data.SanitizedContent|null|string|undefined)
    * }}
@@ -280,4 +291,4 @@ */
   exports.render.types = { "ariaExpanded": "bool", "ariaLabel": "string", "buttonStyle": "string", "download": "string", "elementClasses": "string", "href": "string", "icon": "string", "iconAlignment": "string", "id": "string", "imageAlt": "string", "imageSrc": "string", "label": "html|string", "spritemap": "string", "style": "string", "target": "string", "title": "string" };
-  exports.content.params = ["icon", "iconAlignment", "imageAlt", "imageSrc", "label", "spritemap"];
-  exports.content.types = { "icon": "string", "iconAlignment": "string", "imageAlt": "string", "imageSrc": "string", "label": "html|string", "spritemap": "string" };
+  exports.content.params = ["icon", "iconAlignment", "imageAlt", "imageSrc", "label", "spritemap", "title"];
+  exports.content.types = { "icon": "string", "iconAlignment": "string", "imageAlt": "string", "imageSrc": "string", "label": "html|string", "spritemap": "string", "title": "string" };
   exports.icon.params = ["elementClasses", "icon", "spritemap"];
@@ -284,0 +295,0 @@ exports.icon.types = { "elementClasses": "string", "icon": "string", "spritemap": "string" };

package.json

 {
   "name": "clay-link",
-  "version": "2.22.4",
+  "version": "2.23.1",
   "description": "Clay Link Component",
@@ -31,4 +31,4 @@ "license": "BSD-3-Clause",
   "dependencies": {
-    "clay-component": "^2.22.4",
-    "clay-icon": "^2.22.4",
+    "clay-component": "^2.23.0",
+    "clay-icon": "^2.23.0",
     "metal": "^2.16.0",
@@ -47,3 +47,3 @@ "metal-component": "^2.16.0",
     "browserslist-config-clay": "^2.16.2",
-    "clay-css": "^2.22.4",
+    "clay-css": "^2.23.0",
     "metal-dom": "^2.16.0",
@@ -50,0 +50,0 @@ "metal-tools-soy": "^4.3.2",

src/ClayLink.js

@@ -13,4 +13,29 @@ import 'clay-icon';
  */
-class ClayLink extends ClayComponent {}
+class ClayLink extends ClayComponent {
+	/**
+	 * @inheritDoc
+	 */
+	attached() {
+		this.addListener('click', this._handleClick, true);
+	}
 
+	/**
+	 * @inheritDoc
+	 */
+	disposed() {
+		this.removeListener('click', this._handleClick);
+	}
+
+	/**
+	 * HandleClick is a void callback which is just a workaround so we can
+	 * explicitly add a click listener to force invoke the
+	 * `defaultEventHandler` method, this is for when only the
+	 * `defaultEventHandler` method is set on the component property and when
+	 * the `events` property and the native Metal.js `on` method is not used.
+	 * @param {!Event} event
+	 * @protected
+	 */
+	_handleClick() {}
+}
+
 /**
@@ -17,0 +42,0 @@ * State definition.

src/ClayLink.soy.js

@@ -129,3 +129,3 @@ /* jshint ignore:start */
   incrementalDom.elementOpenEnd();
-    $content({icon: icon, iconAlignment: ($$temp = iconAlignment) == null ? 'left' : $$temp, imageAlt: imageAlt, imageSrc: imageSrc, label: label, spritemap: spritemap}, null, opt_ijData);
+    $content({icon: icon, iconAlignment: ($$temp = iconAlignment) == null ? 'left' : $$temp, imageAlt: imageAlt, imageSrc: imageSrc, label: label, spritemap: spritemap, title: title}, null, opt_ijData);
   incrementalDom.elementClose('a');
@@ -167,3 +167,4 @@ }
  *  label: (!goog.soy.data.SanitizedContent|function()|null|string|undefined),
- *  spritemap: (!goog.soy.data.SanitizedContent|null|string|undefined)
+ *  spritemap: (!goog.soy.data.SanitizedContent|null|string|undefined),
+ *  title: (!goog.soy.data.SanitizedContent|null|string|undefined)
  * }} opt_data
@@ -191,2 +192,11 @@ * @param {Object<string, *>=} opt_ijData
   var spritemap = soy.asserts.assertType(opt_data.spritemap == null || (goog.isString(opt_data.spritemap) || opt_data.spritemap instanceof goog.soy.data.SanitizedContent), 'spritemap', opt_data.spritemap, '!goog.soy.data.SanitizedContent|null|string|undefined');
+  /** @type {!goog.soy.data.SanitizedContent|null|string|undefined} */
+  var title = soy.asserts.assertType(opt_data.title == null || (goog.isString(opt_data.title) || opt_data.title instanceof goog.soy.data.SanitizedContent), 'title', opt_data.title, '!goog.soy.data.SanitizedContent|null|string|undefined');
+  if (title) {
+    incrementalDom.elementOpenStart('span');
+        incrementalDom.attr('class', 'sr-only');
+    incrementalDom.elementOpenEnd();
+      soyIdom.print(title);
+    incrementalDom.elementClose('span');
+  }
   if (imageSrc) {
@@ -217,3 +227,4 @@ incrementalDom.elementOpenStart('img');
  *  label: (!goog.soy.data.SanitizedContent|function()|null|string|undefined),
- *  spritemap: (!goog.soy.data.SanitizedContent|null|string|undefined)
+ *  spritemap: (!goog.soy.data.SanitizedContent|null|string|undefined),
+ *  title: (!goog.soy.data.SanitizedContent|null|string|undefined)
  * }}
@@ -263,4 +274,4 @@ */
 exports.render.types = {"ariaExpanded":"bool","ariaLabel":"string","buttonStyle":"string","download":"string","elementClasses":"string","href":"string","icon":"string","iconAlignment":"string","id":"string","imageAlt":"string","imageSrc":"string","label":"html|string","spritemap":"string","style":"string","target":"string","title":"string"};
-exports.content.params = ["icon","iconAlignment","imageAlt","imageSrc","label","spritemap"];
-exports.content.types = {"icon":"string","iconAlignment":"string","imageAlt":"string","imageSrc":"string","label":"html|string","spritemap":"string"};
+exports.content.params = ["icon","iconAlignment","imageAlt","imageSrc","label","spritemap","title"];
+exports.content.types = {"icon":"string","iconAlignment":"string","imageAlt":"string","imageSrc":"string","label":"html|string","spritemap":"string","title":"string"};
 exports.icon.params = ["elementClasses","icon","spritemap"];
@@ -267,0 +278,0 @@ exports.icon.types = {"elementClasses":"string","icon":"string","spritemap":"string"};

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

100390

increased by1.64%

Worsened metrics

Number of package files

13

decreased by-23.53%

Lines of code

1123

decreased by-1.92%

Dependency changes

• Updatedclay-component@^2.23.0

• Updatedclay-icon@^2.23.0