notfire/Iceshrimp.NET
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

[frontend/components] Fix accessibility issues in the compose dialogue. Fixes ISH-538.

Browse source
This commit is contained in:
Samuel Proulx 2024-10-17 21:49:38 -04:00 • committed by Laura Hausmann
parent 80f275663e
commit f58c3bff52
No known key found for this signature in database
GPG key ID: D044E84C5BE01605
2 changed files with 12 additions and 10 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

16
Iceshrimp.Frontend/Components/Compose.razor
View file

@ -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">

6
Iceshrimp.Frontend/Components/StateButton.razor
View file

@ -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
{