refactor: improve a11y

taiga-family · Oct 11, 2024 · df130da · df130da
1 parent dcb0952
commit df130da
Show file tree

Hide file tree

Showing 68 changed files with 219 additions and 40 deletions.
diff --git a/projects/core/components/textfield/textfield.component.ts b/projects/core/components/textfield/textfield.component.ts
@@ -31,14 +31,15 @@ import {
     TuiWithDropdownOpen,
 } from '@taiga-ui/core/directives/dropdown';
 import {TuiWithIcons} from '@taiga-ui/core/directives/icons';
-import {TUI_COMMON_ICONS} from '@taiga-ui/core/tokens';
+import {TUI_CLEAR_WORD, TUI_COMMON_ICONS} from '@taiga-ui/core/tokens';
 import type {TuiSizeL, TuiSizeS} from '@taiga-ui/core/types';
 import type {PolymorpheusContent} from '@taiga-ui/polymorpheus';
 import {PolymorpheusOutlet} from '@taiga-ui/polymorpheus';
 
 import {TuiTextfieldDirective} from './textfield.directive';
 import {TUI_TEXTFIELD_OPTIONS} from './textfield.options';
 import {TuiWithTextfieldDropdown} from './textfield-dropdown.directive';
+import {toSignal} from '@angular/core/rxjs-interop';
 
 @Component({
     standalone: true,
@@ -81,6 +82,7 @@ export class TuiTextfieldComponent<T> implements TuiDataListHost<T> {
     protected readonly control?: NgControl;
 
     protected readonly icons = inject(TUI_COMMON_ICONS);
+    protected readonly clear = toSignal(inject(TUI_CLEAR_WORD));
 
     protected computedFiller = computed(() => {
         const value = this.directive?.nativeValue() || '';

diff --git a/projects/core/components/textfield/textfield.template.html b/projects/core/components/textfield/textfield.template.html
@@ -18,7 +18,9 @@
         [iconStart]="icons.close"
         (click)="directive?.setValue(null)"
         (pointerdown.silent.prevent)="input?.nativeElement?.focus()"
-    ></button>
+    >
+        {{ clear() }}
+    </button>
     <ng-container #vcr />
     <ng-content select="tui-icon" />
 </span>

diff --git a/projects/core/tokens/i18n.ts b/projects/core/tokens/i18n.ts
@@ -11,6 +11,11 @@ export const TUI_MONTHS = tuiCreateTokenFromFactory(tuiExtractI18n('months'));
  */
 export const TUI_CLOSE_WORD = tuiCreateTokenFromFactory(tuiExtractI18n('close'));
 
+/**
+ * i18n 'clear' word
+ */
+export const TUI_CLEAR_WORD = tuiCreateTokenFromFactory(tuiExtractI18n('clear'));
+
 /**
  * i18n 'Nothing found' message
  */

diff --git a/projects/demo/src/modules/components/app-bar/examples/1/index.html b/projects/demo/src/modules/components/app-bar/examples/1/index.html
@@ -37,6 +37,7 @@ <h3>iOS</h3>
 
     <tui-app-bar>
         <button
+            title="Back"
             tuiAppBarBack
             tuiSlot="left"
             type="button"
@@ -128,6 +129,7 @@ <h3 class="tui-space_top-8">Android</h3>
 
     <tui-app-bar>
         <button
+            title="Back"
             tuiAppBarBack
             tuiSlot="left"
             type="button"

diff --git a/projects/demo/src/modules/components/app-bar/examples/3/index.html b/projects/demo/src/modules/components/app-bar/examples/3/index.html
@@ -44,6 +44,7 @@ <h3>Customization</h3>
     <button
         appearance=""
         iconStart="@tui.settings"
+        title="Settings"
         tuiIconButton
         tuiSlot="right"
         type="button"
@@ -111,6 +112,7 @@ <h3 class="tui-space_top-8">Centered Android</h3>
 
     <tui-app-bar>
         <button
+            title="Back"
             tuiAppBarBack
             tuiSlot="left"
             type="button"

diff --git a/projects/demo/src/modules/components/carousel/examples/4/index.html b/projects/demo/src/modules/components/carousel/examples/4/index.html
@@ -30,7 +30,9 @@
             type="button"
             class="tui-space_right-4"
             (click)="navigate(-1)"
-        ></button>
+        >
+            Previous
+        </button>
         <tui-carousel [(index)]="index">
             <div *tuiItem>
                 <h2>Carousel is awesome</h2>
@@ -66,7 +68,9 @@ <h2>Buttons</h2>
             type="button"
             class="tui-space_left-4"
             (click)="navigate(1)"
-        ></button>
+        >
+            Next
+        </button>
     </div>
     <tui-pagination
         size="s"

diff --git a/projects/demo/src/modules/components/data-list/examples/2/index.html b/projects/demo/src/modules/components/data-list/examples/2/index.html
@@ -6,7 +6,9 @@
     [tuiAppearanceState]="open ? 'hover' : null"
     [tuiDropdown]="content"
     [(tuiDropdownOpen)]="open"
-></button>
+>
+    Open
+</button>
 <ng-template #content>
     <tui-data-list
         tuiDataListDropdownManager

diff --git a/projects/demo/src/modules/components/data-list/examples/3/index.html b/projects/demo/src/modules/components/data-list/examples/3/index.html
@@ -8,7 +8,9 @@ <h3>Multi select control</h3>
     [tuiDropdown]="content"
     [tuiDropdownMaxHeight]="500"
     [(tuiDropdownOpen)]="control"
-></button>
+>
+    Open
+</button>
 <ng-template #content>
     <tui-data-list [style.width.rem]="12">
         <tui-opt-group
@@ -49,7 +51,9 @@ <h3>Separate toggles</h3>
     [tuiDropdown]="separate"
     [tuiDropdownMaxHeight]="500"
     [(tuiDropdownOpen)]="label"
-></button>
+>
+    Open
+</button>
 <ng-template #separate>
     <tui-data-list [style.width.rem]="10">
         <label tuiOption>

diff --git a/projects/demo/src/modules/components/input-slider/examples/2/index.html b/projects/demo/src/modules/components/input-slider/examples/2/index.html
@@ -16,7 +16,9 @@
             tuiIconButton
             type="button"
             (click)="decrease()"
-        ></button>
+        >
+            Decrease
+        </button>
     </span>
     <span>20%</span>
     <span>40%</span>
@@ -30,6 +32,8 @@
             tuiIconButton
             type="button"
             (click)="increase()"
-        ></button>
+        >
+            Increase
+        </button>
     </span>
 </div>
diff --git a/projects/demo/src/modules/components/mobile-calendar/examples/4/index.html b/projects/demo/src/modules/components/mobile-calendar/examples/4/index.html
@@ -6,7 +6,9 @@
         type="button"
         [style.border-radius.%]="100"
         (click)="onClick()"
-    ></button>
+    >
+        Calendar
+    </button>
     <span
         class="date"
         [class.date_empty]="empty"

diff --git a/projects/demo/src/modules/components/mobile-calendar/examples/5/index.html b/projects/demo/src/modules/components/mobile-calendar/examples/5/index.html
@@ -6,7 +6,9 @@
         type="button"
         [style.border-radius.%]="100"
         (click)="onClick()"
-    ></button>
+    >
+        Calendar
+    </button>
     <span
         class="date"
         [class.date_empty]="empty"

diff --git a/projects/demo/src/modules/components/primitive-textfield/examples/1/index.html b/projects/demo/src/modules/components/primitive-textfield/examples/1/index.html
@@ -23,7 +23,9 @@
         [iconStart]="icon"
         [tuiHint]="hintContent"
         (click)="togglePasswordVisibility()"
-    ></button>
+    >
+        Toggle password visibility
+    </button>
 </ng-template>
 
 <ng-template #hintContent>{{ hint }}</ng-template>
diff --git a/projects/demo/src/modules/components/slider/examples/6/index.html b/projects/demo/src/modules/components/slider/examples/6/index.html
@@ -7,7 +7,9 @@
         type="button"
         class="minus"
         (click)="change(-0.25)"
-    ></button>
+    >
+        Minus
+    </button>
     <label
         tuiSliderThumbLabel
         class="slider-wrapper"
@@ -40,5 +42,7 @@
         type="button"
         class="plus"
         (click)="change(+0.25)"
-    ></button>
+    >
+        Plus
+    </button>
 </section>
diff --git a/projects/demo/src/modules/components/swipe-action/examples/1/index.html b/projects/demo/src/modules/components/swipe-action/examples/1/index.html
@@ -20,22 +20,28 @@
         tuiIconButton
         tuiSwipeAction
         type="button"
-    ></button>
+    >
+        Show
+    </button>
     <button
         iconStart="@tui.pencil-line"
         size="m"
         tuiIconButton
         tuiSwipeAction
         type="button"
-    ></button>
+    >
+        Edit
+    </button>
     <button
         appearance="secondary"
         iconStart="@tui.share"
         size="m"
         tuiIconButton
         tuiSwipeAction
         type="button"
-    ></button>
+    >
+        Share
+    </button>
 </tui-swipe-actions>
 
 <tui-swipe-actions>
@@ -60,7 +66,9 @@
         tuiIconButton
         tuiSwipeAction
         type="button"
-    ></button>
+    >
+        Eye
+    </button>
 </tui-swipe-actions>
 
 <tui-swipe-actions
@@ -88,28 +96,36 @@
         tuiIconButton
         tuiSwipeAction
         type="button"
-    ></button>
+    >
+        Show
+    </button>
     <button
         iconStart="@tui.pencil-line"
         size="s"
         tuiIconButton
         tuiSwipeAction
         type="button"
-    ></button>
+    >
+        Edit
+    </button>
     <button
         appearance="secondary"
         iconStart="@tui.share"
         size="s"
         tuiIconButton
         tuiSwipeAction
         type="button"
-    ></button>
+    >
+        Share
+    </button>
     <button
         appearance="destructive"
         iconStart="@tui.trash"
         size="s"
         tuiIconButton
         tuiSwipeAction
         type="button"
-    ></button>
+    >
+        Delete
+    </button>
 </tui-swipe-actions>
diff --git a/projects/demo/src/modules/components/swipe-action/examples/2/index.html b/projects/demo/src/modules/components/swipe-action/examples/2/index.html
@@ -31,5 +31,7 @@ <h3 tuiTitle="m">Alex Inkin</h3>
         tuiSwipeAction
         type="button"
         [style.borderRadius.%]="100"
-    ></button>
+    >
+        Trash
+    </button>
 </tui-swipe-actions>
diff --git a/projects/demo/src/modules/components/swipe-action/examples/3/index.html b/projects/demo/src/modules/components/swipe-action/examples/3/index.html
@@ -20,22 +20,28 @@
         tuiIconButton
         tuiSwipeAction
         type="button"
-    ></button>
+    >
+        Eye
+    </button>
     <button
         iconStart="@tui.pencil-line"
         size="m"
         tuiIconButton
         tuiSwipeAction
         type="button"
-    ></button>
+    >
+        Pencil
+    </button>
     <button
         appearance="secondary"
         iconStart="@tui.share"
         size="m"
         tuiIconButton
         tuiSwipeAction
         type="button"
-    ></button>
+    >
+        Share
+    </button>
 </tui-swipe-actions>
 
 <tui-swipe-actions [autoClose]="true">
@@ -60,20 +66,26 @@
         tuiIconButton
         tuiSwipeAction
         type="button"
-    ></button>
+    >
+        Eye
+    </button>
     <button
         iconStart="@tui.pencil-line"
         size="m"
         tuiIconButton
         tuiSwipeAction
         type="button"
-    ></button>
+    >
+        Pencil
+    </button>
     <button
         appearance="secondary"
         iconStart="@tui.share"
         size="m"
         tuiIconButton
         tuiSwipeAction
         type="button"
-    ></button>
+    >
+        Share
+    </button>
 </tui-swipe-actions>
diff --git a/projects/demo/src/modules/components/swipe-action/examples/4/index.html b/projects/demo/src/modules/components/swipe-action/examples/4/index.html
@@ -21,7 +21,9 @@
         tuiIconButton
         tuiSwipeAction
         type="button"
-    ></button>
+    >
+        Pencil
+    </button>
     <button
         *ngIf="shareButton"
         appearance="secondary"
@@ -30,7 +32,9 @@
         tuiIconButton
         tuiSwipeAction
         type="button"
-    ></button>
+    >
+        Share
+    </button>
 </tui-swipe-actions>
 
 <label>