From 1faea46fb6aee440c82b91acb919e7380717ddc0 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Piotr=20Wierci=C5=84ski?= Date: Mon, 13 Mar 2023 12:53:11 +0100 Subject: [PATCH] Wasm: Hide "Enable screen reader" button in QWasmWindow MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 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 Reviewed-by: Morten Johan Sørvig --- src/plugins/platforms/wasm/qwasmaccessibility.cpp | 5 +---- src/plugins/platforms/wasm/qwasmcssstyle.cpp | 15 +++++++++++++++ 2 files changed, 16 insertions(+), 4 deletions(-) diff --git a/src/plugins/platforms/wasm/qwasmaccessibility.cpp b/src/plugins/platforms/wasm/qwasmaccessibility.cpp index 523f94578bc..072f65aa874 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("createElement", std::string("button")); button.set("innerText", std::string("Enable Screen Reader")); + button["classList"].call("add", emscripten::val("hidden-visually-read-by-screen-reader")); container.call("appendChild", button); - emscripten::val style = button["style"]; - style.set("width", "100%"); - style.set("height", "100%"); - auto enableContext = std::make_tuple(button, std::make_unique (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 409aad88c73..75b2aafa9a9 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