fix: keep invisible texts out of the view port (#3085)

Add negative coordinates to the a11y invisible texts to ensure they remain out of the view port. Already this is the case in most of the browsers, but on IE they can be still observed. The negative coordinates do not affect the a11y and do not prevent Screen Readers from announcing the texts.

FIXES: #2723
CLOSES: #2723

Author: ilhan007

packages/fiori/src/themes/InvisibleTextStyles.css

@@ -2,6 +2,7 @@
 	position: absolute;
 	clip: rect(1px,1px,1px,1px);
 	user-select: none;
-	left: 0;
-	top: 0;
+	left: -1000px; /* ensure the invisible texts are never part of the viewport */
+	top: -1000px;
+	pointer-events: none;
 }

packages/fiori/test/pages/Wizard_test.html

@@ -92,6 +92,7 @@
 							<ui5-switch id="sw"></ui5-switch>
 						</div>
 
+						<span id="scrollMarkerSt2"></span>
 						<div id="pureContent" style="height: 1800px; background-color: red; display:none;">
 						</div>
 					</div>
@@ -138,6 +139,8 @@
 					</div>
 				</div>
 
+				<span id="scrollMarkerSt3"></span>
+	
 				<ui5-button id="toStep22" design="Emphasized">Step 2</ui5-button>
 				<ui5-button id="toStep4" design="Emphasized">Step 4</ui5-button>
 			</ui5-wizard-step>

packages/fiori/test/specs/Wizard.spec.js

@@ -141,14 +141,15 @@ describe("Wizard general interaction", () => {
 	it("move to next step by scroll", () => {
 		const wiz = browser.$("#wizTest");
 		const step2 = browser.$("#st2");
+		const scrollMarker = browser.$("#scrollMarkerSt2");
 		const step2InHeader = wiz.shadow$(`[data-ui5-index="2"]`);
 		const inpSelectionChangeCounter =  browser.$("#inpSelectionChangeCounter");
 		const inpSelectionChangeCause =  browser.$("#inpSelectionChangeCause");
 
 		// act - scroll the 2nd step into view
 		// Note: scrollIntoView works in Chrome, but if we start executing the test on every browser,
 		// this test should be reworked.
-		step2.scrollIntoView();
+		scrollMarker.scrollIntoView();
 		browser.pause(500);
 
 		// assert - that second step in the content and in the header are properly selected
@@ -171,13 +172,14 @@ describe("Wizard general interaction", () => {
 		const btnToStep2 = browser.$("#toStep22");
 		const btnToStep3 = browser.$("#toStep3");
 		const step3 = browser.$("#st3");
+		const scrollMarker = browser.$("#scrollMarkerSt3");
 		const step3InHeader = wiz.shadow$(`[data-ui5-index="3"]`);
 		const inpSelectionChangeCounter =  browser.$("#inpSelectionChangeCounter");
 
 		btnToStep3.click(); // click to enable step 3
 		btnToStep2.click(); // click to get back to step 2
 		sw.click(); // click to dynamically expand content in step 2
-		step3.scrollIntoView(); // scroll to step 3
+		scrollMarker.scrollIntoView(); // scroll to step 3
 		browser.pause(500);
 
 		assert.strictEqual(step3.getAttribute("selected"), "true",

packages/main/src/themes/InvisibleTextStyles.css

@@ -2,6 +2,7 @@
 	position: absolute;
 	clip: rect(1px,1px,1px,1px);
 	user-select: none;
-	left: 0;
-	top: 0;
+	left: -1000px; /* ensure the invisible texts are never part of the viewport */
+	top: -1000px;
+	pointer-events: none;
 }