From 4c798dfd3403be6b070061603dbf850ee69ab7c4 Mon Sep 17 00:00:00 2001 From: chintankavathia Date: Fri, 12 Jun 2026 17:46:19 +0530 Subject: [PATCH] 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. --- .../custom-catalog--custom-catalog.yaml | 5 +- .../dashboard--mobile.yaml | 160 +++++++++----- .../dashboard--normal.yaml | 158 +++++++++----- .../dashboard--tablet.yaml | 153 +++++++++----- .../dashboard--weather-preplaced.yaml | 195 +++++++++--------- .../dashboard--weather-tablet.yaml | 185 +++++++++-------- .../si-gridstack-wrapper.component.html | 6 +- .../si-gridstack-wrapper.component.spec.ts | 12 ++ .../si-gridstack-wrapper.component.ts | 6 + .../si-widget-host.component.spec.ts | 14 ++ .../widget-host/si-widget-host.component.ts | 15 +- .../si-translatable-keys.interface.ts | 1 + 12 files changed, 556 insertions(+), 354 deletions(-) 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 4d60893924..f630006d87 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 @@ -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" \ 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..cde0c3fdef 100644 --- a/playwright/snapshots/dashboard.spec.ts-snapshots/dashboard--mobile.yaml +++ b/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 \ No newline at end of file + - 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+°/ \ 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 2dfe415c99..e532ac838a 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 @@ -83,6 +83,18 @@ describe('SiGridstackWrapperComponent', () => { expect(fixture.debugElement.queryAll(By.css('si-widget-host')).length).toBe(2); }); + + it('should group widgets as a labeled list when not editable', () => { + fixture = TestBed.createComponent(HostComponent); + host = fixture.componentInstance; + host.widgetCatalogMap = new Map([[TEST_WIDGET.id, TEST_WIDGET]]); + host.widgets = [TEST_WIDGET_CONFIG_0, TEST_WIDGET_CONFIG_1]; + fixture.detectChanges(); + + 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 90b6a69b57..794df41fd9 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 @@ -23,6 +23,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'; @@ -42,6 +43,7 @@ export interface GridWrapperEvent { @Component({ selector: 'si-gridstack-wrapper', + imports: [SiTranslatePipe], templateUrl: './si-gridstack-wrapper.component.html', styleUrl: './si-gridstack-wrapper.component.scss' }) @@ -90,6 +92,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 57a3c38456..325da41292 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 @@ -225,6 +225,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 3440e0a6b3..e028a41fa5 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 @@ -55,7 +55,13 @@ import { setupWidgetInstance } from '../../widget-loader'; templateUrl: './si-widget-host.component.html', styleUrl: './si-widget-host.component.scss', 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 { @@ -127,6 +133,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;