diff options
| author | Grigorii K. Shartsev <me@shgk.me> | 2023-10-23 13:35:25 +0200 |
|---|---|---|
| committer | Grigorii K. Shartsev <me@shgk.me> | 2025-05-29 09:18:57 +0200 |
| commit | 8ba8c26053eb7f48451c81eba06714eafb6e01b7 (patch) | |
| tree | c8d64cac2f2bde611a1651f41118a75eb6f33c83 | |
| parent | b7215c932c96e6a7001c26226c7e7eede0ef1368 (diff) | |
| download | nextcloud-server-8ba8c26053eb7f48451c81eba06714eafb6e01b7.tar.gz nextcloud-server-8ba8c26053eb7f48451c81eba06714eafb6e01b7.zip | |
perf(dashboard): lags on dashboard items drag
- `aria-labelledby` is not needed here, it is a hidden icon
- `visually-hidden` has transformations that have huge performance
impact in combination with other transformations, for example, on
draggable
Signed-off-by: Grigorii K. Shartsev <me@shgk.me>
| -rw-r--r-- | apps/dashboard/src/DashboardApp.vue | 25 |
1 files changed, 4 insertions, 21 deletions
diff --git a/apps/dashboard/src/DashboardApp.vue b/apps/dashboard/src/DashboardApp.vue index 42879a5fc0f..afc874be2c9 100644 --- a/apps/dashboard/src/DashboardApp.vue +++ b/apps/dashboard/src/DashboardApp.vue @@ -24,20 +24,10 @@ class="panel"> <div class="panel--header"> <h2> - <img v-if="apiWidgets[panels[panelId].id].icon_url" - :alt="apiWidgets[panels[panelId].id].title + ' icon'" - :src="apiWidgets[panels[panelId].id].icon_url" - aria-hidden="true"> - <span v-else - :aria-labelledby="`panel-${panels[panelId].id}--header--icon--description`" - aria-hidden="true" - :class="apiWidgets[panels[panelId].id].icon_class" - role="img" /> + <img v-if="apiWidgets[panels[panelId].id].icon_url" :src="apiWidgets[panels[panelId].id].icon_url" alt=""> + <span v-else :class="apiWidgets[panels[panelId].id].icon_class" aria-hidden="true" /> {{ apiWidgets[panels[panelId].id].title }} </h2> - <span :id="`panel-${panels[panelId].id}--header--icon--description`" class="hidden-visually"> - {{ t('dashboard', '"{title} icon"', { title: apiWidgets[panels[panelId].id].title }) }} - </span> </div> <div class="panel--content"> <ApiDashboardWidget :widget="apiWidgets[panels[panelId].id]" @@ -48,13 +38,9 @@ <div v-else :key="panels[panelId].id" class="panel"> <div class="panel--header"> <h2> - <span :aria-labelledby="`panel-${panels[panelId].id}--header--icon--description`" - aria-hidden="true" - :class="panels[panelId].iconClass" - role="img" /> + <span :class="panels[panelId].iconClass" aria-hidden="true" /> {{ panels[panelId].title }} </h2> - <span :id="`panel-${panels[panelId].id}--header--icon--description`" class="hidden-visually"> {{ t('dashboard', '"{title} icon"', { title: panels[panelId].title }) }} </span> </div> <div class="panel--content" :class="{ loading: !panels[panelId].mounted }"> <div :ref="panels[panelId].id" :data-id="panels[panelId].id" /> @@ -102,10 +88,7 @@ :checked="isActive(panel)" @input="updateCheckbox(panel, $event.target.checked)"> <label :for="'panel-checkbox-' + panel.id" :class="{ draggable: isActive(panel) }"> - <img v-if="panel.iconUrl" - :alt="panel.title + ' icon'" - :src="panel.iconUrl" - aria-hidden="true"> + <img v-if="panel.iconUrl" alt="" :src="panel.iconUrl"> <span v-else :class="panel.iconClass" aria-hidden="true" /> {{ panel.title }} </label> |