feat: add aria label, fix test, transition constant for better testing

src/components/image/ImageManager.svelte

@@ -22,9 +22,9 @@
     <CropInline />
 
     <div class="crop-controls">
-      <Button label="Загрузить" icon={Upload} type="secondary" />
-      <Button label="Редактировать" icon={Reset} type="outline" />
-      <Button label="Сбросить" icon={Pencil} type="outline" />
+      <Button label="Загрузить" ariaLabel="Upload" icon={Upload} type="secondary" />
+      <Button label="Редактировать" ariaLabel="Edit" icon={Reset} type="outline" />
+      <Button label="Сбросить" ariaLabel="Reset" icon={Pencil} type="outline" />
     </div>
 
     <SettingsGrid>

src/components/panel/PreviewControls.svelte

@@ -1,7 +1,6 @@
 <script lang="ts">
   import Button from "$components/ui/Button.svelte";
   import type { SlideDirectionType } from "$lib/constants";
-  import { PANEL_SETTINGS } from "$lib/constants";
   import ChevronLeft from "~icons/lucide/chevron-left";
   import ChevronRight from "~icons/lucide/chevron-right";
 
@@ -25,13 +24,11 @@
     if (current < max - 1) current++;
     direction = "next";
   }
-
-  let xDirection = $derived(direction == "next" ? PANEL_SETTINGS.PANEL_WIDTH : -PANEL_SETTINGS.PANEL_WIDTH);
 </script>
 
-<Button icon={ChevronLeft} type="mini" onclick={prev} disabled={isFirst} />
+<Button icon={ChevronLeft} ariaLabel="Previous slide" type="mini" onclick={prev} disabled={isFirst} />
 <span class="panel-indicator">{current + 1} / {max}</span>
-<Button icon={ChevronRight} type="mini" onclick={next} disabled={isLast} />
+<Button icon={ChevronRight} ariaLabel="Next slide" type="mini" onclick={next} disabled={isLast} />
 
 <style>
   .panel-indicator {

src/components/panel/PreviewManager.svelte

@@ -2,7 +2,7 @@
   import Card from "$components/layout/Card.svelte";
   import Badge from "$components/ui/Badge.svelte";
   import Button from "$components/ui/Button.svelte";
-  import { PANEL_SETTINGS, type SlideDirectionType } from "$lib/constants";
+  import { PANEL_SETTINGS, TRANSITION_DURATION, type SlideDirectionType } from "$lib/constants";
   import { downloadService, type DownloadItem } from "$services/downloadService";
   import { konvaAllStagesState } from "$states/konvaAllStages.svelte";
   import { konvaStageState } from "$states/konvaStage.svelte";
@@ -62,8 +62,8 @@
           {@const text = textsState?.texts[current]?.text}
           <div
             class="konva-wrapper"
-            in:fly={{ x: xDirection, duration: 300 }}
-            out:fly={{ x: -xDirection, duration: 300 }}
+            in:fly={{ x: xDirection, duration: TRANSITION_DURATION }}
+            out:fly={{ x: -xDirection, duration: TRANSITION_DURATION }}
           >
             <Preview {text} bind:stage={konvaStageState.stage} />
           </div>
@@ -77,8 +77,8 @@
     </div>
 
     <div class="panel-actions">
-      <Button label="Скачать всё" icon={Download} onclick={downloadAll} />
-      <Button label="Скачать" type="outline" icon={Download} onclick={downloadCurrent} />
+      <Button label="Скачать всё" ariaLabel="Download all" icon={Download} onclick={downloadAll} />
+      <Button label="Скачать" ariaLabel="Download current" type="outline" icon={Download} onclick={downloadCurrent} />
     </div>
   </div>
 </Card>

src/components/text/TextInlineEdit.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
   import Button from "$components/ui/Button.svelte";
+  import { TRANSITION_DURATION } from "$lib/constants";
   import { fly } from "svelte/transition";
   import Cross from "~icons/lucide/x";
 
@@ -12,10 +13,10 @@
   let { text = $bindable(), id, ondelete }: Props = $props();
 </script>
 
-<div class="text-item" transition:fly={{ x: 600, duration: 300 }}>
+<li class="text-item" transition:fly={{ x: 600, duration: TRANSITION_DURATION }}>
   <input type="text" bind:value={text} />
-  <Button icon={Cross} type="danger" onclick={() => ondelete(id)} />
-</div>
+  <Button icon={Cross} ariaLabel="Delete" type="danger" onclick={() => ondelete(id)} />
+</li>
 
 <style>
   .text-item {

src/components/text/TextInput.svelte

@@ -1,10 +1,11 @@
 <script lang="ts">
   interface Props {
     text: string;
+    ariaLabel: string;
     onenter: () => void;
   }
 
-  let { text = $bindable(), onenter }: Props = $props();
+  let { text = $bindable(), onenter, ariaLabel }: Props = $props();
 
   function handleKeyboard(event: KeyboardEvent) {
     if (event.key === "Enter") {
@@ -13,7 +14,14 @@
   }
 </script>
 
-<input bind:value={text} class="text-input" type="text" placeholder="Введите текст..." onkeydown={handleKeyboard} />
+<input
+  aria-label={ariaLabel}
+  bind:value={text}
+  class="text-input"
+  type="text"
+  placeholder="Введите текст..."
+  onkeydown={handleKeyboard}
+/>
 
 <style>
   .text-input {

src/components/text/TextManager.svelte

@@ -21,14 +21,14 @@
 
 <Card title="Тексты панелей">
   <InputGroup>
-    <TextInput bind:text onenter={addText} />
-    <Button icon={Plus} onclick={addText} />
+    <TextInput ariaLabel="Input new text" bind:text onenter={addText} />
+    <Button icon={Plus} ariaLabel="Add text" onclick={addText} />
   </InputGroup>
-  <div class="texts-list">
+  <ul class="texts-list">
     {#each textsState.texts as { text, id } (id)}
       <TextInlineEdit {id} {text} ondelete={() => deleteText(id)} />
     {/each}
-  </div>
+  </ul>
 </Card>
 
 <style>

src/components/ui/Button.svelte

@@ -4,13 +4,14 @@
 
   interface Props {
     icon: Component;
+    ariaLabel: string;
     onclick?: MouseEventHandler<HTMLButtonElement>;
     disabled?: boolean;
     label?: string;
     type?: "primary" | "secondary" | "danger" | "outline" | "mini";
   }
 
-  let { icon: Icon, onclick = () => {}, disabled = false, label = "", type = "primary" }: Props = $props();
+  let { icon: Icon, ariaLabel, onclick = () => {}, disabled = false, label = "", type = "primary" }: Props = $props();
 </script>
 
 <button
@@ -22,6 +23,7 @@
   class:btn-mini={type === "mini"}
   {disabled}
   {onclick}
+  aria-label={ariaLabel}
 >
   <Icon />
   {label}

src/lib/constants.ts

@@ -65,3 +65,5 @@ export const TextAlign = {
 
 export type TextAlignType = (typeof TextAlign)[keyof typeof TextAlign];
 export const DEFAULT_TEXT_ALIGN: TextAlignType = TextAlign.CENTER;
+
+export const TRANSITION_DURATION = import.meta.env.MODE === "test" ? 0 : 300;

src/routes/+layout.svelte

@@ -75,6 +75,11 @@
     box-sizing: border-box;
   }
 
+  :global(ul) {
+    list-style: none;
+    text-indent: 0;
+  }
+
   :global(body) {
     font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", sans-serif;
     background: var(--bg-primary);