fix(dashboards): use correct aria roles for widgets in none edit mode

playwright/snapshots/dashboard.spec.ts-snapshots/custom-catalog--custom-catalog.yaml

@@ -9,7 +9,8 @@
   - button "expand"
 - main:
   - heading "Dashboard with a custom library component" [level=2]
-  - button "Edit"
+  - button "Edit": 
   - heading "Your own dashboard" [level=3]
   - paragraph: No widgets have been added yet. Start right now and discover the world of widgets.
-  - button "Add widget"
+  - button "Add widget"
+  - list "Dashboard widgets"

playwright/snapshots/dashboard.spec.ts-snapshots/dashboard--mobile.yaml

@@ -19,60 +19,106 @@
     - option "Success"
     - option "Warning"
     - option "Danger"
-  - button "Edit"
-  - img "Buildings at scale"
-  - text: /Project Issues! \d+ Issues Number of contributing issues/
-  - link "Go to issues":
-    - /url: https://github.com/siemens/element/issues
-  - text: Bar Chart
-  - menubar:
-    - menuitem "Print"
-    - menuitem "Expand"
-    - menuitem "Toggle"
-  - text: Pie Chart
-  - menubar:
-    - menuitem "Expand"
-  - text: Full Speed Line Chart
-  - menubar:
-    - menuitem "Print"
-    - menuitem "Expand"
-    - menuitem "Toggle"
-  - text: List Widget
-  - menubar:
-    - menuitem "Sort descending"
-  - textbox "Search..."
-  - list:
-    - listitem:
-      - text: /\d+\+/
-      - link "Taj Mahal":
-        - /url: https://en.wikipedia.org/wiki/Taj_Mahal
-      - text: /The Taj Mahal is an ivory-white marble mausoleum \d+\.\d+/
-      - button "Building overview"
-    - listitem:
-      - text: info
-      - link "Tower of Pisa":
-        - /url: https://en.wikipedia.org/wiki/Leaning_Tower_of_Pisa
-      - text: The Leaning Tower of Pisa is the campanile of Pisa Cathedral. 9.7
-      - button "Building overview"
-    - listitem:
-      - text: 3 Eiffel Tower The Eiffel Tower is a wrought-iron lattice tower on the Champ de Mars in Paris. 8.3
-      - button "Building overview"
-    - listitem:
-      - text: /5 Colosseum \d+\.\d+/
-      - button "Building overview"
-    - listitem:
-      - text: 5 Burj Khalifa 4.5
-      - button "Building overview"
-    - listitem:
-      - text: /6 St\. Basil's Cathedral \d+\.\d+/
-      - button "Building overview"
-  - link "Go to...":
-    - /url: https://github.com/siemens/element/issues
-  - text: Timeline Widget
-  - list:
-    - listitem: /Today \d+:\d+ Title Description/
-    - listitem: /Today \d+:\d+ Title Description/
-    - listitem: /Today \d+:\d+ Title Description/
-    - listitem: /Today \d+:\d+ Title Description/
-  - link "Go to...":
-    - /url: https://github.com/siemens/element/issues
+  - button "Edit": 
+  - list "Dashboard widgets":
+    - listitem "Project Issues!":
+      - img "Buildings at scale"
+      - text: /Project Issues! \d+ Issues Number of contributing issues/
+      - link "Go to issues":
+        - /url: https://github.com/siemens/element/issues
+    - listitem "Bar Chart":
+      - text: ""
+      - menubar:
+        - menuitem "Print"
+        - menuitem "Expand"
+        - menuitem "Toggle"
+    - listitem "Pie Chart":
+      - text: ""
+      - menubar:
+        - menuitem "Expand"
+    - listitem "Full Speed"
+    - listitem "Line Chart":
+      - text: ""
+      - menubar:
+        - menuitem "Print"
+        - menuitem "Expand"
+        - menuitem "Toggle"
+    - listitem "List Widget":
+      - text: ""
+      - menubar:
+        - menuitem "Sort descending"
+      - textbox "Search..."
+      - list:
+        - listitem:
+          - text: /\d+\+/
+          - link "Taj Mahal":
+            - /url: https://en.wikipedia.org/wiki/Taj_Mahal
+          - text: /The Taj Mahal is an ivory-white marble mausoleum \d+\.\d+/
+          - button "Building overview"
+        - listitem:
+          - text: info
+          - link "Tower of Pisa":
+            - /url: https://en.wikipedia.org/wiki/Leaning_Tower_of_Pisa
+          - text: The Leaning Tower of Pisa is the campanile of Pisa Cathedral. 9.7
+          - button "Building overview"
+        - listitem:
+          - text: 3 Eiffel Tower The Eiffel Tower is a wrought-iron lattice tower on the Champ de Mars in Paris. 8.3
+          - button "Building overview"
+        - listitem:
+          - text: /5 Colosseum \d+\.\d+/
+          - button "Building overview"
+        - listitem:
+          - text: 5 Burj Khalifa 4.5
+          - button "Building overview"
+        - listitem:
+          - text: /6 St\. Basil's Cathedral \d+\.\d+/
+          - button "Building overview"
+      - link "Go to...":
+        - /url: https://github.com/siemens/element/issues
+    - listitem "Timeline Widget":
+      - text: ""
+      - list:
+        - listitem: /Today \d+:\d+ Title Description/
+        - listitem: /Today \d+:\d+ Title Description/
+        - listitem: /Today \d+:\d+ Title Description/
+        - listitem: /Today \d+:\d+ Title Description/
+      - link "Go to...":
+        - /url: https://github.com/siemens/element/issues
+    - listitem "Weather":
+      - text: ""
+      - menubar:
+        - menuitem "Expand"
+      - text: /\d+°/
+      - img "Sunny"
+      - text: /Sunny \d+° \d+°/
+      - list "Additional weather data":
+        - listitem: /Wind [\d,.]+[bkmBKM]+\/h/
+        - listitem: /Cloud cover \d+%/
+        - listitem: /Precipitation [\d,.]+[bkmBKM]+/
+        - listitem: UVI 1 low
+      - list:
+        - listitem:
+          - text: Mon
+          - img "Mon"
+          - 'img /Wind: [\d,.]+[bkmBKM]+\/h/'
+          - text: /\d+° \d+°/
+        - listitem:
+          - text: Tue
+          - img "Tue"
+          - 'img /Wind: [\d,.]+[bkmBKM]+\/h/'
+          - text: /\d+° \d+°/
+        - listitem:
+          - text: Wed
+          - img "Wed"
+          - 'img /Wind: [\d,.]+[bkmBKM]+\/h/'
+          - text: /\d+° \d+°/
+        - listitem:
+          - text: Thu
+          - img "Thu"
+          - 'img /Wind: [\d,.]+[bkmBKM]+\/h/'
+          - text: /\d+° \d+°/
+        - listitem:
+          - text: Fri
+          - img "Fri"
+          - 'img /Wind: [\d,.]+[bkmBKM]+\/h/'
+          - text: /\d+° \d+°/

