clay-checkbox - npm Package Compare versions

Comparing version 1.0.0-alpha.12 to 1.0.0-alpha.15

lib/ClayCheckbox.js

@@ -71,2 +71,11 @@ 'use strict';
 	/**
+  * Aria labelled by attribute to apply to the input.
+  * @instance
+  * @memberof ClayCheckbox
+  * @type {?string|undefined}
+  * @default undefined
+  */
+	ariaLabelledBy: _metalState.Config.string(),
+
+	/**
   * Flag to indicate if checkbox is checked.
@@ -73,0 +82,0 @@ * @instance

lib/ClayCheckbox.soy.js

@@ -46,2 +46,3 @@ 'use strict';
    * @param {{
+   *  ariaLabelledBy: (!goog.soy.data.SanitizedContent|null|string|undefined),
    *  checked: (boolean|null|undefined),
@@ -67,2 +68,4 @@ *  disabled: (boolean|null|undefined),
     opt_data = opt_data || {};
+    /** @type {!goog.soy.data.SanitizedContent|null|string|undefined} */
+    var ariaLabelledBy = soy.asserts.assertType(opt_data.ariaLabelledBy == null || goog.isString(opt_data.ariaLabelledBy) || opt_data.ariaLabelledBy instanceof goog.soy.data.SanitizedContent, 'ariaLabelledBy', opt_data.ariaLabelledBy, '!goog.soy.data.SanitizedContent|null|string|undefined');
     /** @type {boolean|null|undefined} */
@@ -90,3 +93,3 @@ var checked = soy.asserts.assertType(opt_data.checked == null || goog.isBoolean(opt_data.checked) || opt_data.checked === 1 || opt_data.checked === 0, 'checked', opt_data.checked, 'boolean|null|undefined');
     var value = soy.asserts.assertType(opt_data.value == null || goog.isString(opt_data.value) || opt_data.value instanceof goog.soy.data.SanitizedContent, 'value', opt_data.value, '!goog.soy.data.SanitizedContent|null|string|undefined');
