From 0e06c87cf41f72d347970d18013e155c7e41b234 Mon Sep 17 00:00:00 2001
From: splincode <omaxphp@yandex.ru>
Date: Fri, 11 Oct 2024 12:36:11 +0300
Subject: [PATCH] refactor: improve a11y

---
 .../textfield/textfield.template.html         |  4 ++-
 .../components/app-bar/examples/1/index.html  |  8 +++--
 .../components/app-bar/examples/3/index.html  |  8 +++--
 .../components/carousel/examples/4/index.html |  8 +++--
 .../data-list/examples/2/index.html           |  4 ++-
 .../data-list/examples/3/index.html           |  8 +++--
 .../input-files/examples/3/index.html         |  1 +
 .../input-slider/examples/2/index.html        |  8 +++--
 .../mobile-calendar/examples/4/index.html     |  4 ++-
 .../mobile-calendar/examples/5/index.html     |  4 ++-
 .../primitive-textfield/examples/1/index.html |  4 ++-
 .../components/slider/examples/6/index.html   |  8 +++--
 .../swipe-action/examples/1/index.html        | 32 ++++++++++++++-----
 .../swipe-action/examples/2/index.html        |  4 ++-
 .../swipe-action/examples/3/index.html        | 24 ++++++++++----
 .../swipe-action/examples/4/index.html        |  8 +++--
 .../swipe-action/examples/5/index.html        | 12 +++++--
 .../components/tag/examples/3/index.html      |  4 ++-
 .../components/tag/examples/6/index.html      |  8 +++--
 .../dropdown-hover/examples/2/index.html      |  4 ++-
 .../dropdown-open/examples/4/index.html       |  4 ++-
 .../hint-describe/examples/1/index.html       |  4 ++-
 .../pagination/pagination.style.less          |  1 +
 .../pagination/pagination.template.html       |  4 ++-
 .../components/preview/preview.template.html  |  4 ++-
 .../preview/zoom/preview-zoom.template.html   |  4 ++-
 .../tree-item-content.template.html           |  4 ++-
 .../app-bar/app-bar-back.style.less           |  1 +
 .../color-selector.template.html              |  4 ++-
 .../palette/palette.template.html             |  4 ++-
 30 files changed, 150 insertions(+), 49 deletions(-)

diff --git a/projects/core/components/textfield/textfield.template.html b/projects/core/components/textfield/textfield.template.html
index aba2f6b964ca..9f4b1af791e5 100644
--- 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
index 45a62a964c05..bd07656828b1 100644
--- 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
index 7495903a1358..be712bc1104c 100644
--- 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
index e97637d72166..d03f4a631811 100644
--- 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
index 6209ef689bc6..e51b07143b14 100644
--- 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
index d4a31a5666be..26d5b6d85a52 100644
--- 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
index f7ceb6e4ef90..1ccabd1bc9f6 100644
--- 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
index 7a9cfa37e1a3..cf1916f17fbf 100644
--- 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
index c6d44590c9dd..a98bf385d99e 100644
--- 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
index c6d44590c9dd..a98bf385d99e 100644
--- 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
index 1895c24bce1e..ddc4241429fc 100644
--- 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
index dc815b948999..9ca6ca1fd93d 100644
--- 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
index 4a9ea660b650..877467acb3dc 100644
--- 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,14 +20,18 @@
         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"
@@ -35,7 +39,9 @@
         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,14 +96,18 @@
         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"
@@ -103,7 +115,9 @@
         tuiIconButton
         tuiSwipeAction
         type="button"
-    ></button>
+    >
+        Share
+    </button>
     <button
         appearance="destructive"
         iconStart="@tui.trash"
@@ -111,5 +125,7 @@
         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
index 6fba5ddbfa01..2c55df88391e 100644
--- 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
index 88ab893ecff0..e6614415f801 100644
--- 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,14 +20,18 @@
         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"
@@ -35,7 +39,9 @@
         tuiIconButton
         tuiSwipeAction
         type="button"
-    ></button>
+    >
+        Share
+    </button>
 </tui-swipe-actions>
 
 <tui-swipe-actions [autoClose]="true">
