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"> <dialog class="dialog" @ref="Dialog">
<div class="compose"> <div class="compose">
<div class="header"> <div class="header">
<button @onclick="CloseDialog"> <button @onclick="CloseDialog" aria-label="close">
<Icon Name="Icons.X"/> <Icon Name="Icons.X" />
</button> </button>
<Dropdown TBind="NoteVisibility" Elements="@DropDownCreate()" @bind-Value="NoteDraft.Visibility"/> <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> <Initial>
@Loc["ComposePost"]<Icon Name="Icons.PaperPlaneRight"/> @Loc["ComposePost"]<Icon Name="Icons.PaperPlaneRight"/>
</Initial> </Initial>
@ -43,18 +43,18 @@
} }
@if (NoteDraft.Cw != null) @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"/> <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"> <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> <Icon Name="Icons.Upload" Size="1.3rem"></Icon>
</button> </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> <Icon Name="Icons.EyeSlash" Size="1.3rem"></Icon>
</button> </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> <Icon Name="Icons.Smiley" Size="1.3rem"></Icon>
</button> </button>
<div class="file-input"> <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 @(State switch
{ {
StateEnum.Initial => Initial, StateEnum.Initial => Initial,
@ -16,7 +16,9 @@
[Parameter] [EditorRequired] public required RenderFragment Failed { get; set; } [Parameter] [EditorRequired] public required RenderFragment Failed { get; set; }
[Parameter] [EditorRequired] public required RenderFragment Success { get; set; } [Parameter] [EditorRequired] public required RenderFragment Success { get; set; }
[Parameter] public string? ExtraClasses { 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 public enum StateEnum
{ {