dojo
diff --git a/‎package-lock.json
Copy file name to clipboard
+1-1Lines changed: 1 addition & 1 deletion b/‎package-lock.json
Copy file name to clipboard
+1-1Lines changed: 1 addition & 1 deletion
diff --git a/‎src/button/index.ts
Copy file name to clipboard
+5-4Lines changed: 5 additions & 4 deletions b/‎src/button/index.ts
Copy file name to clipboard
+5-4Lines changed: 5 additions & 4 deletions
diff --git a/‎src/button/tests/unit/Button.ts
Copy file name to clipboard
+1-1Lines changed: 1 addition & 1 deletion b/‎src/button/tests/unit/Button.ts
Copy file name to clipboard
+1-1Lines changed: 1 addition & 1 deletion
diff --git a/‎src/checkbox/index.ts
Copy file name to clipboard
+4-4Lines changed: 4 additions & 4 deletions b/‎src/checkbox/index.ts
Copy file name to clipboard
+4-4Lines changed: 4 additions & 4 deletions
diff --git a/‎src/checkbox/tests/unit/Checkbox.ts
Copy file name to clipboard
+1-1Lines changed: 1 addition & 1 deletion b/‎src/checkbox/tests/unit/Checkbox.ts
Copy file name to clipboard
+1-1Lines changed: 1 addition & 1 deletion
diff --git a/‎src/combobox/index.ts
Copy file name to clipboard
+8-8Lines changed: 8 additions & 8 deletions b/‎src/combobox/index.ts
Copy file name to clipboard
+8-8Lines changed: 8 additions & 8 deletions
diff --git a/‎src/combobox/tests/unit/ComboBox.ts
Copy file name to clipboard
+8-7Lines changed: 8 additions & 7 deletions b/‎src/combobox/tests/unit/ComboBox.ts
Copy file name to clipboard
+8-7Lines changed: 8 additions & 7 deletions
diff --git a/‎src/common/interfaces.d.ts
Copy file name to clipboard
+2-2Lines changed: 2 additions & 2 deletions b/‎src/common/interfaces.d.ts
Copy file name to clipboard
+2-2Lines changed: 2 additions & 2 deletions
diff --git a/‎src/common/tests/support/test-helpers.ts
Copy file name to clipboard
+6Lines changed: 6 additions & 0 deletions b/‎src/common/tests/support/test-helpers.ts
Copy file name to clipboard
+6Lines changed: 6 additions & 0 deletions
diff --git a/‎src/enhanced-text-input/index.ts
Copy file name to clipboard
+1-1Lines changed: 1 addition & 1 deletion b/‎src/enhanced-text-input/index.ts
Copy file name to clipboard
+1-1Lines changed: 1 addition & 1 deletion
@@ -17,6 +17,7 @@ export type ButtonType = 'submit' | 'reset' | 'button' | 'menu';
  * Properties that can be set on a Button component
  *
  * @property disabled       Whether the button is disabled or clickable
+ * @property widgetId       DOM id set on the root button node
  * @property popup       		Controls aria-haspopup, aria-expanded, and aria-controls for popup buttons
  * @property name           The button's name attribute
  * @property pressed        Indicates status of a toggle button