@@ -60,14 +66,18 @@
         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"
@@ -75,5 +85,7 @@
         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
index 2e3698d9e01c..084b2257f6e0 100644
--- 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
index 8f39650b25e5..854324836963 100644
--- 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>
diff --git a/projects/demo/src/modules/components/tag/examples/3/index.html b/projects/demo/src/modules/components/tag/examples/3/index.html
index 7f1846d08db7..11a71f633a2c 100644
--- a/projects/demo/src/modules/components/tag/examples/3/index.html
+++ b/projects/demo/src/modules/components/tag/examples/3/index.html
@@ -6,4 +6,6 @@
     value="Hey there"
     class="tag"
     [hoverable]="true"
-></button>
+>
+    Custom tag
+</button>
diff --git a/projects/demo/src/modules/components/tag/examples/6/index.html b/projects/demo/src/modules/components/tag/examples/6/index.html
index d48ee011742d..89f73d183b9d 100644
--- a/projects/demo/src/modules/components/tag/examples/6/index.html
+++ b/projects/demo/src/modules/components/tag/examples/6/index.html
@@ -9,7 +9,9 @@
     value="Button"
     class="tui-space_left-2"
     [hoverable]="true"
-></button>
+>
+    Button tag
+</button>
 <a
     href="https://maskito.dev"
     rel="noreferrer noopener"
@@ -19,4 +21,6 @@
     value="Link"
     class="tui-space_left-2"
     [hoverable]="true"
-></a>
+>
+    Link tag
+</a>
diff --git a/projects/demo/src/modules/directives/dropdown-hover/examples/2/index.html b/projects/demo/src/modules/directives/dropdown-hover/examples/2/index.html
index a8489b628a79..327bc7621243 100644
--- a/projects/demo/src/modules/directives/dropdown-hover/examples/2/index.html
+++ b/projects/demo/src/modules/directives/dropdown-hover/examples/2/index.html
@@ -55,7 +55,9 @@
         [tuiDropdown]="settings"
         [(tuiDropdownOpen)]="openSettings"
         (tui-tab-activate.stop)="(0)"
-    ></button>
+    >
+        Open settings
+    </button>
     <ng-template #settings>
         <div
             class="settings"
diff --git a/projects/demo/src/modules/directives/dropdown-open/examples/4/index.html b/projects/demo/src/modules/directives/dropdown-open/examples/4/index.html
index 02a868a3f640..77033d5b6e60 100644
--- a/projects/demo/src/modules/directives/dropdown-open/examples/4/index.html
+++ b/projects/demo/src/modules/directives/dropdown-open/examples/4/index.html
@@ -18,7 +18,9 @@
             type="reset"
             [iconStart]="length ? '@tui.x' : ''"
             (mousedown.silent.prevent)="(0)"
-        ></button>
+        >
+            Reset
+        </button>
     </button>
     <ng-template #dropdown>
         <tui-data-list-wrapper
diff --git a/projects/demo/src/modules/directives/hint-describe/examples/1/index.html b/projects/demo/src/modules/directives/hint-describe/examples/1/index.html
index ed8f28417c3f..094257755264 100644
--- a/projects/demo/src/modules/directives/hint-describe/examples/1/index.html
+++ b/projects/demo/src/modules/directives/hint-describe/examples/1/index.html
@@ -7,7 +7,9 @@
         tuiHintDirection="right"
         tuiIconButton
         type="button"
-    ></button>
+    >
+        Help
+    </button>
 </p>
 <p>
     <button
diff --git a/projects/kit/components/pagination/pagination.style.less b/projects/kit/components/pagination/pagination.style.less
index 7b0fcea51003..77ab8e4f7bc0 100644
--- a/projects/kit/components/pagination/pagination.style.less
+++ b/projects/kit/components/pagination/pagination.style.less
@@ -16,6 +16,7 @@
     inline-size: var(--tui-height-s);
     margin: 0 0.125rem;
     flex-shrink: 0;
