Enhancement: accessibility improvements for tags, doc links, dashboar…

…d views (#6786)
paperless-ngx · May 22, 2024 · c0c44b5 · c0c44b5
1 parent 3e62f13
commit c0c44b5
Show file tree

Hide file tree

Showing 5 changed files with 95 additions and 61 deletions.
diff --git a/src-ui/messages.xlf b/src-ui/messages.xlf
@@ -253,6 +253,18 @@
  <context context-type="sourcefile">src/app/app.component.ts</context>
  <context context-type="linenumber">85</context>
  </context-group>
+ <context-group purpose="location">
+ <context context-type="sourcefile">src/app/components/dashboard/widgets/saved-view-widget/saved-view-widget.component.html</context>
+ <context context-type="linenumber">37</context>
+ </context-group>
+ <context-group purpose="location">
+ <context context-type="sourcefile">src/app/components/dashboard/widgets/saved-view-widget/saved-view-widget.component.html</context>
+ <context context-type="linenumber">40</context>
+ </context-group>
+ <context-group purpose="location">
+ <context context-type="sourcefile">src/app/components/dashboard/widgets/saved-view-widget/saved-view-widget.component.html</context>
+ <context context-type="linenumber">43</context>
+ </context-group>
  <context-group purpose="location">
  <context context-type="sourcefile">src/app/components/dashboard/widgets/upload-file-widget/upload-file-widget.component.html</context>
  <context context-type="linenumber">73</context>
@@ -2123,10 +2135,6 @@
  <context context-type="sourcefile">src/app/components/common/input/permissions/permissions-form/permissions-form.component.html</context>
  <context context-type="linenumber">53</context>
  </context-group>
- <context-group purpose="location">
- <context context-type="sourcefile">src/app/components/dashboard/widgets/saved-view-widget/saved-view-widget.component.html</context>
- <context context-type="linenumber">43</context>
- </context-group>
  <context-group purpose="location">
  <context context-type="sourcefile">src/app/components/document-list/document-card-large/document-card-large.component.html</context>
  <context context-type="linenumber">57</context>
@@ -4454,6 +4462,24 @@
  <context context-type="linenumber">158</context>
  </context-group>
  </trans-unit>
+ <trans-unit id="1880237574877817137" datatype="html">
+ <source>Remove link</source>
+ <context-group purpose="location">
+ <context context-type="sourcefile">src/app/components/common/input/document-link/document-link.component.html</context>
+ <context context-type="linenumber">30</context>
+ </context-group>
+ </trans-unit>
+ <trans-unit id="1388712764439031120" datatype="html">
+ <source>Open link</source>
+ <context-group purpose="location">
+ <context context-type="sourcefile">src/app/components/common/input/document-link/document-link.component.html</context>
+ <context context-type="linenumber">31</context>
+ </context-group>
+ <context-group purpose="location">
+ <context context-type="sourcefile">src/app/components/common/input/url/url.component.html</context>
+ <context context-type="linenumber">14</context>
+ </context-group>
+ </trans-unit>
  <trans-unit id="6423278459497515329" datatype="html">
  <source>No documents found</source>
  <context-group purpose="location">
@@ -4551,18 +4577,18 @@
  <context context-type="linenumber">15</context>
  </context-group>
  </trans-unit>
- <trans-unit id="2561408369057364131" datatype="html">
- <source>Filter documents with these Tags</source>
+ <trans-unit id="3392754525167799121" datatype="html">
+ <source>Remove tag</source>
  <context-group purpose="location">
  <context context-type="sourcefile">src/app/components/common/input/tags/tags.component.html</context>
- <context context-type="linenumber">41</context>
+ <context context-type="linenumber">20</context>
  </context-group>
  </trans-unit>
- <trans-unit id="1388712764439031120" datatype="html">
- <source>Open link</source>
+ <trans-unit id="2561408369057364131" datatype="html">
+ <source>Filter documents with these Tags</source>
  <context-group purpose="location">
- <context context-type="sourcefile">src/app/components/common/input/url/url.component.html</context>
- <context context-type="linenumber">14</context>
+ <context context-type="sourcefile">src/app/components/common/input/tags/tags.component.html</context>
+ <context context-type="linenumber">41</context>
  </context-group>
  </trans-unit>
  <trans-unit id="5752465522295465624" datatype="html">
@@ -5159,6 +5185,51 @@
  <context context-type="linenumber">39</context>
  </context-group>
  </trans-unit>
+ <trans-unit id="8076495233090006322" datatype="html">
+ <source>Filter by correspondent</source>
+ <context-group purpose="location">
+ <context context-type="sourcefile">src/app/components/dashboard/widgets/saved-view-widget/saved-view-widget.component.html</context>
+ <context context-type="linenumber">47</context>
+ </context-group>
+ <context-group purpose="location">
+ <context context-type="sourcefile">src/app/components/document-list/document-card-large/document-card-large.component.html</context>
+ <context context-type="linenumber">20</context>
+ </context-group>
+ <context-group purpose="location">
+ <context context-type="sourcefile">src/app/components/document-list/document-list.component.html</context>
+ <context context-type="linenumber">275</context>
+ </context-group>
+ </trans-unit>
+ <trans-unit id="78870852467682010" datatype="html">
+ <source>Filter by document type</source>
+ <context-group purpose="location">
+ <context context-type="sourcefile">src/app/components/dashboard/widgets/saved-view-widget/saved-view-widget.component.html</context>
+ <context context-type="linenumber">57</context>
+ </context-group>
+ <context-group purpose="location">
+ <context context-type="sourcefile">src/app/components/document-list/document-card-large/document-card-large.component.html</context>
+ <context context-type="linenumber">79</context>
+ </context-group>
+ <context-group purpose="location">
+ <context context-type="sourcefile">src/app/components/document-list/document-list.component.html</context>
+ <context context-type="linenumber">310</context>
+ </context-group>
+ </trans-unit>
+ <trans-unit id="157572966557284263" datatype="html">
+ <source>Filter by storage path</source>
+ <context-group purpose="location">
+ <context context-type="sourcefile">src/app/components/dashboard/widgets/saved-view-widget/saved-view-widget.component.html</context>
+ <context context-type="linenumber">62</context>
+ </context-group>
+ <context-group purpose="location">
+ <context context-type="sourcefile">src/app/components/document-list/document-card-large/document-card-large.component.html</context>
+ <context context-type="linenumber">85</context>
+ </context-group>
+ <context-group purpose="location">
+ <context context-type="sourcefile">src/app/components/document-list/document-list.component.html</context>
+ <context context-type="linenumber">317</context>
+ </context-group>
+ </trans-unit>
  <trans-unit id="8911158217491828773" datatype="html">
  <source>View Preview</source>
  <context-group purpose="location">
@@ -6348,17 +6419,6 @@
  <context context-type="linenumber">819</context>
  </context-group>
  </trans-unit>
- <trans-unit id="8076495233090006322" datatype="html">
- <source>Filter by correspondent</source>
- <context-group purpose="location">
- <context context-type="sourcefile">src/app/components/document-list/document-card-large/document-card-large.component.html</context>
- <context context-type="linenumber">20</context>
- </context-group>
- <context-group purpose="location">
- <context context-type="sourcefile">src/app/components/document-list/document-list.component.html</context>
- <context context-type="linenumber">275</context>
- </context-group>
- </trans-unit>
  <trans-unit id="2784168796433474565" datatype="html">
  <source>Filter by tag</source>
  <context-group purpose="location">
@@ -6384,30 +6444,8 @@
  <context context-type="linenumber">75</context>
  </context-group>
  </trans-unit>
- <trans-unit id="78870852467682010" datatype="html">
- <source>Filter by document type</source>
- <context-group purpose="location">
- <context context-type="sourcefile">src/app/components/document-list/document-card-large/document-card-large.component.html</context>
- <context context-type="linenumber">79</context>
- </context-group>
- <context-group purpose="location">
- <context context-type="sourcefile">src/app/components/document-list/document-list.component.html</context>
- <context context-type="linenumber">310</context>
- </context-group>
- </trans-unit>
- <trans-unit id="157572966557284263" datatype="html">
- <source>Filter by storage path</source>
- <context-group purpose="location">
- <context context-type="sourcefile">src/app/components/document-list/document-card-large/document-card-large.component.html</context>
- <context context-type="linenumber">85</context>
- </context-group>
- <context-group purpose="location">
- <context context-type="sourcefile">src/app/components/document-list/document-list.component.html</context>
- <context context-type="linenumber">317</context>
- </context-group>
- </trans-unit>
  <trans-unit id="3727324658595204357" datatype="html">
- <source>Created: <x id="INTERPOLATION" equiv-text="{{ document.created | customDate }}"/></source>
+ <source>Created: <x id="INTERPOLATION" equiv-text="{{ document.created_date | customDate }}"/></source>
  <context-group purpose="location">
  <context context-type="sourcefile">src/app/components/document-list/document-card-large/document-card-large.component.html</context>
  <context context-type="linenumber">98,99</context>

diff --git a/src-ui/src/app/components/common/input/document-link/document-link.component.html b/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>

diff --git a/src-ui/src/app/components/common/input/tags/tags.component.html b/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">

diff --git a/src-ui/src/app/components/common/input/tags/tags.component.scss b/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;

diff --git a/...i/src/app/components/dashboard/widgets/saved-view-widget/saved-view-widget.component.html b/...i/src/app/components/dashboard/widgets/saved-view-widget/saved-view-widget.component.html
@@ -34,32 +34,32 @@
  <td class="py-2 py-md-3 position-relative" [ngClass]="{ 'd-none d-md-table-cell': i > 1 }">
  @switch (field) {
  @case (DisplayField.ADDED) {
- <a routerLink="/documents/{{doc.id}}" class="btn-link text-dark text-decoration-none py-2 py-md-3">{{doc.added | customDate}}</a>
+ <a routerLink="/documents/{{doc.id}}" class="btn-link text-dark text-decoration-none py-2 py-md-3" title="Open document" i18n-title>{{doc.added | customDate}}</a>
  }
  @case (DisplayField.CREATED) {
- <a routerLink="/documents/{{doc.id}}" class="btn-link text-dark text-decoration-none py-2 py-md-3">{{doc.created_date | customDate}}</a>
+ <a routerLink="/documents/{{doc.id}}" class="btn-link text-dark text-decoration-none py-2 py-md-3" title="Open document" i18n-title>{{doc.created_date | customDate}}</a>
  }
  @case (DisplayField.TITLE) {
- <a routerLink="/documents/{{doc.id}}" title="Edit" i18n-title class="btn-link text-dark text-decoration-none py-2 py-md-3">{{doc.title | documentTitle}}</a>
+ <a routerLink="/documents/{{doc.id}}" title="Open document" i18n-title class="btn-link text-dark text-decoration-none py-2 py-md-3">{{doc.title | documentTitle}}</a>
  }
  @case (DisplayField.CORRESPONDENT) {
  @if (doc.correspondent) {
- <a class="btn-link text-dark text-decoration-none" type="button" (click)="clickCorrespondent(doc.correspondent, $event)">{{(doc.correspondent$ | async)?.name}}</a>
+ <a class="btn-link text-dark text-decoration-none" type="button" (click)="clickCorrespondent(doc.correspondent, $event)" title="Filter by correspondent" i18n-title>{{(doc.correspondent$ | async)?.name}}</a>
  }
  }
  @case (DisplayField.TAGS) {
  @for (t of doc.tags$ | async; track t) {
- <pngx-tag [tag]="t" class="ms-1" (click)="clickTag(t.id, $event)"></pngx-tag>
+ <pngx-tag [tag]="t" class="ms-1" (click)="clickTag(t.id, $event)" [clickable]="true" linkTitle="Filter by tag" i18n-title></pngx-tag>
  }
  }
  @case (DisplayField.DOCUMENT_TYPE) {
  @if (doc.document_type) {
- <a class="btn-link text-dark text-decoration-none" type="button" (click)="clickDocType(doc.document_type, $event)">{{(doc.document_type$ | async)?.name}}</a>
+ <a class="btn-link text-dark text-decoration-none" type="button" (click)="clickDocType(doc.document_type, $event)" title="Filter by document type" i18n-title>{{(doc.document_type$ | async)?.name}}</a>
  }
  }
  @case (DisplayField.STORAGE_PATH) {
  @if (doc.storage_path) {
- <a class="btn-link text-dark text-decoration-none" type="button" (click)="clickStoragePath(doc.storage_path, $event)">{{(doc.storage_path$ | async)?.name}}</a>
+ <a class="btn-link text-dark text-decoration-none" type="button" (click)="clickStoragePath(doc.storage_path, $event)" title="Filter by storage path" i18n-title>{{(doc.storage_path$ | async)?.name}}</a>
  }
  }
  }