From 5fbac4a2a190182ed53bb8f6a570f5b0ae00dd43 Mon Sep 17 00:00:00 2001
From: Simon Malesys <simon.malesys@pasteur.fr>
Date: Tue, 18 Feb 2025 16:58:44 +0100
Subject: [PATCH] Add some aria attributes
---
src/client/components/AntibodiesTable.vue | 16 ++++++++++------
src/client/components/TheDownloadPage.vue | 3 ++-
2 files changed, 12 insertions(+), 7 deletions(-)
diff --git a/src/client/components/AntibodiesTable.vue b/src/client/components/AntibodiesTable.vue
index 2d02d4f..7b0ebfa 100644
--- a/src/client/components/AntibodiesTable.vue
+++ b/src/client/components/AntibodiesTable.vue
@@ -1,5 +1,5 @@
<template>
- <section class="data-table">
+ <section class="data-table" :aria-busy="isFetchingAntibodies">
<div class="table-header">
<AntibodiesTableTotal />
<AntibodiesTableDownload />
@@ -79,7 +79,7 @@
data-label="ID"
class="link-cell"
>
- <span class="loader" v-if="isFetchingAntibodies"></span>
+ <span class="loader" v-if="isFetchingAntibodies" role="progressbar"></span>
<RouterLink v-else :to="{ name: 'AntibodyPage', params: { hashId: antibody.hashId } }">
{{ antibody.id }}
</RouterLink>
@@ -88,28 +88,28 @@
headers="antibodies-species"
data-label="SPECIES"
>
- <span class="loader" v-if="isFetchingAntibodies"></span>
+ <span class="loader" v-if="isFetchingAntibodies" role="progressbar"></span>
<i v-else>{{ antibody.species }}</i>
</td>
<td
headers="antibodies-heavy-chain"
data-label="HEAVY CHAIN"
>
- <span class="loader" v-if="isFetchingAntibodies"></span>
+ <span class="loader" v-if="isFetchingAntibodies" role="progressbar"></span>
<span v-else>{{ antibody.heavyChain.sequence.substring(0, 15) }}...</span>
</td>
<td
headers="antibodies-light-chain"
data-label="LIGHT CHAIN"
>
- <span class="loader" v-if="isFetchingAntibodies"></span>
+ <span class="loader" v-if="isFetchingAntibodies" role="progressbar"></span>
<span v-else>{{ antibody.lightChain.sequence.substring(0, 15) }}...</span>
</td>
<td
headers="antibodies-sources"
data-label="SOURCES"
>
- <span class="loader" v-if="isFetchingAntibodies"></span>
+ <span class="loader" v-if="isFetchingAntibodies" role="progressbar"></span>
<span v-else>{{ listSources(antibody).join(', ') }}</span>
</td>
</tr>
@@ -207,6 +207,10 @@ function listSources(antibody: Antibody): string[] {
white-space: nowrap;
}
+span[role=progressbar] {
+ vertical-align: middle;
+}
+
@media screen and (width < 700px) {
.table-header {
justify-content: center;
diff --git a/src/client/components/TheDownloadPage.vue b/src/client/components/TheDownloadPage.vue
index 8467f5b..5e24649 100644
--- a/src/client/components/TheDownloadPage.vue
+++ b/src/client/components/TheDownloadPage.vue
@@ -19,7 +19,8 @@
<div
v-else
class="spinner"
- ></div>
+ role="progressbar">
+ </div>
</div>
</template>
--
GitLab