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`