input number a11Y

src/Umbraco.Web.UI.Client/src/backoffice/shared/components/input-number-range/input-number-range.element.ts

@@ -18,6 +18,12 @@ export class UmbInputNumberRangeElement extends FormControlMixin(UmbLitElement)
 		`,
 	];
 
+	@property({type: String, attribute:'min-label'})
+	minLabel = "Low value"
+
+	@property({type: String, attribute:'max-label'})
+	maxLabel = "High value"
+
 	@state()
 	private _minValue?: number;
 	@property()
@@ -77,7 +83,7 @@ export class UmbInputNumberRangeElement extends FormControlMixin(UmbLitElement)
 
 
 	render() {
-		return html`<uui-input type="number" .value=${this._minValue} @input=${this._onMinInput}></uui-input> – <uui-input type="number" .value=${this._maxValue} @input=${this._onMaxInput}></uui-input>`;
+		return html`<uui-input type="number" .value=${this._minValue} @input=${this._onMinInput} label=${this.minLabel}></uui-input> – <uui-input type="number" .value=${this._maxValue} @input=${this._onMaxInput} label=${this.maxLabel}></uui-input>`;
 	}
 
 }

src/Umbraco.Web.UI.Client/src/backoffice/shared/components/input-number-range/input-number-range.test.ts

@@ -0,0 +1,20 @@
+import { expect, fixture, html } from '@open-wc/testing';
+import { UmbInputNumberRangeElement } from './input-number-range.element';
+import { defaultA11yConfig } from '@umbraco-cms/test-utils';
+describe('UmbPropertyEditorUINumberRangeElement', () => {
+  let element: UmbInputNumberRangeElement;
+
+  beforeEach(async () => {
+    element = await fixture(
+      html` <umb-input-number-range></umb-input-number-range> `
+    );
+  });
+
+  it('is defined with its own instance', () => {
+    expect(element).to.be.instanceOf(UmbInputNumberRangeElement);
+  });
+
+  it('passes the a11y audit', async () => {
+    await expect(element).shadowDom.to.be.accessible(defaultA11yConfig);
+  });
+});