Make the Tab and Dialogbox UI more visually appealing

Change-Id: I1061ba3fc3f4b795e7c97c8fa462f3c7fd0e4867
Reviewed-by: Morten Johan Sørvig <morten.sorvig@qt.io>

6 files changed, 52 insertions, 48 deletions

diff --git a/tests/manual/wasm/a11y/qml_basic_item/AboutDialog.qml b/tests/manual/wasm/a11y/qml_basic_item/AboutDialog.qml
index 441b6bef8e..d9e8e4661a 100644
--- a/tests/manual/wasm/a11y/qml_basic_item/AboutDialog.qml
+++ b/tests/manual/wasm/a11y/qml_basic_item/AboutDialog.qml
@@ -6,36 +6,41 @@ import QtQuick.Controls
 
 Dialog {
     id: aboutDialog
-    width: 400
+    width: 500
     height: 150
     title: "WebAssembly Dialog box"
-    Accessible.role: Accessible.Dialog
-    Accessible.name: title
-    Accessible.description: "About DialogBox."
     modal: true
-    Label {
-        id: labelInfo
-        anchors.centerIn: parent
-        text: "Accessibility Demo sample application developed in QML."
-        Accessible.role: Accessible.StaticText
-        Accessible.name: text
-        Accessible.description: "Purpose of this application."
-    }
+    Rectangle {
+        width: parent.width * 0.8
+        height: parent.height * 0.4
+        color: "lightgray"
+        anchors.fill: parent
+        ColumnLayout {
+            spacing: 2
+            anchors.fill: parent
 
-    Button {
-        id: closeButton
-        text: "Close"
-        anchors {
-            top: labelInfo.bottom
-            topMargin: 10
-            horizontalCenter: parent.horizontalCenter
-        }
+            Label {
+                id: labelInfo
+                Layout.alignment: Qt.AlignCenter
+                text: "Accessibility Demo sample application developed in QML."
+                Accessible.role: Accessible.StaticText
+                horizontalAlignment: Text.AlignHCenter
+                Accessible.name: text
+                Accessible.description: "Purpose of this application."
+                wrapMode: Text.WordWrap
+            }
 
-        Accessible.role: Accessible.Button
-        Accessible.name: text
-        Accessible.description: "To close the About Dialog box."
-        onClicked: {
-            aboutDialog.close()
+            Button {
+                id: closeButton
+                text: "Close"
+                Layout.alignment: Qt.AlignCenter
+                Accessible.role: Accessible.Button
+                Accessible.name: text
+                Accessible.description: "To close the About Dialog box."
+                onClicked: {
+                    aboutDialog.close()
+                }
+            }
         }
     }
 }
diff --git a/tests/manual/wasm/a11y/qml_basic_item/MeetingSummary.qml b/tests/manual/wasm/a11y/qml_basic_item/MeetingSummary.qml
index 9052ca3859..38e9ba0d7d 100644
--- a/tests/manual/wasm/a11y/qml_basic_item/MeetingSummary.qml
+++ b/tests/manual/wasm/a11y/qml_basic_item/MeetingSummary.qml
@@ -19,15 +19,16 @@ GroupBox {
 
     Flickable {
         id: flickable
-        width: 500
-        height: 450
+        width: parent.width - 10
+        height: parent.height - 10
         contentHeight: meetingHeader.contentHeight + textSummary.contentHeight + 50
-        contentWidth: 500
+        contentWidth: parent.width - 10
         clip: true
         boundsBehavior: Flickable.StopAtBounds
 
         ScrollBar.vertical: ScrollBar {
             policy: ScrollBar.AlwaysOn
+
             Accessible.role: Accessible.ScrollBar
             Accessible.name: "Vertical ScrollBar"
             Accessible.description: "Use this to scroll summary page"
@@ -72,7 +73,7 @@ GroupBox {
                 topMargin: 10
                 leftMargin: 10
             }
-            width: 300
+            width: parent.width - 50
             font.pixelSize: 16
             textFormat: TextEdit.RichText
             text: qsTr((" Occurrence:<b> %1 </b> <br>
diff --git a/tests/manual/wasm/a11y/qml_basic_item/MeetingTabs.qml b/tests/manual/wasm/a11y/qml_basic_item/MeetingTabs.qml
index e6d00f8a97..ea9f7fbfc1 100644
--- a/tests/manual/wasm/a11y/qml_basic_item/MeetingTabs.qml
+++ b/tests/manual/wasm/a11y/qml_basic_item/MeetingTabs.qml
@@ -1,4 +1,3 @@
-
 // Copyright (C) 2023 The Qt Company Ltd.
 // SPDX-License-Identifier: LicenseRef-Qt-Commercial OR BSD-3-Clause
 import QtQuick
@@ -7,6 +6,7 @@ import QtQuick.Controls
 
 Item {
     id: root
+    width: parent.width
     enum Types {
         Invitees,
         Scheduler,
@@ -17,7 +17,7 @@ Item {
     property alias currentIndex: meetingTabs.currentIndex
     TabBar {
         id: meetingTabs
-        width: parent.width
+        width: parent.width - 20
         TabButton {
             text: qsTr("Meeting Invitees")
             Accessible.role: Accessible.PageTab
@@ -43,7 +43,7 @@ Item {
     }
 
     StackLayout {
-        width: 550
+        width: parent.width - 20
         currentIndex: meetingTabs.currentIndex
         anchors {
             left: parent.left
diff --git a/tests/manual/wasm/a11y/qml_basic_item/WasmMenu.qml b/tests/manual/wasm/a11y/qml_basic_item/WasmMenu.qml
index 5e2a6f3401..af1aec6a0d 100644
--- a/tests/manual/wasm/a11y/qml_basic_item/WasmMenu.qml
+++ b/tests/manual/wasm/a11y/qml_basic_item/WasmMenu.qml
@@ -6,7 +6,6 @@ import QtQuick.Layouts
 
 MenuBar {
     Accessible.role: Accessible.MenuBar
-
     signal showTime
     signal showDate
     signal showAboutDialog
@@ -14,7 +13,7 @@ MenuBar {
         title: "&Chrono"
         MenuItem {
             text: "&Date"
-            Accessible.role: Accessible.MenuItem
+            Accessible.role: Accessible.ButtonMenu
             Accessible.name: text
             Accessible.description: text
             onTriggered: {
@@ -23,7 +22,7 @@ MenuBar {
         }
         MenuItem {
             text: "&Time"
-            Accessible.role: Accessible.MenuItem
+            Accessible.role: Accessible.ButtonMenu
             Accessible.name: text
             Accessible.description: text
             onTriggered: {
@@ -36,7 +35,7 @@ MenuBar {
 
         MenuItem {
             text: "&about"
-            Accessible.role: Accessible.MenuItem
+            Accessible.role: Accessible.ButtonMenu
             Accessible.name: text
             Accessible.description: text
             onTriggered: {
diff --git a/tests/manual/wasm/a11y/qml_basic_item/WasmToolBar.qml b/tests/manual/wasm/a11y/qml_basic_item/WasmToolBar.qml
index f9c0790181..7d7ce2285d 100644
--- a/tests/manual/wasm/a11y/qml_basic_item/WasmToolBar.qml
+++ b/tests/manual/wasm/a11y/qml_basic_item/WasmToolBar.qml
@@ -5,7 +5,7 @@ import QtQuick.Controls
 import QtQuick.Layouts
 
 ToolBar {
-    id:mainTooBar
+    id: mainTooBar
     signal cancelThisMeeting
     signal requestReadReceipt
     property bool cancelMeeting: false
@@ -14,7 +14,7 @@ ToolBar {
         spacing: 10
         Accessible.role: Accessible.ToolBar
         ToolButton {
-            id:cancelButton
+            id: cancelButton
             text: qsTr("Clear")
             Accessible.role: Accessible.Button
             Accessible.name: text
@@ -24,7 +24,7 @@ ToolBar {
             }
         }
         ToolButton {
-            id:readRequestButton
+            id: readRequestButton
             text: qsTr("Request receipt")
             Accessible.role: Accessible.Button
             Accessible.name: text
@@ -33,6 +33,5 @@ ToolBar {
                 requestReadReceipt()
             }
         }
-
     }
 }
diff --git a/tests/manual/wasm/a11y/qml_basic_item/main.qml b/tests/manual/wasm/a11y/qml_basic_item/main.qml
index 1b595c0880..3e6e53b1de 100644
--- a/tests/manual/wasm/a11y/qml_basic_item/main.qml
+++ b/tests/manual/wasm/a11y/qml_basic_item/main.qml
@@ -14,6 +14,9 @@ ApplicationWindow {
     }
     WasmMenu {
         id: wasmMenu
+        Accessible.focusable: true
+        focusPolicy: Qt.StrongFocus
+        focus: true
         property string timeCaption: "Initiated at :"
         anchors {
             left: parent.left
@@ -68,9 +71,8 @@ ApplicationWindow {
     }
 
     Rectangle {
-
-        width: 600
-        height: 550
+        width: parent.width - 40
+        height: parent.height - wasmToolbar.height - wasmMenu.height - 40
         border.color: "black"
         border.width: 1
         anchors {
@@ -83,12 +85,10 @@ ApplicationWindow {
         MeetingTabs {
             id: meetingTabs
             anchors {
-                left: parent.left
-                leftMargin: 5
-                top: parent.top
-                topMargin: 5
+                centerIn: parent
             }
-            width: 550
+            height: parent.height - 10
+            width: parent.width - 10
         }
     }
 }