Feature - Improve Accessibility for Screenreaders (#5634)

# Improve Accessibility for Screenreaders - Description & some structure
via Aria-Attributes

We are currently in the internal review in Deutsche Telekom how to
enable people with disabilities for our annotation process. One key-part
will be better usability with screen-readers. This PR tries to enable
basic functionality via aria attributes.
I tried to not touch the current HTML structure too much, but it might
make sense to change some of the aria-role="button" to actual html
button.
This would be the first of a couple of PR that we are proposing. In
future PR we would also want to add a MR for a high contrast mode, and
some optimizations for keyboard navigation for blind people.

Scope of this one: Description & some structure via Aria-Attributes. 

- For a lot of icons in buttons: I added aria-hidden="true" as there are
not relevant for the screenreader
- The buttons and many other UI elements got a screenreader description
via aria-label
- For some items I added a aria-role such as role="button" or
role="table"
- There are some additional aria attributes such as:
    - aria-expanded for collapse panel & drop-down menues
    - or aria-multiselectable for multi-select labels
   
Next steps - one at a time:
- Aria Labels are not multi-lingual yet.
- It does not fix the tabindex order or general problems with keyboard
navigation for blind people.
- high contrast mode fixes
- Skip links for Screenreaders
- Alt Text for Image Field

We will most likely receive more feedback in our internal review process
that we will also try to integrate then.

**Type of change**

- New feature (non-breaking change which adds functionality)

**How Has This Been Tested**
Local Frontend Build w. Firefox tested w. VoiceOver

**Checklist**

- I added relevant documentation
- I followed the style guidelines of this project
- I did a self-review of my code
- I made corresponding changes to the documentation
- I confirm My changes generate no new warnings
- I have added tests that prove my fix is effective or that my feature
works
- I have added relevant notes to the CHANGELOG.md file (See
https://keepachangelog.com/)

---------

Co-authored-by: Paul Bauriegel <[email protected]>
Co-authored-by: pre-commit-ci[bot] <66853113+pre-commit-ci[bot]@users.noreply.github.com>
Co-authored-by: Leire <[email protected]>

argilla-frontend/components/base/base-badge/BaseIconWithBadge.vue

@@ -20,6 +20,7 @@
         :width="badgeSize"
         :height="badgeSize"
         :color="iconColor"
+        :aria-label="icon + ' icon'"
       />
     </i>
   </BaseButton>

argilla-frontend/components/base/base-breadcrumbs/BaseBreadcrumbs.vue

@@ -17,7 +17,7 @@
 
 <template>
   <div class="breadcrumbs">
-    <ul>
+    <ul role="navigation">
       <li v-for="breadcrumb in filteredBreadcrumbs" :key="breadcrumb.name">
         <nuxt-link
           class="breadcrumbs__item"

argilla-frontend/components/base/base-collpasable-panel/BaseCollapsablePanel.vue

@@ -2,11 +2,16 @@
   <div
     class="panel"
     :class="[
-      !isExpanded ? '--collapsed' : undefined,
-      hideOnDesktop ? '--mobile' : undefined,
-    ]"
+    !isExpanded ? '--collapsed' : undefined,
+    hideOnDesktop ? '--mobile' : undefined,
+  ]"
   >
-    <BaseButton class="panel__header" @click="toggleExpand(isExpanded)">
+    <BaseButton
+      class="panel__header"
+      @click="toggleExpand(isExpanded)"
+      :aria-expanded="isExpanded ? 'true' : 'false'"
+      :aria-label="isExpanded ? 'Collapse Panel' : 'Expand Panel'"
+    >
       <div class="panel__header__container">
         <slot v-if="!isExpanded" name="panelHeader" />
         <div v-else style="width: 100%; text-align: left">
@@ -17,6 +22,7 @@
           :name="isExpanded ? 'chevron-down' : 'chevron-right'"
           width="12"
           height="12"
+          aria-hidden="true"
         />
       </div>
     </BaseButton>
