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
Change-Id: I78ef5746da9e0d1584ee36dd0ca6ba476623a3de
Reviewed-by: Mikołaj Boc <Mikolaj.Boc@qt.io>
Reviewed-by: Morten Johan Sørvig <morten.sorvig@qt.io>

2 files changed, 16 insertions, 4 deletions

diff --git a/src/plugins/platforms/wasm/qwasmaccessibility.cpp b/src/plugins/platforms/wasm/qwasmaccessibility.cpp
index 523f94578b..072f65aa87 100644
--- a/src/plugins/platforms/wasm/qwasmaccessibility.cpp
+++ b/src/plugins/platforms/wasm/qwasmaccessibility.cpp
@@ -65,12 +65,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 409aad88c7..75b2aafa9a 100644
--- a/src/plugins/platforms/wasm/qwasmcssstyle.cpp
+++ b/src/plugins/platforms/wasm/qwasmcssstyle.cpp
@@ -208,6 +208,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