wasm: add accessibility container to QWasmWindow

Add accessibility (a11y) container QWasmWindow. This
container should underlap the canvas with identical
geometry but ordered below.

Pick-to: 6.5
Change-Id: I7b91e3e69e3b1afa1b03ef7f7b7336e48f1a1594
Reviewed-by: Morten Johan Sørvig <morten.sorvig@qt.io>

3 files changed, 14 insertions, 0 deletions

diff --git a/src/plugins/platforms/wasm/qwasmcssstyle.cpp b/src/plugins/platforms/wasm/qwasmcssstyle.cpp
index a1c6b6a365..efbe4ddcc4 100644
--- a/src/plugins/platforms/wasm/qwasmcssstyle.cpp
+++ b/src/plugins/platforms/wasm/qwasmcssstyle.cpp
@@ -146,6 +146,11 @@ const char *Style = R"css(
     pointer-events: none;
 }
 
+.qt-window-a11y-container {
+    position: absolute;
+    z-index: -1;
+}
+
 .title-bar .image-button {
     width: 18px;
     height: 18px;
diff --git a/src/plugins/platforms/wasm/qwasmwindow.cpp b/src/plugins/platforms/wasm/qwasmwindow.cpp
index 07f73f5eb9..85920d618a 100644
--- a/src/plugins/platforms/wasm/qwasmwindow.cpp
+++ b/src/plugins/platforms/wasm/qwasmwindow.cpp
@@ -40,6 +40,7 @@ QWasmWindow::QWasmWindow(QWindow *w, QWasmCompositor *compositor, QWasmBackingSt
       m_qtWindow(m_document.call<emscripten::val>("createElement", emscripten::val("div"))),
       m_windowContents(m_document.call<emscripten::val>("createElement", emscripten::val("div"))),
       m_canvasContainer(m_document.call<emscripten::val>("createElement", emscripten::val("div"))),
+      m_a11yContainer(m_document.call<emscripten::val>("createElement", emscripten::val("div"))),
       m_canvas(m_document.call<emscripten::val>("createElement", emscripten::val("canvas")))
 {
     m_qtWindow.set("className", "qt-window");
@@ -59,6 +60,9 @@ QWasmWindow::QWasmWindow(QWindow *w, QWasmCompositor *compositor, QWasmBackingSt
     m_canvasContainer["classList"].call<void>("add", emscripten::val("qt-window-canvas-container"));
     m_canvasContainer.call<void>("appendChild", m_canvas);
 
+    m_canvasContainer.call<void>("appendChild", m_a11yContainer);
+    m_a11yContainer["classList"].call<void>("add", emscripten::val("qt-window-a11y-container"));
+
     compositor->screen()->element().call<void>("appendChild", m_qtWindow);
 
     const bool rendersTo2dContext = w->surfaceType() != QSurface::OpenGLSurface;
@@ -224,6 +228,8 @@ void QWasmWindow::setGeometry(const QRect &rect)
     m_qtWindow["style"].set("top", std::to_string(frameRect.top()) + "px");
     m_canvasContainer["style"].set("width", std::to_string(clientAreaRect.width()) + "px");
     m_canvasContainer["style"].set("height", std::to_string(clientAreaRect.height()) + "px");
+    m_a11yContainer["style"].set("width", std::to_string(clientAreaRect.width()) + "px");
+    m_a11yContainer["style"].set("height", std::to_string(clientAreaRect.height()) + "px");
 
     // Important for the title flexbox to shrink correctly
     m_windowContents["style"].set("width", std::to_string(clientAreaRect.width()) + "px");
diff --git a/src/plugins/platforms/wasm/qwasmwindow.h b/src/plugins/platforms/wasm/qwasmwindow.h
index af0353924f..5651495c74 100644
--- a/src/plugins/platforms/wasm/qwasmwindow.h
+++ b/src/plugins/platforms/wasm/qwasmwindow.h
@@ -73,6 +73,8 @@ public:
 
     std::string canvasSelector() const;
     emscripten::val context2d() { return m_context2d; }
+    emscripten::val a11yContainer() { return m_a11yContainer; }
+
 
 private:
     friend class QWasmScreen;
@@ -92,6 +94,7 @@ private:
     emscripten::val m_qtWindow;
     emscripten::val m_windowContents;
     emscripten::val m_canvasContainer;
+    emscripten::val m_a11yContainer;
     emscripten::val m_canvas;
     emscripten::val m_context2d = emscripten::val::undefined();