Enhancement: accessibility improvements for tags, doc links, dashboard views (#6786)

src-ui/src/app/components/common/input/document-link/document-link.component.html

@@ -27,8 +27,8 @@
           (change)="onChange(selectedDocuments)">
           <ng-template ng-label-tmp let-document="item">
             <div class="d-flex align-items-center">
-              <i-bs (click)="unselect(document)" name="x"></i-bs>
-              <a routerLink="/documents/{{document.id}}" class="badge bg-light text-primary" (mousedown)="$event.stopImmediatePropagation();">
+              <button class="btn p-0 lh-1" (click)="unselect(document)" title="Remove link" i18n-title><i-bs name="x"></i-bs></button>
+              <a routerLink="/documents/{{document.id}}" class="badge bg-light text-primary" (mousedown)="$event.stopImmediatePropagation();" title="Open link" i18n-title>
                 <i-bs width="0.9em" height="0.9em" name="file-text"></i-bs>&nbsp;<span>{{document.title}}</span>
               </a>
             </div>

src-ui/src/app/components/common/input/tags/tags.component.html

@@ -17,12 +17,12 @@
           (change)="onChange(value)">
 
           <ng-template ng-label-tmp let-item="item">
-            <span class="tag-wrap tag-wrap-delete" (mousedown)="removeTag($event, item.id)">
-              <i-bs name="x"></i-bs>
+            <button class="tag-wrap btn p-0" (click)="removeTag($event, item.id)" title="Remove tag" i18n-title>
+              <i-bs name="x" style="margin-inline-end: 1px;"></i-bs>
               @if (item.id && tags) {
                 <pngx-tag style="background-color: none;" [tag]="getTag(item.id)"></pngx-tag>
               }
-            </span>
+            </button>
           </ng-template>
           <ng-template ng-option-tmp let-item="item" let-index="index" let-search="searchTerm">
             <div class="tag-wrap">

src-ui/src/app/components/common/input/tags/tags.component.scss

@@ -7,10 +7,6 @@
   font-size: 1rem;
 }
 
-.tag-wrap-delete {
-  cursor: pointer;
-}
-
 .paperless-input-select.disabled {
   .input-group {
       cursor: not-allowed;