refactor: improve a11y

taiga-family · Oct 11, 2024 · 0e06c87 · 0e06c87
1 parent e064549
commit 0e06c87
Show file tree

Hide file tree

Showing 30 changed files with 150 additions and 49 deletions.
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/demo/src/modules/components/app-bar/examples/1/index.html b/projects/demo/src/modules/components/app-bar/examples/1/index.html
@@ -40,7 +40,9 @@ <h3>iOS</h3>
             tuiAppBarBack
             tuiSlot="left"
             type="button"
-        ></button>
+        >
+            Back
+        </button>
         Taiga UI
         <a
             iconStart="@tui.user"
@@ -131,7 +133,9 @@ <h3 class="tui-space_top-8">Android</h3>
             tuiAppBarBack
             tuiSlot="left"
             type="button"
-        ></button>
+        >
+            Back
+        </button>
         <label tuiTitle>
             Taiga UI
             <span tuiSubtitle>Components library</span>

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
@@ -47,7 +47,9 @@ <h3>Customization</h3>
         tuiIconButton
         tuiSlot="right"
         type="button"
-    ></button>
+    >
+        Settings
+    </button>
 </tui-app-bar>
 
 <h3 class="tui-space_top-8">Centered Android</h3>
@@ -114,7 +116,9 @@ <h3 class="tui-space_top-8">Centered Android</h3>
             tuiAppBarBack
             tuiSlot="left"
             type="button"
-        ></button>
+        >
+            Back
+        </button>
         <label tuiTitle>
             Taiga UI
             <span tuiSubtitle>Components library</span>

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>
+        >
+            Navigate left
+        </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>
+        >
+            Navigate right
+        </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-files/examples/3/index.html b/projects/demo/src/modules/components/input-files/examples/3/index.html
@@ -33,6 +33,7 @@ <h4>With link</h4>
         [file]="fileWithLink"
         [href]="fileWithLink.src"
         [showDelete]="control.enabled"
+        title="File link"
     ></a>
 </tui-files>
 

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>
+    >
+        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>
@@ -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>
+    >
+        Eye
+    </button>
     <button
         iconStart="@tui.pencil-line"
         size="s"
         tuiIconButton
         tuiSwipeAction
         type="button"
-    ></button>
+    >
+        Pencil
+    </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>
+    >
+        Trash
+    </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>

diff --git a/projects/demo/src/modules/components/swipe-action/examples/5/index.html b/projects/demo/src/modules/components/swipe-action/examples/5/index.html
@@ -23,7 +23,9 @@
         type="button"
         class="fallback"
         [tuiDropdown]="content"
-    ></button>
+    >
+        Fallback
+    </button>
 
     <ng-template #content>
         <tui-data-list>
@@ -48,12 +50,16 @@
         tuiIconButton
         tuiSwipeAction
         type="button"
-    ></button>
+    >
+        Eye
+    </button>
     <button
         iconStart="@tui.pencil-line"
         size="m"
         tuiIconButton
         tuiSwipeAction
         type="button"
-    ></button>
+    >
+        Pencil
+    </button>
 </tui-swipe-actions>