commit 3d3c901ce6d835dcc5b235db95e29c1c4a5c119d
parent e29284845ae1ada3d71a032c669c5daa5b9c4b50
Author: MTRNord <mtrnord1@gmail.com>
Date: Fri, 20 May 2022 16:54:23 +0200
Add aria labels
Diffstat:
3 files changed, 11 insertions(+), 11 deletions(-)
diff --git a/src/components/forms/BanForm.tsx b/src/components/forms/BanForm.tsx
@@ -126,7 +126,7 @@ class BanForm extends PureComponent<Props, State> {
<span className="text-gray-900 dark:text-gray-200 visually-hidden mb-2">Banlist</span>
<h4 className="text-gray-900 dark:text-gray-200 text-base font-thin mb-2 w-96 italic">(Warning: This doesn't check if the banlist can be written to or the bot if watches it)</h4>
<div className="w-96">
- <select required name="banlist" value={banlist} className="max-w-full min-w-full placeholder:text-gray-900 text-gray-900 rounded py-1.5 px-2" onChange={this.handleInputChange.bind(this)}>
+ <select aria-label="Banlist" aria-required="true" required name="banlist" value={banlist} className="max-w-full min-w-full placeholder:text-gray-900 text-gray-900 rounded py-1.5 px-2" onChange={this.handleInputChange.bind(this)}>
<option value="" disabled>Select an Banlist</option>
{
[...aliases_shortcodes].map(([alias, shortcode]) => {
@@ -139,7 +139,7 @@ class BanForm extends PureComponent<Props, State> {
<label className="inner-flex flex-col w-96">
<span className="text-gray-900 dark:text-gray-200 visually-hidden mb-2">Bantype</span>
<div className="w-96">
- <select required defaultValue="" name="bantype" value={bantype} className="max-w-full min-w-full placeholder:text-gray-900 text-gray-900 rounded py-1.5 px-2" onChange={this.handleInputChange.bind(this)}>
+ <select aria-label="Bantype" aria-required="true" required defaultValue="" name="bantype" value={bantype} className="max-w-full min-w-full placeholder:text-gray-900 text-gray-900 rounded py-1.5 px-2" onChange={this.handleInputChange.bind(this)}>
<option value="" disabled>Select an Bantype</option>
<option value="user">User</option>
<option value="server">Server</option>
@@ -150,13 +150,13 @@ class BanForm extends PureComponent<Props, State> {
<label className="block w-96">
<span className="text-gray-900 dark:text-gray-200 visually-hidden mb-2">Glob</span>
<div className="mt-1 w-full flex flex-row box-border items-center cursor-text duration-300 max-w-full">
- <input required placeholder="Glob" className="rounded py-1.5 px-2 min-w-[1.25rem] flex-[1] border-none placeholder:text-gray-900 text-gray-900" type="text" name="glob" value={glob} onChange={this.handleInputChange.bind(this)} />
+ <input aria-label="Glob" aria-required="true" required placeholder="Glob" className="rounded py-1.5 px-2 min-w-[1.25rem] flex-[1] border-none placeholder:text-gray-900 text-gray-900" type="text" name="glob" value={glob} onChange={this.handleInputChange.bind(this)} />
</div>
</label>
<label className="block w-96">
<span className="text-gray-900 dark:text-gray-200 visually-hidden mb-2">Reason</span>
<div className="mt-1 w-full flex flex-row box-border items-center cursor-text duration-300 max-w-full">
- <input placeholder="Reason" className="rounded py-1.5 px-2 min-w-[1.25rem] flex-[1] border-none placeholder:text-gray-900 text-gray-900" type="text" name="reason" value={reason} onChange={this.handleInputChange.bind(this)} />
+ <input aria-label="Reason" aria-required="false" placeholder="Reason" className="rounded py-1.5 px-2 min-w-[1.25rem] flex-[1] border-none placeholder:text-gray-900 text-gray-900" type="text" name="reason" value={reason} onChange={this.handleInputChange.bind(this)} />
</div>
</label>
diff --git a/src/components/forms/KickForm.tsx b/src/components/forms/KickForm.tsx
@@ -67,19 +67,19 @@ class KickForm extends PureComponent<Props, State> {
<label className="block w-96">
<span className="text-gray-900 dark:text-gray-200 visually-hidden mb-2">User ID</span>
<div className="mt-1 w-full flex flex-row box-border items-center cursor-text duration-300 max-w-full">
- <input required placeholder="User ID" className="rounded py-1.5 px-2 min-w-[1.25rem] flex-[1] border-none placeholder:text-gray-900 text-gray-900" type="text" name="user" value={user} onChange={this.handleInputChange.bind(this)} />
+ <input aria-label="User identifier" aria-required="true" required placeholder="User ID" className="rounded py-1.5 px-2 min-w-[1.25rem] flex-[1] border-none placeholder:text-gray-900 text-gray-900" type="text" name="user" value={user} onChange={this.handleInputChange.bind(this)} />
</div>
</label>
<label className="block w-96">
<span className="text-gray-900 dark:text-gray-200 visually-hidden mb-2">Room Alias/ID</span>
<div className="mt-1 w-full flex flex-row box-border items-center cursor-text duration-300 max-w-full">
- <input placeholder="Room Alias/ID" className="rounded py-1.5 px-2 min-w-[1.25rem] flex-[1] border-none placeholder:text-gray-900 text-gray-900" type="text" name="room" value={room} onChange={this.handleInputChange.bind(this)} />
+ <input aria-label="Room Alias or Room identifier" aria-required="false" placeholder="Room Alias/ID" className="rounded py-1.5 px-2 min-w-[1.25rem] flex-[1] border-none placeholder:text-gray-900 text-gray-900" type="text" name="room" value={room} onChange={this.handleInputChange.bind(this)} />
</div>
</label>
<label className="block w-96">
<span className="text-gray-900 dark:text-gray-200 visually-hidden mb-2">Reason</span>
<div className="mt-1 w-full flex flex-row box-border items-center cursor-text duration-300 max-w-full">
- <input placeholder="Reason" className="rounded py-1.5 px-2 min-w-[1.25rem] flex-[1] border-none placeholder:text-gray-900 text-gray-900" type="text" name="reason" value={reason} onChange={this.handleInputChange.bind(this)} />
+ <input aria-label="Reason" aria-required="false" placeholder="Reason" className="rounded py-1.5 px-2 min-w-[1.25rem] flex-[1] border-none placeholder:text-gray-900 text-gray-900" type="text" name="reason" value={reason} onChange={this.handleInputChange.bind(this)} />
</div>
</label>
diff --git a/src/components/forms/RedactForm.tsx b/src/components/forms/RedactForm.tsx
@@ -64,26 +64,26 @@ class RedactForm extends PureComponent<Props, State> {
<label className="block w-96">
<span className="text-gray-900 dark:text-gray-200 visually-hidden mb-2">User ID (required if Event Permalink empty)</span>
<div className="mt-1 w-full flex flex-row box-border items-center cursor-text duration-300 max-w-full">
- <input disabled={event !== ""} required={event === ""} placeholder="User ID (required if Permalink empty)" className="rounded py-1.5 px-2 min-w-[1.25rem] flex-[1] border-none placeholder:text-gray-900 text-gray-900" type="text" name="user" value={user} onChange={this.handleInputChange.bind(this)} />
+ <input aria-label="User identifier (required if Event Permalink empty)" aria-disabled={event !== ""} aria-required={event === ""} disabled={event !== ""} required={event === ""} placeholder="User ID (required if Permalink empty)" className="rounded py-1.5 px-2 min-w-[1.25rem] flex-[1] border-none placeholder:text-gray-900 text-gray-900" type="text" name="user" value={user} onChange={this.handleInputChange.bind(this)} />
</div>
</label>
<label className="block w-96">
<span className="text-gray-900 dark:text-gray-200 visually-hidden mb-2">Room (optional)</span>
<div className="mt-1 w-full flex flex-row box-border items-center cursor-text duration-300 max-w-full">
- <input disabled={event !== ""} placeholder="Room (optional)" className="rounded py-1.5 px-2 min-w-[1.25rem] flex-[1] border-none placeholder:text-gray-900 text-gray-900" type="text" name="room" value={room} onChange={this.handleInputChange.bind(this)} />
+ <input aria-label="Room" aria-disabled={event !== ""} aria-required="false" disabled={event !== ""} placeholder="Room (optional)" className="rounded py-1.5 px-2 min-w-[1.25rem] flex-[1] border-none placeholder:text-gray-900 text-gray-900" type="text" name="room" value={room} onChange={this.handleInputChange.bind(this)} />
</div>
</label>
<label className="block w-96">
<span className="text-gray-900 dark:text-gray-200 visually-hidden mb-2">Limit (optional)</span>
<div className="mt-1 w-full flex flex-row box-border items-center cursor-text duration-300 max-w-full">
- <input disabled={event !== ""} placeholder="Limit (optional)" className="rounded py-1.5 px-2 min-w-[1.25rem] flex-[1] border-none placeholder:text-gray-900 text-gray-900" type="text" name="limit" value={limit} onChange={this.handleInputChange.bind(this)} />
+ <input aria-label="Limit" aria-disabled={event !== ""} aria-required="false" disabled={event !== ""} placeholder="Limit (optional)" className="rounded py-1.5 px-2 min-w-[1.25rem] flex-[1] border-none placeholder:text-gray-900 text-gray-900" type="text" name="limit" value={limit} onChange={this.handleInputChange.bind(this)} />
</div>
</label>
<h4 className="text-gray-900 dark:text-gray-200 text-lg font-normal mb-1 w-96">Redacting an event</h4>
<label className="block w-96">
<span className="text-gray-900 dark:text-gray-200 visually-hidden mb-2">Event Permalink (required if User ID empty)</span>
<div className="mt-1 w-full flex flex-row box-border items-center cursor-text duration-300 max-w-full">
- <input disabled={user !== ""} required={user === ""} placeholder="Event Permalink (required if User ID empty)" className="rounded py-1.5 px-2 min-w-[1.25rem] flex-[1] border-none placeholder:text-gray-900 text-gray-900" type="text" name="event" value={event} onChange={this.handleInputChange.bind(this)} />
+ <input aria-label="Limit" aria-disabled={user !== ""} aria-required={user === ""} disabled={user !== ""} required={user === ""} placeholder="Event Permalink (required if User ID empty)" className="rounded py-1.5 px-2 min-w-[1.25rem] flex-[1] border-none placeholder:text-gray-900 text-gray-900" type="text" name="event" value={event} onChange={this.handleInputChange.bind(this)} />
</div>
</label>
