diff --git a/src/client/components/AntibodiesTable.vue b/src/client/components/AntibodiesTable.vue index 2d02d4fcf853cc952f4220c79486699365b22231..7b0ebfaac6453b83da0366796786947e3e68e5e9 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 8467f5b18f93a164a589f49fd7aab8916a727c2d..5e246495c357c80c2f1b0f05c6dfcc27adbb43e1 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>