@@ -60,6 +66,7 @@ export default {
   &__header {
     overflow: visible;
     color: var(--fg-secondary);
+
     &__container {
       width: 100%;
       display: flex;

argilla-frontend/components/base/base-dropdown/BaseDropdown.vue

@@ -23,6 +23,8 @@
       events: ['mousedown'],
       handler: onClose,
     }"
+    role="button"
+    aria-haspopup="menu"
   >
     <div class="dropdown__header" @click="onClick">
       <slot name="dropdown-header" />

argilla-frontend/components/base/base-icon/BaseIcon.vue

@@ -4,6 +4,7 @@
     :width="iconWidth"
     :height="iconHeight"
     :color="iconColor"
+    aria-hidden="true"
   />
 </template>
 

argilla-frontend/components/base/base-progress/BaseLinearProgress.vue

@@ -6,6 +6,8 @@
           v-for="(range, index) in filteredProgressRanges"
           :key="range.name"
           role="progressbar"
+          :aria-valuenow="getPercentage(range.value)"
+          :aria-label="range.name"
           :class="[
             'progress__range',
             showTooltip ? 'progress__range--with-tooltip' : null,
@@ -17,7 +19,7 @@
           @mouseenter="hoveredRange = range"
           @mouseleave="hoveredRange = null"
         >
-          <div class="progress__bar" :style="{ background: range.color }"></div>
+        <div class="progress__bar" :style="{ background: range.color }"></div>
         </div>
       </div>
       <template v-if="showTooltip && !!hoveredRange">

argilla-frontend/components/base/base-resizable/HorizontalResizable.vue

@@ -4,7 +4,7 @@
       <slot name="up" />
     </div>
 
-    <div class="resizable__bar" ref="resizableBar">
+    <div class="resizable__bar" ref="resizableBar" role="separator">
       <div class="resizable__bar__inner" />
     </div>
 

argilla-frontend/components/base/base-resizable/VerticalResizable.vue

@@ -2,7 +2,7 @@
   <div class="resizable" :class="resizing ? '--v-resizing' : ''">
     <div class="resizable__left"><slot name="left" /></div>
 
-    <div class="resizable__bar" ref="resizableBar">
+    <div class="resizable__bar" ref="resizableBar" role="separator">
       <div class="resizable__bar__inner" />
     </div>
 

argilla-frontend/components/base/base-search-bar/BaseSearchBar.vue

@@ -17,9 +17,10 @@
 
 <template>
   <base-input-container class="search-area" :class="filter ? 'active' : null">
-    <svgicon name="search" width="20" height="20" color="#acacac" />
+    <svgicon name="search" width="20" height="20" color="#acacac" aria-hidden="true" />
     <base-input
       class="search-area__input"
+      role="search"
       v-model="filter"
       :placeholder="placeholder"
     />
@@ -31,6 +32,7 @@
       width="14"
       height="14"
       @click="filter = undefined"
+      aria-hidden="true"
     />
   </base-input-container>
 </template>

argilla-frontend/components/base/base-table/BaseTableInfo.vue

@@ -16,29 +16,34 @@
   -->
 <template>
   <transition appear name="fade">
-    <div class="table-info">
+    <div class="table-info" role="table">
       <div class="table-info__header">
         <slot name="columns">
-          <div class="table-info__item">
+          <div class="table-info__item" role="columnheader" aria-label="Table Header">
             <div
               v-for="(column, key) in columns"
               :key="key"
               :class="[`table-info__item__col`, column.class]"
+              :aria-label="column.name"
+              role="cell"
             >
               <lazy-table-filtrable-column
                 :column="column"
                 :data="data"
                 :filters="filters"
                 v-if="column.filtrable"
                 @applyFilters="onApplyFilters"
+                :aria-label="'Filter column ' + column.name"
               />
               <button
                 v-else-if="column.sortable"
                 :data-title="column.tooltip"
                 :class="[sortOrder, { active: sortedBy === column.field }]"
                 @click="sort(column)"
+                :aria-label="'Sort by ' + column.name"
+                :aria-sort="sortOrder === 'asc' ? 'descending' : 'ascending'"
               >
-                <svgicon width="18" height="18" name="sort" />
+                <svgicon width="18" height="18" name="sort" aria-hidden="true"/>
                 <span>{{ column.name }}</span>
               </button>
               <button v-else :data-title="column.tooltip">
@@ -50,17 +55,18 @@
       </div>
       <results-empty v-if="tableIsEmpty" :title="emptySearchInfo.title" />
       <template v-else>
-        <div class="table-info__body" ref="table">
-          <ul>
-            <li v-for="item in filteredResults" :key="item.id" :id="item.id">
+        <div class="table-info__body" ref="table" aria-label="Table Body">
+          <ul role="rowgroup">
+            <li v-for="item in filteredResults" :key="item.id" :id="item.id" role="row" :aria-label="'Row for ' + item.id">
               <nuxt-link :to="rowLink(item)" class="table-info__item">
                 <span
                   v-for="(column, idx) in columns"
                   :key="idx"
                   :class="[`table-info__item__col`, column.class]"
+                  role="cell"
                 >
                   <span :class="column.class">
-                    <span v-if="column.actions">
+                    <span v-if="column.actions" role="group" aria-label="Row actions">
                       <div class="table-info__actions">
                         <p
                           class="table-info__main"
@@ -74,19 +80,23 @@
                             v-for="(action, idx) in column.actions"
                             :key="idx"
                             :tooltip="action.tooltip"
+                            role="button"
+                            :aria-label="action.title"
                           >
                             <base-button
                               :title="action.title"
                               class="table-info__actions__button"
                               @click.prevent="
                                 onActionClicked(action.name, item)
                               "
+                              aria-hidden="true"
                             >
                               <svgicon
                                 v-if="action.icon !== undefined"
                                 :name="action.icon"
                                 width="16"
                                 height="16"
+                                aria-hidden="true"
                               />
                             </base-button>
                           </base-action-tooltip>
@@ -101,9 +111,10 @@
                     <nuxt-link v-else-if="column.link" :to="column.link(item)">
                       {{ itemValue(item, column) }}
                     </nuxt-link>
-                    <span v-else>{{ itemValue(item, column) }}</span>
+                    <span v-else >{{ itemValue(item, column) }}</span>
                     <span v-if="column.component">
                       <component
+                        :aria-label="column.component.name"
                         v-if="hydrate[item.id]"
                         :is="column.component.name"
                         v-bind="{ ...column.component.props(item) }"

argilla-frontend/components/base/base-table/TableFiltrableColumn.vue

@@ -5,7 +5,7 @@
       @click="openFilter(column)"
       :class="[visibleFilter || selectedOptions.length ? 'active' : '']"
     >
-      <svgicon name="filter" width="16" />
+      <svgicon name="filter" width="16" aria-hidden="true"/>
       {{ column.name }}
     </button>
     <div class="table__filter" v-click-outside="close" v-if="visibleFilter">
@@ -17,6 +17,7 @@
         :options="filterOptions(this.options, searchText)"
         :option-name="optionName"
         :option-counter="optionCounter"
+        :aria-label="optionName"
       />
     </div>
   </div>

argilla-frontend/components/base/base-topbar-brand/BaseTopbarBrand.vue

@@ -16,8 +16,8 @@
   -->
 
 <template>
-  <div class="topbar">
-    <brand-icon class="brand-icon" color="white" />
+  <div class="topbar" role="banner" aria-label="Top navigation bar">
+    <brand-icon class="brand-icon" color="white" aria-label="Argilla icon"/>
     <slot />
   </div>
 </template>

argilla-frontend/components/features/annotation/container/RecordFeedbackTaskAndQuestionnaire.vue

@@ -6,6 +6,7 @@
       recordCriteria.committed.page.isBulkMode &&
       recordCriteria.committed.isPending
     "
+    role="main"
     :record-criteria="recordCriteria"
     :dataset-vectors="datasetVectors"
     :records="records"
@@ -17,6 +18,7 @@
   />
   <FocusAnnotation
     v-else
+    role="main"
     :record-criteria="recordCriteria"
     :dataset-vectors="datasetVectors"
     :records="records"

argilla-frontend/components/features/annotation/container/fields/RecordMenu.vue

@@ -6,8 +6,10 @@
       @visibility="onVisibility"
     >
       <template slot="dropdown-header">
-        <BaseButton class="record-menu__header">
-          <svgicon name="kebab" width="20" height="20" />
+        <BaseButton
+          class="record-menu__header"
+          :aria-label="(dropdownIsVisible? 'Collapse' : 'Expand') + ' Record Dropdown for Extra Information'">
+          <svgicon name="kebab" width="20" height="20" aria-hidden="true"/>
         </BaseButton>
       </template>
       <template slot="dropdown-content">

argilla-frontend/components/features/annotation/container/fields/RecordStatus.vue

@@ -3,7 +3,8 @@
     :key="record.status"
     :class="['status-tag', getStatusInfo.class]"
     :title="getStatusInfo.name"
-    ><span class="bullet"></span>
+    aria-label="Status of Record"
+    ><span class="bullet" aria-hidden="true"></span>
 
     <span>{{ getStatusInfo.name }}</span>
     <span

argilla-frontend/components/features/annotation/container/fields/span-annotation/SpanAnnotationTextField.vue

@@ -4,24 +4,27 @@
     :key="name"
     @mouseenter.stop="mouseEnter = true"
     @mouseleave.stop="mouseEnter = false"
+    aria-label="Data Record Field"
   >
     <div class="title-area --body2">
-      <span class="text_field_component__title-content" v-text="title" />
+      <span class="text_field_component__title-content" v-text="title" :aria-label="'Field Name: ' + title" />
       <BaseActionTooltip
         class="text_field_component__tooltip"
         :tooltip="$t('copied')"
         tooltip-position="left"
       >
         <BaseButton
           :title="$t('button.tooltip.copyToClipboard')"
+          :aria-label="$t('button.tooltip.copyToClipboard')"
           class="text_field_component__copy-button"
           @click.prevent="$copyToClipboard(fieldText)"
+          role="button"
         >
-          <svgicon color="#acacac" name="copy" width="18" height="18" />
+          <svgicon color="#acacac" name="copy" width="18" height="18" aria-hidden="true"/>
         </BaseButton>
       </BaseActionTooltip>
     </div>
-    <div id="fields-content" class="text_field_component__area --body1">
+    <div id="fields-content" class="text_field_component__area --body1" :aria-label="'Data entry for Field: ' + title" >
       <p
         :class="[
           allowOverlapping

argilla-frontend/components/features/annotation/container/fields/span-annotation/components/EntityComponent.vue

@@ -1,5 +1,5 @@
 <template>
-  <span class="span-entity__wrapper">
+  <span class="span-entity__wrapper" role="mark">
     <template v-if="allowOverlapping">
       <span
         v-for="(line, index) in lines"

argilla-frontend/components/features/annotation/container/mode/BulkAnnotation.vue

@@ -11,7 +11,7 @@
           class="wrapper__left"
         >
           <template #up>
-            <section class="wrapper__records">
+            <section class="wrapper__records" aria-label="Bulk Annotation View">
               <DatasetFilters :recordCriteria="recordCriteria">
                 <ToggleAnnotationType
                   v-if="
@@ -162,6 +162,7 @@
       <BaseCollapsablePanel
         hideOnDesktop
         :isExpanded="expandedGuidelines"
+        :aria-expanded="expandedGuidelines"
         @toggle-expand="expandedGuidelines = !expandedGuidelines"
       >
         <template #panelHeader>

argilla-frontend/components/features/annotation/container/mode/FocusAnnotation.vue

@@ -6,7 +6,7 @@
         class="wrapper__left"
       >
         <template #up>
-          <section class="wrapper__records">
+          <section class="wrapper__records" aria-label="Focus Annotation View">
             <DatasetFilters :recordCriteria="recordCriteria">
               <ToggleAnnotationType
                 v-if="

argilla-frontend/components/features/annotation/container/questions/QuestionsForm.vue

@@ -5,6 +5,7 @@
     @submit.stop.prevent=""
     v-click-outside="onClickOutside"
     @click="focusOnFirstQuestionFromOutside"
+    aria-label="Annotation Questions"
   >
     <div class="questions-form__content">
       <QuestionsComponent

argilla-frontend/components/features/annotation/container/questions/form/Questions.component.vue

@@ -1,10 +1,11 @@
 <template>
   <div>
-    <p v-if="legend" class="questions__title --body3 --light" v-text="legend" />
-    <div class="questions">
+    <p v-if="legend" class="questions__title --body3 --light" v-text="legend" :aria-label="legend" />
+    <div class="questions" role="list" aria-label="List of annotation questions">
       <div
         v-for="(question, index) in questions"
         :key="question.id"
+        :aria-label="'Question: ' + question.name"
         @keydown.arrow-up.prevent="
           updateQuestionAutofocus(autofocusPosition - 1)
         "
@@ -107,6 +108,7 @@ export default {
     });
   },
   methods: {
+    // This is terrible
     handleKeyboardToMoveLoop(parent) {
       return (e) => {
         if (e.key !== "Tab") return;