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

groups dashboard widgets as list in none edit mode so screen reader can allow to jump between widgets without going through content using keyboard.

Author: chintankavathia

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+°/