fix: o-multi-select, use textContent rather than innerText (#1388)

This is to improve compatibility with JSDOM for users' tests. It shouldn't change the functionality of o-multi-select. However, they're not equivalent APIs, and it would be reasonable to use `innerText` or other web API which depends on CSS layout. We recommend users test components in a real browser, and can't guarantee changes to support executing component code in JSDOM.

components/o-multi-select/src/js/multi-select-options.js

@@ -110,7 +110,7 @@ function createOptionButton(option, index) {
 	button.setAttribute('aria-label', ` remove ${option.label} `);
 	button.className = 'o-multi-select__selected-options-button';
 	button.type = 'button';
-	button.innerText = option.label;
+	button.textContent = option.label;
 	const span = document.createElement('span');
 	span.classList = 'o-icons-icon o-icons-icon--cross';
 	button.appendChild(span);
@@ -134,7 +134,7 @@ export function createOption(idBase, option, index, selected) {
 	optionEl.id = `${idBase}-${index}`;
 	optionEl.className = 'o-multi-select-option';
 	optionEl.setAttribute('aria-selected', selected);
-	optionEl.innerText = option.label;
+	optionEl.textContent = option.label;
 	const tickSpan = document.createElement('span');
 	tickSpan.className = 'o-multi-select-option-tick';
 	optionEl.appendChild(tickSpan);

components/o-multi-select/src/js/multi-select.js

@@ -207,7 +207,7 @@ class MultiSelect {
 	_getCoreOptions() {
 		const options = this._coreWrapper.querySelectorAll('option');
 		this._coreOptions = options;
-		return [...options].map((option) => ({ label: option.innerText, value: option.value }));
+		return [...options].map((option) => ({ label: option.textContent, value: option.value }));
 	}
 
 	/**