From f58c3bff52455e4f2b412df9f12be5f99698ee25 Mon Sep 17 00:00:00 2001
From: Samuel Proulx <samuel@interfree.ca>
Date: Thu, 17 Oct 2024 21:49:38 -0400
Subject: [PATCH] [frontend/components] Fix accessibility issues in the compose
 dialogue. Fixes ISH-538.

---
 Iceshrimp.Frontend/Components/Compose.razor     | 16 ++++++++--------
 Iceshrimp.Frontend/Components/StateButton.razor |  6 ++++--
 2 files changed, 12 insertions(+), 10 deletions(-)

diff --git a/Iceshrimp.Frontend/Components/Compose.razor b/Iceshrimp.Frontend/Components/Compose.razor
index e7acf32a..b0506a9b 100644
--- a/Iceshrimp.Frontend/Components/Compose.razor
+++ b/Iceshrimp.Frontend/Components/Compose.razor
@@ -16,11 +16,11 @@
 <dialog class="dialog" @ref="Dialog">
     <div class="compose">
         <div class="header">
-            <button @onclick="CloseDialog">
-                <Icon Name="Icons.X"/>
+            <button @onclick="CloseDialog" aria-label="close">
+                <Icon Name="Icons.X" />
             </button>
             <Dropdown TBind="NoteVisibility" Elements="@DropDownCreate()" @bind-Value="NoteDraft.Visibility"/>
-            <StateButton OnClick="SendNote" @ref="SendButton" ExtraClasses="post-btn">
+            <StateButton OnClick="SendNote" @ref="SendButton" ExtraClasses="post-btn" AriaLabel="post">
                 <Initial>
                     @Loc["ComposePost"]<Icon Name="Icons.PaperPlaneRight"/>
                 </Initial>
@@ -43,18 +43,18 @@
         }
         @if (NoteDraft.Cw != null)
         {
-            <input @bind="NoteDraft.Cw" class="input cw-field" placeholder="Content Warning"/>
+            <input @bind="NoteDraft.Cw" class="input cw-field" placeholder="Content Warning" aria-label="content warning"/>
             <hr class="separator"/>
         }
-        <textarea @ref="Textarea" @bind="NoteDraft.Text" class="textarea" placeholder="@TextPlaceholder" rows="5" cols="35" autofocus="autofocus"></textarea>
+        <textarea @ref="Textarea" @bind="NoteDraft.Text" class="textarea" placeholder="@TextPlaceholder" rows="5" cols="35" autofocus="autofocus" aria-label="note text"></textarea>
         <div class="footer">
-            <button class="footer-btn" @onclick="OpenUpload">
+            <button class="footer-btn" @onclick="OpenUpload" aria-label="upload">
                 <Icon Name="Icons.Upload" Size="1.3rem"></Icon>
             </button>
-            <button class="footer-btn" @onclick="ToggleCw">
+            <button class="footer-btn" @onclick="ToggleCw" aria-label="content warning">
                 <Icon Name="Icons.EyeSlash" Size="1.3rem"></Icon>
             </button>
-            <button @ref="EmojiButton" class="footer-btn positioned" @onclick="ToggleEmojiPicker">
+            <button @ref="EmojiButton" class="footer-btn positioned" @onclick="ToggleEmojiPicker" aria-label="emoji">
                 <Icon Name="Icons.Smiley" Size="1.3rem"></Icon>
             </button>
             <div class="file-input">
diff --git a/Iceshrimp.Frontend/Components/StateButton.razor b/Iceshrimp.Frontend/Components/StateButton.razor
index 03583d43..4826420f 100644
--- a/Iceshrimp.Frontend/Components/StateButton.razor
+++ b/Iceshrimp.Frontend/Components/StateButton.razor
@@ -1,4 +1,4 @@
-<button @onclick="OnClick" class="@ExtraClasses">
+<button @onclick="OnClick" class="@ExtraClasses" aria-label="@AriaLabel">
     @(State switch
     {
         StateEnum.Initial => Initial,
@@ -16,7 +16,9 @@
     [Parameter] [EditorRequired] public required RenderFragment Failed       { get; set; }
     [Parameter] [EditorRequired] public required RenderFragment Success      { get; set; }
     [Parameter]                  public          string?        ExtraClasses { get; set; }
-    public                                       StateEnum      State        { get; set; }
+    // this is godawful but properties can't have dashes and I'm not actually sure how else to do this:
+    [Parameter]                  public          string?        AriaLabel { get; set; }
+        public                                       StateEnum      State        { get; set; }
 
     public enum StateEnum
     {