Wasm: Hide "Enable screen reader" button in QWasmWindow

For each QWasmWindow, there is "Enable screeen reader" button added
for accessibility. It's hidden visually by z-ordering behind main
QWasmWindow div.
Sometimes the content of QWasmWindow contains transparent elements
and the underlying accessibility button gets visible.
This commit introduces new CSS class which hides elements visually,
but keeps it accessible for screen readers.

Fixes: QTBUG-111896
Task-number: SQUISH-16309
Change-Id: I78ef5746da9e0d1584ee36dd0ca6ba476623a3de
Reviewed-by: Mikołaj Boc <[email protected]>
Reviewed-by: Morten Johan Sørvig <[email protected]>
(cherry picked from commit 1faea46fb6aee440c82b91acb919e7380717ddc0)
Reviewed-by: Lorn Potter <[email protected]>

2 files changed, 16 insertions, 4 deletions

diff --git a/src/plugins/platforms/wasm/qwasmaccessibility.cpp b/src/plugins/platforms/wasm/qwasmaccessibility.cpp
index e98b9023c1b..b0e16d8b365 100644
--- a/src/plugins/platforms/wasm/qwasmaccessibility.cpp
+++ b/src/plugins/platforms/wasm/qwasmaccessibility.cpp
@@ -61,12 +61,9 @@ void QWasmAccessibility::addAccessibilityEnableButtonImpl(QWindow *window)
     emscripten::val document = getDocument(container);
     emscripten::val button = document.call<emscripten::val>("createElement", std::string("button"));
     button.set("innerText", std::string("Enable Screen Reader"));
+    button["classList"].call<void>("add", emscripten::val("hidden-visually-read-by-screen-reader"));
     container.call<void>("appendChild", button);
 
-    emscripten::val style = button["style"];
-    style.set("width", "100%");
-    style.set("height", "100%");
-
     auto enableContext = std::make_tuple(button, std::make_unique<qstdweb::EventCallback>
         (button, std::string("click"), [this](emscripten::val) { enableAccessibility(); }));
     m_enableButtons.insert(std::make_pair(window, std::move(enableContext)));
diff --git a/src/plugins/platforms/wasm/qwasmcssstyle.cpp b/src/plugins/platforms/wasm/qwasmcssstyle.cpp
index ae182b3181b..5005d1aedcf 100644
--- a/src/plugins/platforms/wasm/qwasmcssstyle.cpp
+++ b/src/plugins/platforms/wasm/qwasmcssstyle.cpp
@@ -206,6 +206,21 @@ const char *Style = R"css(
     filter: invert(0.6);
 }
 
+/* This will clip the content within 50% frame in 1x1 pixel area, preventing it
+    from being rendered on the page, but it should still be read by modern
+    screen readers */
+.hidden-visually-read-by-screen-reader {
+    visibility: visible;
+    clip: rect(1px, 1px, 1px, 1px);
+    clip-path: inset(50%);
+    height: 1px;
+    width: 1px;
+    margin: -1px;
+    overflow: hidden;
+    padding: 0;
+    position: absolute;
+}
+
 )css";
 
 } // namespace