+    font-size: 0;
 
     &:first-child {
         margin-inline-start: 0;
diff --git a/projects/kit/components/pagination/pagination.template.html b/projects/kit/components/pagination/pagination.template.html
index 121a01322a50..792c6e598fab 100644
--- a/projects/kit/components/pagination/pagination.template.html
+++ b/projects/kit/components/pagination/pagination.template.html
@@ -67,7 +67,9 @@
             (click)="onElementClick(indexItem)"
             (keydown.arrowLeft.prevent)="onElementKeyDownArrowLeft(element)"
             (keydown.arrowRight.prevent)="onElementKeyDownArrowRight(element)"
-        ></button>
+        >
+            Move from {{ indexItem }}
+        </button>
     </ng-template>
     <ng-template #dotsTemplate>
         <div
diff --git a/projects/kit/components/preview/preview.template.html b/projects/kit/components/preview/preview.template.html
index 55ffafc13619..b4dc98696e2a 100644
--- a/projects/kit/components/preview/preview.template.html
+++ b/projects/kit/components/preview/preview.template.html
@@ -43,7 +43,9 @@
             [iconStart]="icons.rotate"
             [tuiHint]="texts.rotate"
             (click)="rotate()"
-        ></button>
+        >
+            Rotate
+        </button>
 
         <tui-preview-zoom
             *ngIf="zoomable"
diff --git a/projects/kit/components/preview/zoom/preview-zoom.template.html b/projects/kit/components/preview/zoom/preview-zoom.template.html
index 2b723d036c14..1cbefae83ee7 100644
--- a/projects/kit/components/preview/zoom/preview-zoom.template.html
+++ b/projects/kit/components/preview/zoom/preview-zoom.template.html
@@ -61,5 +61,7 @@
         [iconStart]="icons.zoomReset"
         [tuiHint]="texts.reset"
         (click)="onReset()"
-    ></button>
+    >
+        Reset
+    </button>
 </ng-container>
diff --git a/projects/kit/components/tree/components/tree-item-content/tree-item-content.template.html b/projects/kit/components/tree/components/tree-item-content/tree-item-content.template.html
index 9f4af3750e59..fab6cf62c372 100644
--- a/projects/kit/components/tree/components/tree-item-content/tree-item-content.template.html
+++ b/projects/kit/components/tree/components/tree-item-content/tree-item-content.template.html
@@ -9,5 +9,7 @@
     [iconStart]="icons.more"
     [style.border-radius.%]="100"
     (click)="onClick()"
-></button>
+>
+    More
+</button>
 <ng-container [ngTemplateOutlet]="context.template" />
diff --git a/projects/layout/components/app-bar/app-bar-back.style.less b/projects/layout/components/app-bar/app-bar-back.style.less
index 2192e6c7bb85..8297c0264766 100644
--- a/projects/layout/components/app-bar/app-bar-back.style.less
+++ b/projects/layout/components/app-bar/app-bar-back.style.less
@@ -7,6 +7,7 @@
     align-items: center;
     padding: 0 0.625rem 0 0.125rem;
     cursor: pointer;
+    font-size: 0;
 
     :host-context([data-platform='android']) {
         font-size: 0;
diff --git a/projects/legacy/components/color-selector/color-selector.template.html b/projects/legacy/components/color-selector/color-selector.template.html
index 7c571701ceed..153df07e8b64 100644
--- a/projects/legacy/components/color-selector/color-selector.template.html
+++ b/projects/legacy/components/color-selector/color-selector.template.html
@@ -69,7 +69,9 @@
             [iconStart]="getIcon(button)"
             [tuiHint]="button"
             (click)="onDirectionChange(button)"
-        ></button>
+        >
+            Direction
+        </button>
     </div>
 </ng-container>
 <tui-color-picker
diff --git a/projects/legacy/components/color-selector/palette/palette.template.html b/projects/legacy/components/color-selector/palette/palette.template.html
index dcec1a163b28..8f70d436a64b 100644
--- a/projects/legacy/components/color-selector/palette/palette.template.html
+++ b/projects/legacy/components/color-selector/palette/palette.template.html
@@ -7,4 +7,6 @@
     [tuiHint]="color.key"
     [tuiHintDescribe]="color.key"
     (click)="selectedColor.emit(color.value)"
-></button>
+>
+    Color is {{ color }}
+</button>