1berry/qtbase
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Wasm: Hide "Enable screen reader" button in QWasmWindow

Browse Source 
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>
This commit is contained in:
Piotr Wierciński 2023-03-13 12:53:11 +01:00
parent 5cea5fc80b
commit 1faea46fb6
2 changed files with 16 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
src/plugins/platforms/wasm/qwasmaccessibility.cpp
View File

@ -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)));

15
src/plugins/platforms/wasm/qwasmcssstyle.cpp
View File

@ -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