diff --git a/components/inputs/demo/input-number.html b/components/inputs/demo/input-number.html
index 574127c2096..c0ce448cadd 100644
--- a/components/inputs/demo/input-number.html
+++ b/components/inputs/demo/input-number.html
@@ -25,6 +25,13 @@
Hidden Label
+
+ Hidden Label Different from Visible Label
+
+
+
+
+
Required
diff --git a/components/inputs/input-number.js b/components/inputs/input-number.js
index e4ed9ec79aa..317245ca53b 100644
--- a/components/inputs/input-number.js
+++ b/components/inputs/input-number.js
@@ -95,6 +95,13 @@ class InputNumber extends FocusMixin(LabelledMixin(SkeletonMixin(FormElementMixi
* @type {boolean}
*/
disabled: { type: Boolean },
+ /**
+ * ACCESSIBILITY: Hidden label, different from `label`, to be used on the input to provide more context for screenreader users.
+ * To be used only if `label` is defined and `label-hidden` is NOT used.
+ * Note that screenreader users will likely NOT hear the `label`.
+ * @type {string}
+ */
+ hiddenLabel: { attribute: 'hidden-label', type: String },
/**
* ADVANCED: Hide the alert icon when input is invalid
* @type {boolean}
@@ -333,12 +340,17 @@ class InputNumber extends FocusMixin(LabelledMixin(SkeletonMixin(FormElementMixi
this._updateFormattedValue();
}
});
+
+ if (this.hiddenLabel && this.label && this.labelHidden) {
+ console.warn('d2l-input-number: Define the label with only label and label-hidden');
+ }
}
render() {
const valueAlign = (this.valueAlign === 'end') ? 'end' : 'start';
return html`