fix(ui5-label,ui5-input,ui5-list,ui5-tabcontainer,ui5-table,ui5-wheel…

…slider): special character support for id (#7634)

fix(ui5-label,ui5-input,ui5-list,ui5-tabcontainer,ui5-table,ui5-wheelslider): fix the special
character support for id in several components

Special character in id like `":this-is-id"` should be supported by the components like
`<ui5-label>`. This PR fixed the support for special id like this for several components.

Fixes #7633

CONTRIBUTING.md

@@ -10,7 +10,7 @@ You are welcome to contribute code to the UI5 Web Components in order to fix bug
 There are three important things to know:
 
 1. You must be aware of the Apache License (which describes contributions) and **accept the Developer Certificate of Origin**.
-2. Follow our **[Development Conventions and Guidelines](https://sap.github.io/ui5-webcomponents/playground/contributing/conventions-and-guidelines/)**.
+2. Follow our **[Development Conventions and Guidelines](https://sap.github.io/ui5-webcomponents/playground/?path=/docs/docs-contributing-conventions-and-guidelines--docs)**.
 3. **Not all proposed contributions can be accepted**. Some features may just fit a third-party add-on better. The code must match the overall direction of the UI5 Web Components and improve it. So there should be some "bang for the byte". For most bug fixes this is a given, but a major feature implementation first needs to be discussed with one of the committers. Possibly, one who touched the related code or module recently. The more effort you invest, the better you should clarify in advance whether the contribution will match the project's direction. The best way would be to just open an enhancement ticket in the issue tracker to discuss the feature you plan to implement (make it clear that you intend to contribute). We will then forward the proposal to the respective code owner. This avoids disappointment.
 
 ## Developer Certificate of Origin (DCO)
@@ -21,7 +21,7 @@ Due to legal reasons, contributors will be asked to accept a DCO before they sub
 1. Make sure the change is welcome (see [General Remarks](#general-remarks)).
 1. Create a branch by forking the relevant UI5 Web Components repository and apply your change.
 1. Commit and push your change on that branch.
-    - **Please follow our [Development Conventions and Guidelines](https://sap.github.io/ui5-webcomponents/playground/contributing/conventions-and-guidelines/).**
+    - **Please follow our [Development Conventions and Guidelines](https://sap.github.io/ui5-webcomponents/playground/?path=/docs/docs-contributing-conventions-and-guidelines--docs).**
 1. Create a pull request in the UI5 Web Components repository.
 1. Follow the link posted by the CLA assistant to your pull request and accept it, as described above.
 1. Wait for our code review and approval, possibly enhancing your change on request.

packages/main/src/Input.ts

@@ -1491,7 +1491,7 @@ class Input extends UI5Element implements SuggestionComponent, IFormElement {
 	}
 
 	announceSelectedItem() {
-		const invisibleText = this.shadowRoot!.querySelector(`#${this._id}-selectionText`)!;
+		const invisibleText = this.shadowRoot!.querySelector(`[id="${this._id}-selectionText"]`)!;
 
 		invisibleText.textContent = this.itemSelectionAnnounce;
 	}

packages/main/src/Label.ts

@@ -119,7 +119,7 @@ class Label extends UI5Element {
 			return;
 		}
 
-		const elementToFocus = (this.getRootNode() as HTMLElement).querySelector(`#${this.for}`) as HTMLElement;
+		const elementToFocus = (this.getRootNode() as HTMLElement).querySelector(`[id="${this.for}"]`) as HTMLElement;
 		if (elementToFocus) {
 			elementToFocus.focus();
 		}

packages/main/src/List.ts

@@ -1041,7 +1041,7 @@ class List extends UI5Element {
 	}
 
 	getGrowingButton() {
-		return this.shadowRoot!.querySelector(`#${this._id}-growing-btn`) as HTMLElement;
+		return this.shadowRoot!.querySelector(`[id="${this._id}-growing-btn"]`) as HTMLElement;
 	}
 
 	/**
@@ -1127,14 +1127,14 @@ class List extends UI5Element {
 
 	getAfterElement() {
 		if (!this._afterElement) {
-			this._afterElement = this.shadowRoot!.querySelector(`#${this._id}-after`) as HTMLElement;
+			this._afterElement = this.shadowRoot!.querySelector(`[id="${this._id}-after"]`) as HTMLElement;
 		}
 		return this._afterElement;
 	}
 
 	getBeforeElement() {
 		if (!this._beforeElement) {
-			this._beforeElement = this.shadowRoot!.querySelector(`#${this._id}-before`) as HTMLElement;
+			this._beforeElement = this.shadowRoot!.querySelector(`[id="${this._id}-before"]`) as HTMLElement;
 		}
 		return this._beforeElement;
 	}

packages/main/src/TabContainer.ts

@@ -469,7 +469,7 @@ class TabContainer extends UI5Element {
 	_setItemsPrivateProperties(items: Array<ITab>) {
 		// set real dom ref to all items, then return only the tabs for further processing
 		const allTabs = items.filter(item => {
-			item._getElementInStrip = () => this.getDomRef()!.querySelector(`#${item._id}`);
+			item._getElementInStrip = () => this.getDomRef()!.querySelector(`[id="${item._id}"]`);
 			return !item.isSeparator;
 		});
 

packages/main/src/Table.ts

@@ -918,15 +918,15 @@ class Table extends UI5Element {
 
 	_getAfterForwardElement(): HTMLElement {
 		if (!this._afterElement) {
-			this._afterElement = this.shadowRoot!.querySelector(`#${this._id}-after`)!;
+			this._afterElement = this.shadowRoot!.querySelector(`[id="${this._id}-after"]`)!;
 		}
 
 		return this._afterElement;
 	}
 
 	_getBeforeForwardElement(): HTMLElement {
 		if (!this._beforeElement) {
-			this._beforeElement = this.shadowRoot!.querySelector(`#${this._id}-before`)!;
+			this._beforeElement = this.shadowRoot!.querySelector(`[id="${this._id}-before"]`)!;
 		}
 
 		return this._beforeElement;

packages/main/src/WheelSlider.ts

@@ -168,7 +168,7 @@ class WheelSlider extends UI5Element {
 
 	onAfterRendering() {
 		if (!this._scroller.scrollContainer) {
-			this._scroller.scrollContainer = this.shadowRoot!.querySelector(`#${this._id}--wrapper`)!;
+			this._scroller.scrollContainer = this.shadowRoot!.querySelector(`[id="${this._id}--wrapper"]`)!;
 		}
 
 		if (!this.expanded) {

packages/main/test/specs/DateTimePicker.spec.js

@@ -4,19 +4,19 @@ const openPickerById = async (id, options) => {
 	await browser.$(`#${id}`).scrollIntoView();
 
 	return browser.executeAsync((id, options, done) => {
-		done(document.querySelector(`#${id}`).openPicker(options));
+		done(document.querySelector(`[id="${id}"]`).openPicker(options));
 	}, id, options);
 };
 
 const closePickerById = id => {
 	return browser.executeAsync((id, done) => {
-		done(document.querySelector(`#${id}`).closePicker());
+		done(document.querySelector(`[id="${id}"]`).closePicker());
 	}, id);
 };
 
 const isPickerOpen = id => {
 	return browser.executeAsync((id, done) => {
-		done(document.querySelector(`#${id}`).isOpen());
+		done(document.querySelector(`[id="${id}"]`).isOpen());
 	}, id);
 };
 

packages/main/test/specs/MultiComboBox.spec.js

@@ -2,7 +2,7 @@ import { assert } from "chai";
 
 const getTokenizerPopoverId = async (mcbId) => {
 	return await browser.executeAsync(async (mcbId, done) => {
-		const input = document.querySelector(`#${mcbId}`);
+		const input = document.querySelector(`[id="${mcbId}"]`);
 		const staticAreaItem = await (input.shadowRoot.querySelector("ui5-tokenizer").getStaticAreaItemDomRef());
 
 		done(staticAreaItem.host.classList[0]);
@@ -1592,7 +1592,6 @@ describe("MultiComboBox general interaction", () => {
 					mcNMoreLabelText: mi.constructor.i18nBundle.getText(window["sap-ui-webcomponents-bundle"].defaultTexts.MULTIINPUT_SHOW_MORE_TOKENS, 1)
 				});
 			});
-
 			assert.strictEqual(await nItemsLabel.getText(), resourceBundleText.mcItemsLabelText, "Text should be 2 Items");
 			assert.strictEqual(await nMoreLabel.getText(), resourceBundleText.mcNMoreLabelText, "Text should be 1 More");
 		});

packages/main/test/specs/MultiInput.mobile.spec.js

@@ -2,7 +2,7 @@ import { assert } from "chai";
 
 const getTokenizerPopoverId = async (inputId) => {
 	return await browser.executeAsync(async (inputId, done) => {
-		const input = document.querySelector(`#${inputId}`);
+		const input = document.querySelector(`[id="${inputId}"]`);
 		const staticAreaItem = await (input.shadowRoot.querySelector("ui5-tokenizer").getStaticAreaItemDomRef());
 
 		done(staticAreaItem.host.classList[0]);

packages/main/test/specs/MultiInput.spec.js

@@ -2,7 +2,7 @@ import { assert } from "chai";
 
 const getTokenizerPopoverId = async (inputId) => {
 	return await browser.executeAsync(async (inputId, done) => {
-		const input = document.querySelector(`#${inputId}`);
+		const input = document.querySelector(`[id="${inputId}"]`);
 		const staticAreaItem = await (input.shadowRoot.querySelector("ui5-tokenizer").getStaticAreaItemDomRef());
 
 		done(staticAreaItem.host.classList[0]);