@@ -25,7 +26,7 @@ export type ButtonType = 'submit' | 'reset' | 'button' | 'menu';
  */
 export interface ButtonProperties extends ThemedProperties, InputEventProperties, PointerEventProperties, KeyEventProperties, CustomAriaProperties {
 	disabled?: boolean;
-	id?: string;
+	widgetId?: string;
 	popup?: { expanded?: boolean; id?: string; } | boolean;
 	name?: string;
 	pressed?: boolean;
@@ -41,7 +42,7 @@ export const ThemedBase = ThemedMixin(WidgetBase);
 	tag: 'dojo-button',
 	childType: CustomElementChildType.TEXT,
 	properties: [ 'disabled', 'pressed', 'popup', 'theme', 'aria', 'extraClasses' ],
-	attributes: [ 'id', 'name', 'value' ],
+	attributes: [ 'widgetId', 'name', 'value' ],
 	events: [
 		'onBlur',
 		'onChange',
@@ -124,7 +125,7 @@ export class ButtonBase<P extends ButtonProperties = ButtonProperties> extends T
 		let {
 			aria = {},
 			disabled,
-			id,
+			widgetId,
 			popup = false,
 			name,
 			pressed,
@@ -140,7 +141,7 @@ export class ButtonBase<P extends ButtonProperties = ButtonProperties> extends T
 		return v('button', {
 			classes: this.theme([ css.root, ...this.getModifierClasses() ]),
 			disabled,
-			id,
+			id: widgetId,
 			name,
 			type,
 			value,
 
@@ -42,7 +42,7 @@ registerSuite('Button', {
 			const h = harness(() => w(Button, {
 				type: 'submit',
 				name: 'bar',
-				id: 'qux',
+				widgetId: 'qux',
 				aria: {
 					describedBy: 'baz'
 				},
 
@@ -54,7 +54,7 @@ export const ThemedBase = ThemedMixin(WidgetBase);
 		'labelHidden',
 		'checked'
 	],
-	attributes: [ 'label', 'value', 'mode', 'offLabel', 'onLabel' ],
+	attributes: [ 'widgetId', 'label', 'value', 'mode', 'offLabel', 'onLabel' ],
 	events: [
 		'onBlur',
 		'onChange',
@@ -167,7 +167,7 @@ export class CheckboxBase<P extends CheckboxProperties = CheckboxProperties> ext
 			aria = {},
 			checked = false,
 			disabled,
-			id = this._uuid,
+			widgetId = this._uuid,
 			invalid,
 			label,
 			labelAfter = true,
@@ -184,7 +184,7 @@ export class CheckboxBase<P extends CheckboxProperties = CheckboxProperties> ext
 			v('div', { classes: this.theme(css.inputWrapper) }, [
 				...this.renderToggle(),
 				v('input', {
-					id,
+					id: widgetId,
 					...formatAriaProperties(aria),
 					classes: this.theme(css.input),
 					checked,
@@ -216,7 +216,7 @@ export class CheckboxBase<P extends CheckboxProperties = CheckboxProperties> ext
 				readOnly,
 				required,
 				hidden: labelHidden,
-				forId: id,
+				forId: widgetId,
 				secondary: true
 			}, [ label ]) : null
 		];
 
@@ -102,7 +102,7 @@ registerSuite('Checkbox', {
 					describedBy: 'foo'
 				},
 				checked: true,
-				id: 'foo',
+				widgetId: 'foo',
 				name: 'bar',
 				value: 'baz'
 			}), [ compareId ]);
 
@@ -28,7 +28,7 @@ import { customElement } from '@dojo/widget-core/decorators/customElement';
  * @property disabled           Prevents user interaction and styles content accordingly
  * @property getResultLabel     Can be used to get the text label of a result based on the underlying result object
  * @property getResultSelected  Can be used to highlight the selected result. Defaults to checking the result label.
- * @property id                 Optional id string for the combobox
+ * @property widgetId            Optional id string for the combobox, set on the text input
  * @property inputProperties    TextInput properties to set on the underlying input
  * @property invalid            Determines if this input is valid
  * @property isResultDisabled   Used to determine if an item should be disabled
@@ -49,7 +49,7 @@ export interface ComboBoxProperties extends ThemedProperties, LabeledProperties
 	disabled?: boolean;
 	getResultLabel?(result: any): string;
 	getResultSelected?(result: any): boolean;
-	id?: string;
+	widgetId?: string;
 	inputProperties?: TextInputProperties;
 	invalid?: boolean;
 	isResultDisabled?(result: any): boolean;
@@ -92,7 +92,7 @@ export const ThemedBase = I18nMixin(ThemedMixin(WidgetBase));
 		'required',
 		'results'
 	],
-	attributes: [ 'id', 'label', 'value' ],
+	attributes: [ 'widgetId', 'label', 'value' ],
 	events: [
 		'onBlur',
 		'onChange',
@@ -317,7 +317,7 @@ export class ComboBoxBase<P extends ComboBoxProperties = ComboBoxProperties> ext
 	protected renderInput(results: any[]): DNode {
 		const {
 			disabled,
-			id = this._idBase,
+			widgetId = this._idBase,
 			inputProperties = {},
 			invalid,
 			readOnly,
@@ -341,7 +341,7 @@ export class ComboBoxBase<P extends ComboBoxProperties = ComboBoxProperties> ext
 				owns: this._getMenuId()
 			},
 			disabled,
-			id,
+			widgetId,
 			invalid,
 			shouldFocus: focusInput,
 			onBlur: this._onInputBlur,
@@ -413,7 +413,7 @@ export class ComboBoxBase<P extends ComboBoxProperties = ComboBoxProperties> ext
 			w(Listbox, {
 				key: 'listbox',
 				activeIndex: this._activeIndex,
-				id: this._getMenuId(),
+				widgetId: this._getMenuId(),
 				visualFocus: this._menuHasVisualFocus,
 				optionData: results,
 				tabIndex: -1,
@@ -436,7 +436,7 @@ export class ComboBoxBase<P extends ComboBoxProperties = ComboBoxProperties> ext
 	render(): DNode {
 		const {
 			clearable = false,
-			id = this._idBase,
+			widgetId = this._idBase,
 			invalid,
 			label,
 			readOnly,
@@ -464,7 +464,7 @@ export class ComboBoxBase<P extends ComboBoxProperties = ComboBoxProperties> ext
 				readOnly,
 				required,
 				hidden: labelHidden,
-				forId: id
+				forId: widgetId
 			}, [ label ]) : null,
 			v('div', {
 				classes: this.theme(css.controls)
 
@@ -15,14 +15,15 @@ import * as css from '../../../theme/combobox.m.css';
 import {
 	createHarness,
 	compareId,
+	compareWidgetId,
 	compareAria,
 	compareAriaControls,
 	noop,
 	MockMetaMixin,
 	stubEvent
 } from '../../../common/tests/support/test-helpers';
 
-const harness = createHarness([ compareId, compareAria, compareAriaControls ]);
+const harness = createHarness([ compareId, compareWidgetId, compareAria, compareAriaControls ]);
 
 const testOptions: any[] = [
 	{
@@ -43,7 +44,7 @@ const testOptions: any[] = [
 const testProperties = {
 	clearable: true,
 	getResultLabel: (result: any) => result.label,
-	id: 'foo',
+	widgetId: 'foo',
 	label: 'foo',
 	results: testOptions,
 	value: 'one',
@@ -71,7 +72,7 @@ const getExpectedControls = function(useTestProperties: boolean, label: boolean,
 			},
 			disabled,
 			shouldFocus: callFocus,
-			id: useTestProperties ? 'foo' : '',
+			widgetId: useTestProperties ? 'foo' : '',
 			invalid,
 			readOnly,
 			required,
@@ -122,7 +123,7 @@ const getExpectedMenu = function(useTestProperties: boolean, open: boolean, over
 	}, [
 		w(Listbox, {
 			activeIndex: 0,
-			id: '',
+			widgetId: '',
 			key: 'listbox',
 			visualFocus: false,
 			optionData: testOptions,
@@ -405,7 +406,7 @@ registerSuite('ComboBox', {
 				placeholder: 'foo',
 				shouldFocus: false,
 				disabled: undefined,
-				id: '',
+				widgetId: '',
 				invalid: undefined,
 				readOnly: undefined,
 				required: undefined,
@@ -448,7 +449,7 @@ registerSuite('ComboBox', {
 					controls: '',
 					owns: ''
 				},
-				id: 'foo',
+				widgetId: 'foo',
 				shouldFocus: false,
 				disabled: true,
 				invalid: true,
@@ -507,7 +508,7 @@ registerSuite('ComboBox', {
 					controls: '',
 					owns: ''
 				},
-				id: 'foo',
+				widgetId: 'foo',
 				shouldFocus: false,
 				disabled: true,
 				invalid: false,
 
@@ -16,15 +16,15 @@ export interface CustomAriaProperties {
  * Properties that can be set on a input component
  *
  * @property disabled       Prevents the user from interacting with the form field
- * @property id             Adds an id property to the input node so custom labels are possible
+ * @property widgetId        Adds an id property to the input node so custom labels are possible
  * @property invalid        Indicates the value entered in the form field is invalid
  * @property name           The form widget's name
  * @property readOnly       Allows or prevents user interaction
  * @property required       Whether or not a value is required
  */
 export interface InputProperties {
 	disabled?: boolean;
-	id?: string;
+	widgetId?: string;
 	invalid?: boolean;
 	name?: string;
 	readOnly?: boolean;
 
@@ -20,6 +20,12 @@ export const compareId = {
 	comparator: isStringComparator
 };
 
+export const compareWidgetId = {
+	selector: '*',
+	property: 'widgetId',
+	comparator: isStringComparator
+};
+
 export const compareForId = {
 	selector: '*',
 	property: 'forId',
 
@@ -26,7 +26,7 @@ export interface EnhancedTextInputProperties extends TextInputProperties {
 		'invalid',
 		'readOnly'
 	],
-	attributes: [ 'placeholder', 'controls', 'type', 'minLength', 'maxLength', 'value', 'name' ],
+	attributes: [ 'widgetId', 'label', 'placeholder', 'controls', 'type', 'minLength', 'maxLength', 'value', 'name' ],
 	events: [
 		'onBlur',
 		'onChange',