diff --git a/playwright/snapshots/dashboard.spec.ts-snapshots/custom-catalog--custom-catalog.yaml b/playwright/snapshots/dashboard.spec.ts-snapshots/custom-catalog--custom-catalog.yaml index 3fbb656361..ffacf71e0c 100644 --- a/playwright/snapshots/dashboard.spec.ts-snapshots/custom-catalog--custom-catalog.yaml +++ b/playwright/snapshots/dashboard.spec.ts-snapshots/custom-catalog--custom-catalog.yaml @@ -12,4 +12,5 @@ - button "Edit" - text: Your own dashboard - paragraph: No widgets have been added yet. Start right now and discover the world of widgets. - - button "Add widget" \ No newline at end of file + - button "Add widget" + - list "Dashboard widgets" \ No newline at end of file diff --git a/playwright/snapshots/dashboard.spec.ts-snapshots/dashboard--mobile.yaml b/playwright/snapshots/dashboard.spec.ts-snapshots/dashboard--mobile.yaml index 4e8838cdc9..751f941b4c 100644 --- a/playwright/snapshots/dashboard.spec.ts-snapshots/dashboard--mobile.yaml +++ b/playwright/snapshots/dashboard.spec.ts-snapshots/dashboard--mobile.yaml @@ -20,59 +20,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 \ No newline at end of file + - 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+°/ \ No newline at end of file diff --git a/playwright/snapshots/dashboard.spec.ts-snapshots/dashboard--normal.yaml b/playwright/snapshots/dashboard.spec.ts-snapshots/dashboard--normal.yaml index 985ddecad0..4ef9a453c5 100644 --- a/playwright/snapshots/dashboard.spec.ts-snapshots/dashboard--normal.yaml +++ b/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 \ No newline at end of file + - 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+°/ \ No newline at end of file diff --git a/playwright/snapshots/dashboard.spec.ts-snapshots/dashboard--tablet.yaml b/playwright/snapshots/dashboard.spec.ts-snapshots/dashboard--tablet.yaml index 985ddecad0..c0e7aa473a 100644 --- a/playwright/snapshots/dashboard.spec.ts-snapshots/dashboard--tablet.yaml +++ b/playwright/snapshots/dashboard.spec.ts-snapshots/dashboard--tablet.yaml @@ -22,59 +22,100 @@ - 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 \ No newline at end of file + - 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" + - text: /\d+° \d+°/ + - listitem: + - text: Tue + - img "Tue" + - text: /\d+° \d+°/ + - listitem: + - text: Wed + - img "Wed" + - text: /\d+° \d+°/ + - listitem: + - text: Thu + - img "Thu" + - text: /\d+° \d+°/ + - listitem: + - text: Fri + - img "Fri" + - text: /\d+° \d+°/ \ No newline at end of file diff --git a/playwright/snapshots/dashboard.spec.ts-snapshots/dashboard--weather-preplaced.yaml b/playwright/snapshots/dashboard.spec.ts-snapshots/dashboard--weather-preplaced.yaml index 9be87844b1..4ef9a453c5 100644 --- a/playwright/snapshots/dashboard.spec.ts-snapshots/dashboard--weather-preplaced.yaml +++ b/playwright/snapshots/dashboard.spec.ts-snapshots/dashboard--weather-preplaced.yaml @@ -22,96 +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 - - text: Weather - - 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+°/ \ No newline at end of file + - 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+°/ \ No newline at end of file diff --git a/playwright/snapshots/dashboard.spec.ts-snapshots/dashboard--weather-tablet.yaml b/playwright/snapshots/dashboard.spec.ts-snapshots/dashboard--weather-tablet.yaml index 815f141614..c0e7aa473a 100644 --- a/playwright/snapshots/dashboard.spec.ts-snapshots/dashboard--weather-tablet.yaml +++ b/playwright/snapshots/dashboard.spec.ts-snapshots/dashboard--weather-tablet.yaml @@ -22,91 +22,100 @@ - 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 - - text: Weather - - 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" - - text: /\d+° \d+°/ - - listitem: - - text: Tue - - img "Tue" - - text: /\d+° \d+°/ - - listitem: - - text: Wed - - img "Wed" - - text: /\d+° \d+°/ - - listitem: - - text: Thu - - img "Thu" - - text: /\d+° \d+°/ - - listitem: - - text: Fri - - img "Fri" - - text: /\d+° \d+°/ \ No newline at end of file + - 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" + - text: /\d+° \d+°/ + - listitem: + - text: Tue + - img "Tue" + - text: /\d+° \d+°/ + - listitem: + - text: Wed + - img "Wed" + - text: /\d+° \d+°/ + - listitem: + - text: Thu + - img "Thu" + - text: /\d+° \d+°/ + - listitem: + - text: Fri + - img "Fri" + - text: /\d+° \d+°/ \ No newline at end of file diff --git a/projects/dashboards-ng/src/components/gridstack-wrapper/si-gridstack-wrapper.component.html b/projects/dashboards-ng/src/components/gridstack-wrapper/si-gridstack-wrapper.component.html index 2d24cbc63d..652cf80f8d 100644 --- a/projects/dashboards-ng/src/components/gridstack-wrapper/si-gridstack-wrapper.component.html +++ b/projects/dashboards-ng/src/components/gridstack-wrapper/si-gridstack-wrapper.component.html @@ -1,3 +1,7 @@ -
+
diff --git a/projects/dashboards-ng/src/components/gridstack-wrapper/si-gridstack-wrapper.component.spec.ts b/projects/dashboards-ng/src/components/gridstack-wrapper/si-gridstack-wrapper.component.spec.ts index 8b903b2450..f0d661e575 100644 --- a/projects/dashboards-ng/src/components/gridstack-wrapper/si-gridstack-wrapper.component.spec.ts +++ b/projects/dashboards-ng/src/components/gridstack-wrapper/si-gridstack-wrapper.component.spec.ts @@ -84,6 +84,17 @@ describe('SiGridstackWrapperComponent', () => { expect(fixture.debugElement.queryAll(By.css('si-widget-host'))).toHaveLength(2); }); + + it('should group widgets as a labeled list when not editable', async () => { + await createComponent( + [TEST_WIDGET_CONFIG_0, TEST_WIDGET_CONFIG_1], + new Map([[TEST_WIDGET.id, TEST_WIDGET]]) + ); + + const gridStack = fixture.nativeElement.querySelector('.grid-stack'); + expect(gridStack.getAttribute('role')).toBe('list'); + expect(gridStack.getAttribute('aria-label')).toBe('Dashboard widgets'); + }); }); describe('updating grid items', () => { diff --git a/projects/dashboards-ng/src/components/gridstack-wrapper/si-gridstack-wrapper.component.ts b/projects/dashboards-ng/src/components/gridstack-wrapper/si-gridstack-wrapper.component.ts index bb846648e2..2648008022 100644 --- a/projects/dashboards-ng/src/components/gridstack-wrapper/si-gridstack-wrapper.component.ts +++ b/projects/dashboards-ng/src/components/gridstack-wrapper/si-gridstack-wrapper.component.ts @@ -24,6 +24,7 @@ import { ViewContainerRef, WritableSignal } from '@angular/core'; +import { SiTranslatePipe, t } from '@siemens/element-translate-ng/translate'; import { GridItemHTMLElement, GridStack, GridStackNode, GridStackOptions } from 'gridstack'; import { DEFAULT_GRIDSTACK_OPTIONS, GridConfig } from '../../model/gridstack.model'; @@ -43,6 +44,7 @@ export interface GridWrapperEvent { @Component({ selector: 'si-gridstack-wrapper', + imports: [SiTranslatePipe], templateUrl: './si-gridstack-wrapper.component.html', styleUrl: './si-gridstack-wrapper.component.scss', changeDetection: ChangeDetectionStrategy.Default @@ -92,6 +94,10 @@ export class SiGridstackWrapperComponent implements OnInit, OnChanges { readonly gridstackContainer = viewChild('gridstackContainer', { read: ViewContainerRef }); + protected readonly a11yWidgetsListLabel = t( + () => $localize`:@@DASHBOARD.A11Y.WIDGETS_LIST:Dashboard widgets` + ); + private grid!: GridStack; private markedForRender: WidgetConfig[] = []; private readonly gridItems = signal< diff --git a/projects/dashboards-ng/src/components/widget-host/si-widget-host.component.spec.ts b/projects/dashboards-ng/src/components/widget-host/si-widget-host.component.spec.ts index 3569dcaca7..513790d759 100644 --- a/projects/dashboards-ng/src/components/widget-host/si-widget-host.component.spec.ts +++ b/projects/dashboards-ng/src/components/widget-host/si-widget-host.component.spec.ts @@ -236,6 +236,20 @@ describe('SiWidgetHostComponent', () => { expect(cardEl.getAttribute('tabindex')).toBeNull(); }); + it('should expose the host as a labeled list item when not editable', () => { + fixture.componentRef.setInput('editable', false); + fixture.detectChanges(); + expect(hostEl.getAttribute('role')).toBe('listitem'); + expect(hostEl.getAttribute('aria-roledescription')).toBe('widget'); + expect(hostEl.getAttribute('aria-label')).toBe('Test'); + }); + + it('should not expose list item semantics on the host when editable', () => { + expect(hostEl.getAttribute('role')).toBeNull(); + expect(hostEl.getAttribute('aria-roledescription')).toBeNull(); + expect(hostEl.getAttribute('aria-label')).toBeNull(); + }); + it('should activate keyboard mode on Enter', () => { cardEl.dispatchEvent(new KeyboardEvent('keydown', { key: 'Enter', bubbles: true })); expect(component.keyboardActive()).toBe(true); diff --git a/projects/dashboards-ng/src/components/widget-host/si-widget-host.component.ts b/projects/dashboards-ng/src/components/widget-host/si-widget-host.component.ts index 72d9e52550..7f0dfff36b 100644 --- a/projects/dashboards-ng/src/components/widget-host/si-widget-host.component.ts +++ b/projects/dashboards-ng/src/components/widget-host/si-widget-host.component.ts @@ -57,7 +57,13 @@ import { setupWidgetInstance } from '../../widget-loader'; styleUrl: './si-widget-host.component.scss', changeDetection: ChangeDetectionStrategy.OnPush, host: { - class: 'grid-stack-item' + class: 'grid-stack-item', + // In non-edit mode, expose each widget as a labeled list item so screen + // readers group the widgets and let users jump between them. In edit mode + // the inner card carries the interactive `application` role instead. + '[attr.role]': "editable() ? null : 'listitem'", + '[attr.aria-roledescription]': "editable() ? null : 'widget'", + '[attr.aria-label]': 'editable() || !widgetAriaLabel() ? null : widgetAriaLabel()' } }) export class SiWidgetHostComponent implements OnInit, OnChanges { @@ -129,6 +135,13 @@ export class SiWidgetHostComponent implements OnInit, OnChanges { () => $localize`:@@DASHBOARD.WIDGET.A11Y.DESCRIPTION:Press Enter or Space to activate. Then use arrow keys to move, Shift+arrow keys to resize, Escape to exit.` ); + protected readonly widgetAriaLabel = computed(() => { + const widgetHeading = this.widgetConfig().heading; + if (widgetHeading) { + return this.translateService.translateSync(widgetHeading); + } + return null; + }); widgetInstance?: WidgetInstance; widgetRef?: ComponentRef; diff --git a/projects/dashboards-ng/translate/si-translatable-keys.interface.ts b/projects/dashboards-ng/translate/si-translatable-keys.interface.ts index 75aeddc3f3..cf337193ac 100644 --- a/projects/dashboards-ng/translate/si-translatable-keys.interface.ts +++ b/projects/dashboards-ng/translate/si-translatable-keys.interface.ts @@ -3,6 +3,7 @@ // Auto-generated file. Run 'npx update-translatable-keys' to update. export interface SiTranslatableKeys { + 'DASHBOARD.A11Y.WIDGETS_LIST'?: string; 'DASHBOARD.ADD_WIDGET'?: string; 'DASHBOARD.CANCEL'?: string; 'DASHBOARD.EDIT'?: string;