playwright/snapshots/dashboard.spec.ts-snapshots/dashboard--normal.yaml

@@ -22,59 +22,105 @@
     - option "Warning"
     - option "Danger"
   - button "Edit"
-  - img "Buildings at scale"
-  - text: /Project Issues! \d+ Issues Number of contributing issues/
-  - link "Go to issues":
-    - /url: https://github.com/siemens/element/issues
-  - text: Bar Chart
-  - menubar:
-    - menuitem "Print"
-    - menuitem "Expand"
-    - menuitem "Toggle"
-  - text: Pie Chart
-  - menubar:
-    - menuitem "Expand"
-  - text: Full Speed Line Chart
-  - menubar:
-    - menuitem "Print"
-    - menuitem "Expand"
-    - menuitem "Toggle"
-  - text: List Widget
-  - menubar:
-    - menuitem "Sort descending"
-  - textbox "Search..."
-  - list:
-    - listitem:
-      - text: /\d+\+/
-      - link "Taj Mahal":
-        - /url: https://en.wikipedia.org/wiki/Taj_Mahal
-      - text: /The Taj Mahal is an ivory-white marble mausoleum \d+\.\d+/
-      - button "Building overview"
-    - listitem:
-      - text: info
-      - link "Tower of Pisa":
-        - /url: https://en.wikipedia.org/wiki/Leaning_Tower_of_Pisa
-      - text: The Leaning Tower of Pisa is the campanile of Pisa Cathedral. 9.7
-      - button "Building overview"
-    - listitem:
-      - text: 3 Eiffel Tower The Eiffel Tower is a wrought-iron lattice tower on the Champ de Mars in Paris. 8.3
-      - button "Building overview"
-    - listitem:
-      - text: /5 Colosseum \d+\.\d+/
-      - button "Building overview"
-    - listitem:
-      - text: 5 Burj Khalifa 4.5
-      - button "Building overview"
-    - listitem:
-      - text: /6 St\. Basil's Cathedral \d+\.\d+/
-      - button "Building overview"
-  - link "Go to...":
-    - /url: https://github.com/siemens/element/issues
-  - text: Timeline Widget
-  - list:
-    - listitem: /Today \d+:\d+ Title Description/
-    - listitem: /Today \d+:\d+ Title Description/
-    - listitem: /Today \d+:\d+ Title Description/
-    - listitem: /Today \d+:\d+ Title Description/
-  - link "Go to...":
-    - /url: https://github.com/siemens/element/issues
+  - list "Dashboard widgets":
+    - listitem "Project Issues!":
+      - img "Buildings at scale"
+      - text: /Project Issues! \d+ Issues Number of contributing issues/
+      - link "Go to issues":
+        - /url: https://github.com/siemens/element/issues
+    - listitem "Bar Chart":
+      - text: ""
+      - menubar:
+        - menuitem "Print"
+        - menuitem "Expand"
+        - menuitem "Toggle"
+    - listitem "Pie Chart":
+      - text: ""
+      - menubar:
+        - menuitem "Expand"
+    - listitem "Full Speed"
+    - listitem "Line Chart":
+      - text: ""
+      - menubar:
+        - menuitem "Print"
+        - menuitem "Expand"
+        - menuitem "Toggle"
+    - listitem "List Widget":
+      - text: ""
+      - menubar:
+        - menuitem "Sort descending"
+      - textbox "Search..."
+      - list:
+        - listitem:
+          - text: /\d+\+/
+          - link "Taj Mahal":
+            - /url: https://en.wikipedia.org/wiki/Taj_Mahal
+          - text: /The Taj Mahal is an ivory-white marble mausoleum \d+\.\d+/
+          - button "Building overview"
+        - listitem:
+          - text: info
+          - link "Tower of Pisa":
+            - /url: https://en.wikipedia.org/wiki/Leaning_Tower_of_Pisa
+          - text: The Leaning Tower of Pisa is the campanile of Pisa Cathedral. 9.7
+          - button "Building overview"
+        - listitem:
+          - text: 3 Eiffel Tower The Eiffel Tower is a wrought-iron lattice tower on the Champ de Mars in Paris. 8.3
+          - button "Building overview"
+        - listitem:
+          - text: /5 Colosseum \d+\.\d+/
+          - button "Building overview"
+        - listitem:
+          - text: 5 Burj Khalifa 4.5
+          - button "Building overview"
+        - listitem:
+          - text: /6 St\. Basil's Cathedral \d+\.\d+/
+          - button "Building overview"
+      - link "Go to...":
+        - /url: https://github.com/siemens/element/issues
+    - listitem "Timeline Widget":
+      - text: ""
+      - list:
+        - listitem: /Today \d+:\d+ Title Description/
+        - listitem: /Today \d+:\d+ Title Description/
+        - listitem: /Today \d+:\d+ Title Description/
+        - listitem: /Today \d+:\d+ Title Description/
+      - link "Go to...":
+        - /url: https://github.com/siemens/element/issues
+    - listitem "Weather":
+      - text: ""
+      - menubar:
+        - menuitem "Expand"
+      - text: /\d+°/
+      - img "Sunny"
+      - text: /Sunny \d+° \d+°/
+      - list "Additional weather data":
+        - listitem: /Wind [\d,.]+[bkmBKM]+\/h/
+        - listitem: /Cloud cover \d+%/
+        - listitem: /Precipitation [\d,.]+[bkmBKM]+/
+        - listitem: UVI 1 low
+      - list:
+        - listitem:
+          - text: Mon
+          - img "Mon"
+          - 'img /Wind: [\d,.]+[bkmBKM]+\/h/'
+          - text: /\d+° \d+°/
+        - listitem:
+          - text: Tue
+          - img "Tue"
+          - 'img /Wind: [\d,.]+[bkmBKM]+\/h/'
+          - text: /\d+° \d+°/
+        - listitem:
+          - text: Wed
+          - img "Wed"
+          - 'img /Wind: [\d,.]+[bkmBKM]+\/h/'
+          - text: /\d+° \d+°/
+        - listitem:
+          - text: Thu
+          - img "Thu"
+          - 'img /Wind: [\d,.]+[bkmBKM]+\/h/'
+          - text: /\d+° \d+°/
+        - listitem:
+          - text: Fri
+          - img "Fri"
+          - 'img /Wind: [\d,.]+[bkmBKM]+\/h/'
+          - text: /\d+° \d+°/