-    var attributes__soy15 = function attributes__soy15() {
+    var attributes__soy16 = function attributes__soy16() {
       incrementalDom.attr('class', 'custom-control custom-checkbox' + (inline ? ' custom-control-inline' : '') + (elementClasses ? ' ' + elementClasses : ''));
@@ -98,5 +101,5 @@ if (id) {
     incrementalDom.elementOpenStart('div');
-    attributes__soy15();
+    attributes__soy16();
     incrementalDom.elementOpenEnd();
-    $input({ checked: indeterminate || checked, disabled: disabled, hideLabel: hideLabel, label: label, labelContent: labelContent, name: name, value: value }, null, opt_ijData);
+    $input({ ariaLabelledBy: ariaLabelledBy, checked: indeterminate || checked, disabled: disabled, hideLabel: hideLabel, label: label, labelContent: labelContent, name: name, value: value }, null, opt_ijData);
     incrementalDom.elementClose('div');
@@ -107,2 +110,3 @@ }
    * @typedef {{
+   *  ariaLabelledBy: (!goog.soy.data.SanitizedContent|null|string|undefined),
    *  checked: (boolean|null|undefined),
@@ -128,2 +132,3 @@ *  disabled: (boolean|null|undefined),
    * @param {{
+   *  ariaLabelledBy: (!goog.soy.data.SanitizedContent|null|string|undefined),
    *  checked: (boolean|null|undefined),
@@ -145,2 +150,4 @@ *  disabled: (boolean|null|undefined),
     opt_data = opt_data || {};
+    /** @type {!goog.soy.data.SanitizedContent|null|string|undefined} */
+    var ariaLabelledBy = soy.asserts.assertType(opt_data.ariaLabelledBy == null || goog.isString(opt_data.ariaLabelledBy) || opt_data.ariaLabelledBy instanceof goog.soy.data.SanitizedContent, 'ariaLabelledBy', opt_data.ariaLabelledBy, '!goog.soy.data.SanitizedContent|null|string|undefined');
     /** @type {boolean|null|undefined} */
@@ -161,3 +168,6 @@ var checked = soy.asserts.assertType(opt_data.checked == null || goog.isBoolean(opt_data.checked) || opt_data.checked === 1 || opt_data.checked === 0, 'checked', opt_data.checked, 'boolean|null|undefined');
     incrementalDom.elementOpen('label');
-    var inputAttributes__soy55 = function inputAttributes__soy55() {
+    var inputAttributes__soy58 = function inputAttributes__soy58() {
+      if (ariaLabelledBy) {
+        incrementalDom.attr('aria-labelledby', ariaLabelledBy);
+      }
       if (checked) {
@@ -180,3 +190,3 @@ incrementalDom.attr('checked', 'checked');
     incrementalDom.elementOpenStart('input');
-    inputAttributes__soy55();
+    inputAttributes__soy58();
     incrementalDom.elementOpenEnd();
@@ -191,7 +201,7 @@ incrementalDom.elementClose('input');
     } else {
-      var spanLabelClasses__soy87 = '';
-      spanLabelClasses__soy87 += 'custom-control-description';
-      spanLabelClasses__soy87 += hideLabel ? ' sr-only' : '';
+      var spanLabelClasses__soy96 = '';
+      spanLabelClasses__soy96 += 'custom-control-description';
+      spanLabelClasses__soy96 += hideLabel ? ' sr-only' : '';
       incrementalDom.elementOpenStart('span');
-      incrementalDom.attr('class', spanLabelClasses__soy87);
+      incrementalDom.attr('class', spanLabelClasses__soy96);
       incrementalDom.elementOpenEnd();
@@ -206,2 +216,3 @@ soyIdom.print(label);
    * @typedef {{
+   *  ariaLabelledBy: (!goog.soy.data.SanitizedContent|null|string|undefined),
    *  checked: (boolean|null|undefined),
@@ -221,6 +232,6 @@ *  disabled: (boolean|null|undefined),
 
-  exports.render.params = ["checked", "disabled", "elementClasses", "hideLabel", "id", "indeterminate", "inline", "label", "labelContent", "name", "value"];
-  exports.render.types = { "checked": "bool", "disabled": "bool", "elementClasses": "string", "hideLabel": "bool", "id": "string", "indeterminate": "bool", "inline": "bool", "label": "string", "labelContent": "html", "name": "string", "value": "string" };
-  exports.input.params = ["checked", "disabled", "hideLabel", "label", "labelContent", "name", "value"];
-  exports.input.types = { "checked": "bool", "disabled": "bool", "hideLabel": "bool", "label": "string", "labelContent": "html", "name": "string", "value": "string" };
+  exports.render.params = ["ariaLabelledBy", "checked", "disabled", "elementClasses", "hideLabel", "id", "indeterminate", "inline", "label", "labelContent", "name", "value"];
+  exports.render.types = { "ariaLabelledBy": "string", "checked": "bool", "disabled": "bool", "elementClasses": "string", "hideLabel": "bool", "id": "string", "indeterminate": "bool", "inline": "bool", "label": "string", "labelContent": "html", "name": "string", "value": "string" };
+  exports.input.params = ["ariaLabelledBy", "checked", "disabled", "hideLabel", "label", "labelContent", "name", "value"];
+  exports.input.types = { "ariaLabelledBy": "string", "checked": "bool", "disabled": "bool", "hideLabel": "bool", "label": "string", "labelContent": "html", "name": "string", "value": "string" };
   exports.templates = templates = exports;
@@ -227,0 +238,0 @@ return exports;

package.json

 {
   "name": "clay-checkbox",
-  "version": "1.0.0-alpha.12",
+  "version": "1.0.0-alpha.15",
   "description": "Clay Checkbox Component",
@@ -33,3 +33,3 @@ "license": "BSD",
     "metal-soy": "^2.14.0",
-    "metal-state": "^2.14.0",
+    "metal-state": "^2.15.0",
     "metal-web-component": "^2.14.0"
@@ -44,3 +44,3 @@ },
     "browserslist-config-clay-components": "^1.0.0-alpha.2",
-    "clay": "^2.0.0-beta.5",
+    "clay": "^1.0.0-alpha.15",
     "metal-dom": "^2.13.2",
@@ -47,0 +47,0 @@ "metal-tools-soy": "^4.2.1",

src/ClayCheckbox.js

@@ -27,2 +27,11 @@ import Component from 'metal-component';
 	/**
+	 * Aria labelled by attribute to apply to the input.
+	 * @instance
+	 * @memberof ClayCheckbox
+	 * @type {?string|undefined}
+	 * @default undefined
+	 */
+	ariaLabelledBy: Config.string(),
+
+	/**
 	 * Flag to indicate if checkbox is checked.
@@ -29,0 +38,0 @@ * @instance

src/ClayCheckbox.soy.js

@@ -27,2 +27,3 @@ /* jshint ignore:start */
  * @param {{
+ *  ariaLabelledBy: (!goog.soy.data.SanitizedContent|null|string|undefined),
  *  checked: (boolean|null|undefined),
@@ -48,2 +49,4 @@ *  disabled: (boolean|null|undefined),
   opt_data = opt_data || {};
+  /** @type {!goog.soy.data.SanitizedContent|null|string|undefined} */
+  var ariaLabelledBy = soy.asserts.assertType(opt_data.ariaLabelledBy == null || (goog.isString(opt_data.ariaLabelledBy) || opt_data.ariaLabelledBy instanceof goog.soy.data.SanitizedContent), 'ariaLabelledBy', opt_data.ariaLabelledBy, '!goog.soy.data.SanitizedContent|null|string|undefined');
   /** @type {boolean|null|undefined} */
@@ -71,3 +74,3 @@ var checked = soy.asserts.assertType(opt_data.checked == null || (goog.isBoolean(opt_data.checked) || opt_data.checked === 1 || opt_data.checked === 0), 'checked', opt_data.checked, 'boolean|null|undefined');
   var value = soy.asserts.assertType(opt_data.value == null || (goog.isString(opt_data.value) || opt_data.value instanceof goog.soy.data.SanitizedContent), 'value', opt_data.value, '!goog.soy.data.SanitizedContent|null|string|undefined');
-  var attributes__soy15 = function() {
+  var attributes__soy16 = function() {
     incrementalDom.attr('class', 'custom-control custom-checkbox' + (inline ? ' custom-control-inline' : '') + (elementClasses ? ' ' + elementClasses : ''));
@@ -79,5 +82,5 @@ if (id) {
   incrementalDom.elementOpenStart('div');
-      attributes__soy15();
+      attributes__soy16();
   incrementalDom.elementOpenEnd();
-    $input({checked: indeterminate || checked, disabled: disabled, hideLabel: hideLabel, label: label, labelContent: labelContent, name: name, value: value}, null, opt_ijData);
+    $input({ariaLabelledBy: ariaLabelledBy, checked: indeterminate || checked, disabled: disabled, hideLabel: hideLabel, label: label, labelContent: labelContent, name: name, value: value}, null, opt_ijData);
   incrementalDom.elementClose('div');
@@ -88,2 +91,3 @@ }
  * @typedef {{
+ *  ariaLabelledBy: (!goog.soy.data.SanitizedContent|null|string|undefined),
  *  checked: (boolean|null|undefined),
@@ -110,2 +114,3 @@ *  disabled: (boolean|null|undefined),
  * @param {{
+ *  ariaLabelledBy: (!goog.soy.data.SanitizedContent|null|string|undefined),
  *  checked: (boolean|null|undefined),
@@ -127,2 +132,4 @@ *  disabled: (boolean|null|undefined),
   opt_data = opt_data || {};
+  /** @type {!goog.soy.data.SanitizedContent|null|string|undefined} */
+  var ariaLabelledBy = soy.asserts.assertType(opt_data.ariaLabelledBy == null || (goog.isString(opt_data.ariaLabelledBy) || opt_data.ariaLabelledBy instanceof goog.soy.data.SanitizedContent), 'ariaLabelledBy', opt_data.ariaLabelledBy, '!goog.soy.data.SanitizedContent|null|string|undefined');
   /** @type {boolean|null|undefined} */
@@ -143,3 +150,6 @@ var checked = soy.asserts.assertType(opt_data.checked == null || (goog.isBoolean(opt_data.checked) || opt_data.checked === 1 || opt_data.checked === 0), 'checked', opt_data.checked, 'boolean|null|undefined');
   incrementalDom.elementOpen('label');
-    var inputAttributes__soy55 = function() {
+    var inputAttributes__soy58 = function() {
+      if (ariaLabelledBy) {
+        incrementalDom.attr('aria-labelledby', ariaLabelledBy);
+      }
       if (checked) {
@@ -162,3 +172,3 @@ incrementalDom.attr('checked', 'checked');
     incrementalDom.elementOpenStart('input');
-        inputAttributes__soy55();
+        inputAttributes__soy58();
     incrementalDom.elementOpenEnd();
@@ -173,7 +183,7 @@ incrementalDom.elementClose('input');
     } else {
-      var spanLabelClasses__soy87 = '';
-      spanLabelClasses__soy87 += 'custom-control-description';
-      spanLabelClasses__soy87 += hideLabel ? ' sr-only' : '';
+      var spanLabelClasses__soy96 = '';
+      spanLabelClasses__soy96 += 'custom-control-description';
+      spanLabelClasses__soy96 += hideLabel ? ' sr-only' : '';
       incrementalDom.elementOpenStart('span');
-          incrementalDom.attr('class', spanLabelClasses__soy87);
+          incrementalDom.attr('class', spanLabelClasses__soy96);
       incrementalDom.elementOpenEnd();
@@ -188,2 +198,3 @@ soyIdom.print(label);
  * @typedef {{
+ *  ariaLabelledBy: (!goog.soy.data.SanitizedContent|null|string|undefined),
  *  checked: (boolean|null|undefined),
@@ -203,6 +214,6 @@ *  disabled: (boolean|null|undefined),
 
-exports.render.params = ["checked","disabled","elementClasses","hideLabel","id","indeterminate","inline","label","labelContent","name","value"];
-exports.render.types = {"checked":"bool","disabled":"bool","elementClasses":"string","hideLabel":"bool","id":"string","indeterminate":"bool","inline":"bool","label":"string","labelContent":"html","name":"string","value":"string"};
-exports.input.params = ["checked","disabled","hideLabel","label","labelContent","name","value"];
-exports.input.types = {"checked":"bool","disabled":"bool","hideLabel":"bool","label":"string","labelContent":"html","name":"string","value":"string"};
+exports.render.params = ["ariaLabelledBy","checked","disabled","elementClasses","hideLabel","id","indeterminate","inline","label","labelContent","name","value"];
+exports.render.types = {"ariaLabelledBy":"string","checked":"bool","disabled":"bool","elementClasses":"string","hideLabel":"bool","id":"string","indeterminate":"bool","inline":"bool","label":"string","labelContent":"html","name":"string","value":"string"};
+exports.input.params = ["ariaLabelledBy","checked","disabled","hideLabel","label","labelContent","name","value"];
+exports.input.types = {"ariaLabelledBy":"string","checked":"bool","disabled":"bool","hideLabel":"bool","label":"string","labelContent":"html","name":"string","value":"string"};
 templates = exports;
@@ -209,0 +220,0 @@ return exports;

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

74632

increased by7.65%

Lines of code

816

increased by5.43%

Dependency changes

• Updatedmetal-state@^2.15.0