vbatts/ntfy
1
0
Fork 0
Code Pull requests Activity

Finish up the labelling

Browse source
This commit is contained in:
Philipp Heckel 2022-05-03 14:53:07 -04:00
parent 2d96560375
commit 8a7bc38861
4 changed files with 65 additions and 17 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
docs/releases.md
View file

@ -27,6 +27,7 @@ to [@Joeharrison94](https://github.com/Joeharrison94) for the input.
**Features:** **Features:**
* Better parsing of the user actions, allowing quotes (no ticket) * Better parsing of the user actions, allowing quotes (no ticket)
* Make web app more accessible ([#217](https://github.com/binwiederhier/ntfy/issues/217))
**Bugs:** **Bugs:**

1
web/public/static/langs/en.json
View file

@ -118,6 +118,7 @@
"subscribe_dialog_subscribe_description": "Topics may not be password-protected, so choose a name that's not easy to guess. Once subscribed, you can PUT/POST notifications.", "subscribe_dialog_subscribe_description": "Topics may not be password-protected, so choose a name that's not easy to guess. Once subscribed, you can PUT/POST notifications.",
"subscribe_dialog_subscribe_topic_placeholder": "Topic name, e.g. phil_alerts", "subscribe_dialog_subscribe_topic_placeholder": "Topic name, e.g. phil_alerts",
"subscribe_dialog_subscribe_use_another_label": "Use another server", "subscribe_dialog_subscribe_use_another_label": "Use another server",
"subscribe_dialog_subscribe_base_url_label": "Service URL",
"subscribe_dialog_subscribe_button_cancel": "Cancel", "subscribe_dialog_subscribe_button_cancel": "Cancel",
"subscribe_dialog_subscribe_button_subscribe": "Subscribe", "subscribe_dialog_subscribe_button_subscribe": "Subscribe",
"subscribe_dialog_login_title": "Login required", "subscribe_dialog_login_title": "Login required",

53
web/src/components/PublishDialog.js
View file

@ -240,7 +240,6 @@ const PublishDialog = (props) => {
<TextField <TextField
margin="dense" margin="dense"
label={t("publish_dialog_base_url_label")} label={t("publish_dialog_base_url_label")}
aria-label={t("publish_dialog_base_url_label")}
placeholder={t("publish_dialog_base_url_placeholder")} placeholder={t("publish_dialog_base_url_placeholder")}
value={baseUrl} value={baseUrl}
onChange={ev => setBaseUrl(ev.target.value)} onChange={ev => setBaseUrl(ev.target.value)}
@ -248,11 +247,13 @@ const PublishDialog = (props) => {
type="url" type="url"
variant="standard" variant="standard"
sx={{flexGrow: 1, marginRight: 1}} sx={{flexGrow: 1, marginRight: 1}}
inputProps={{
"aria-label": t("publish_dialog_base_url_label")
}}
/> />
<TextField <TextField
margin="dense" margin="dense"
label={t("publish_dialog_topic_label")} label={t("publish_dialog_topic_label")}
aria-label={t("publish_dialog_topic_label")}
placeholder={t("publish_dialog_topic_placeholder")} placeholder={t("publish_dialog_topic_placeholder")}
value={topic} value={topic}
onChange={ev => setTopic(ev.target.value)} onChange={ev => setTopic(ev.target.value)}
@ -261,13 +262,15 @@ const PublishDialog = (props) => {
variant="standard" variant="standard"
autoFocus={!messageFocused} autoFocus={!messageFocused}
sx={{flexGrow: 1}} sx={{flexGrow: 1}}
inputProps={{
"aria-label": t("publish_dialog_topic_label")
}}
/> />
</ClosableRow> </ClosableRow>
} }
<TextField <TextField
margin="dense" margin="dense"
label={t("publish_dialog_title_label")} label={t("publish_dialog_title_label")}
aria-label={t("publish_dialog_title_label")}
placeholder={t("publish_dialog_title_placeholder")} placeholder={t("publish_dialog_title_placeholder")}
value={title} value={title}
onChange={ev => setTitle(ev.target.value)} onChange={ev => setTitle(ev.target.value)}
@ -275,11 +278,13 @@ const PublishDialog = (props) => {
type="text" type="text"
fullWidth fullWidth
variant="standard" variant="standard"
inputProps={{
"aria-label": t("publish_dialog_title_label")
}}
/> />
<TextField <TextField
margin="dense" margin="dense"
label={t("publish_dialog_message_label")} label={t("publish_dialog_message_label")}
aria-label={t("publish_dialog_message_label")}
placeholder={t("publish_dialog_message_placeholder")} placeholder={t("publish_dialog_message_placeholder")}
value={message} value={message}
onChange={ev => setMessage(ev.target.value)} onChange={ev => setMessage(ev.target.value)}
@ -290,6 +295,9 @@ const PublishDialog = (props) => {
autoFocus={messageFocused} autoFocus={messageFocused}
fullWidth fullWidth
multiline multiline
inputProps={{
"aria-label": t("publish_dialog_message_label")
}}
/> />
<div style={{display: 'flex'}}> <div style={{display: 'flex'}}>
<EmojiPicker <EmojiPicker
@ -303,7 +311,6 @@ const PublishDialog = (props) => {
<TextField <TextField
margin="dense" margin="dense"
label={t("publish_dialog_tags_label")} label={t("publish_dialog_tags_label")}
aria-label={t("publish_dialog_tags_label")}
placeholder={t("publish_dialog_tags_placeholder")} placeholder={t("publish_dialog_tags_placeholder")}
value={tags} value={tags}
onChange={ev => setTags(ev.target.value)} onChange={ev => setTags(ev.target.value)}
@ -311,6 +318,9 @@ const PublishDialog = (props) => {
type="text" type="text"
variant="standard" variant="standard"
sx={{flexGrow: 1, marginRight: 1}} sx={{flexGrow: 1, marginRight: 1}}
inputProps={{
"aria-label": t("publish_dialog_tags_label")
}}
/> />
<FormControl <FormControl
variant="standard" variant="standard"
@ -320,11 +330,13 @@ const PublishDialog = (props) => {
<InputLabel/> <InputLabel/>
<Select <Select
label={t("publish_dialog_priority_label")} label={t("publish_dialog_priority_label")}
aria-label={t("publish_dialog_priority_label")}
margin="dense" margin="dense"
value={priority} value={priority}
onChange={(ev) => setPriority(ev.target.value)} onChange={(ev) => setPriority(ev.target.value)}
disabled={disabled} disabled={disabled}
inputProps={{
"aria-label": t("publish_dialog_priority_label")
}}
> >
{[5,4,3,2,1].map(priority => {[5,4,3,2,1].map(priority =>
<MenuItem key={`priorityMenuItem${priority}`} value={priority} aria-label={t("notifications_priority_x", { priority: priority })}> <MenuItem key={`priorityMenuItem${priority}`} value={priority} aria-label={t("notifications_priority_x", { priority: priority })}>
@ -345,7 +357,6 @@ const PublishDialog = (props) => {
<TextField <TextField
margin="dense" margin="dense"
label={t("publish_dialog_click_label")} label={t("publish_dialog_click_label")}
aria-label={t("publish_dialog_click_label")}
placeholder={t("publish_dialog_click_placeholder")} placeholder={t("publish_dialog_click_placeholder")}
value={clickUrl} value={clickUrl}
onChange={ev => setClickUrl(ev.target.value)} onChange={ev => setClickUrl(ev.target.value)}
@ -353,6 +364,9 @@ const PublishDialog = (props) => {
type="url" type="url"
fullWidth fullWidth
variant="standard" variant="standard"
inputProps={{
"aria-label": t("publish_dialog_click_label")
}}
/> />
</ClosableRow> </ClosableRow>
} }
@ -364,7 +378,6 @@ const PublishDialog = (props) => {
<TextField <TextField
margin="dense" margin="dense"
label={t("publish_dialog_email_label")} label={t("publish_dialog_email_label")}
aria-label={t("publish_dialog_email_label")}
placeholder={t("publish_dialog_email_placeholder")} placeholder={t("publish_dialog_email_placeholder")}
value={email} value={email}
onChange={ev => setEmail(ev.target.value)} onChange={ev => setEmail(ev.target.value)}
@ -372,6 +385,9 @@ const PublishDialog = (props) => {
type="email" type="email"
variant="standard" variant="standard"
fullWidth fullWidth
inputProps={{
"aria-label": t("publish_dialog_email_label")
}}
/> />
</ClosableRow> </ClosableRow>
} }
@ -385,7 +401,6 @@ const PublishDialog = (props) => {
<TextField <TextField
margin="dense" margin="dense"
label={t("publish_dialog_attach_label")} label={t("publish_dialog_attach_label")}
aria-label={t("publish_dialog_attach_label")}
placeholder={t("publish_dialog_attach_placeholder")} placeholder={t("publish_dialog_attach_placeholder")}
value={attachUrl} value={attachUrl}
onChange={ev => { onChange={ev => {
@ -407,11 +422,13 @@ const PublishDialog = (props) => {
type="url" type="url"
variant="standard" variant="standard"
sx={{flexGrow: 5, marginRight: 1}} sx={{flexGrow: 5, marginRight: 1}}
inputProps={{
"aria-label": t("publish_dialog_attach_label")
}}
/> />
<TextField <TextField
margin="dense" margin="dense"
label={t("publish_dialog_filename_label")} label={t("publish_dialog_filename_label")}
aria-label={t("publish_dialog_filename_label")}
placeholder={t("publish_dialog_filename_placeholder")} placeholder={t("publish_dialog_filename_placeholder")}
value={filename} value={filename}
onChange={ev => { onChange={ev => {
@ -422,6 +439,9 @@ const PublishDialog = (props) => {
type="text" type="text"
variant="standard" variant="standard"
sx={{flexGrow: 1}} sx={{flexGrow: 1}}
inputProps={{
"aria-label": t("publish_dialog_filename_label")
}}
/> />
</ClosableRow> </ClosableRow>
} }
@ -430,6 +450,7 @@ const PublishDialog = (props) => {
ref={attachFileInput} ref={attachFileInput}
onChange={handleAttachFileChanged} onChange={handleAttachFileChanged}
style={{ display: 'none' }} style={{ display: 'none' }}
aria-hidden={true}
/> />
{showAttachFile && <AttachmentBox {showAttachFile && <AttachmentBox
file={attachFile} file={attachFile}
@ -451,7 +472,6 @@ const PublishDialog = (props) => {
<TextField <TextField
margin="dense" margin="dense"
label={t("publish_dialog_delay_label")} label={t("publish_dialog_delay_label")}
aria-label={t("publish_dialog_delay_label")}
placeholder={t("publish_dialog_delay_placeholder", { placeholder={t("publish_dialog_delay_placeholder", {
unixTimestamp: "1649029748", unixTimestamp: "1649029748",
relativeTime: "30m", relativeTime: "30m",
@ -463,6 +483,9 @@ const PublishDialog = (props) => {
type="text" type="text"
variant="standard" variant="standard"
fullWidth fullWidth
inputProps={{
"aria-label": t("publish_dialog_delay_label")
}}
/> />
</ClosableRow> </ClosableRow>
} }
@ -579,7 +602,7 @@ const AttachmentBox = (props) => {
<Typography variant="body2" sx={{ color: 'text.primary' }}> <Typography variant="body2" sx={{ color: 'text.primary' }}>
{formatBytes(file.size)} {formatBytes(file.size)}
{props.error && {props.error &&
<Typography component="span" sx={{ color: 'error.main' }}> <Typography component="span" sx={{ color: 'error.main' }} aria-live="polite">
{" "}({props.error}) {" "}({props.error})
</Typography> </Typography>
} }
@ -619,7 +642,6 @@ const ExpandingTextField = (props) => {
</Typography> </Typography>
<TextField <TextField
margin="dense" margin="dense"
aria-label={props.placeholder}
placeholder={props.placeholder} placeholder={props.placeholder}
value={props.value} value={props.value}
onChange={props.onChange} onChange={props.onChange}
@ -627,7 +649,10 @@ const ExpandingTextField = (props) => {
variant="standard" variant="standard"
sx={{ width: `${textWidth}px`, borderBottom: "none" }} sx={{ width: `${textWidth}px`, borderBottom: "none" }}
InputProps={{ style: { fontSize: theme.typography[props.variant].fontSize } }} InputProps={{ style: { fontSize: theme.typography[props.variant].fontSize } }}
inputProps={{ style: { paddingBottom: 0, paddingTop: 0 } }} inputProps={{
style: { paddingBottom: 0, paddingTop: 0 },
"aria-label": props.placeholder
}}
disabled={props.disabled} disabled={props.disabled}
/> />
</> </>

27
web/src/components/SubscribeDialog.js
View file

@ -102,16 +102,26 @@ const SubscribePage = (props) => {
margin="dense" margin="dense"
id="topic" id="topic"
placeholder={t("subscribe_dialog_subscribe_topic_placeholder")} placeholder={t("subscribe_dialog_subscribe_topic_placeholder")}
inputProps={{ maxLength: 64 }}
value={props.topic} value={props.topic}
onChange={ev => props.setTopic(ev.target.value)} onChange={ev => props.setTopic(ev.target.value)}
type="text" type="text"
fullWidth fullWidth
variant="standard" variant="standard"
inputProps={{
maxLength: 64,
"aria-label": t("subscribe_dialog_subscribe_topic_placeholder")
}}
/> />
<FormControlLabel <FormControlLabel
sx={{pt: 1}} sx={{pt: 1}}
control={<Checkbox onChange={handleUseAnotherChanged}/>} control={
<Checkbox
onChange={handleUseAnotherChanged}
inputProps={{
"aria-label": t("subscribe_dialog_subscribe_use_another_label")
}}
/>
}
label={t("subscribe_dialog_subscribe_use_another_label")} /> label={t("subscribe_dialog_subscribe_use_another_label")} />
{anotherServerVisible && <Autocomplete {anotherServerVisible && <Autocomplete
freeSolo freeSolo
@ -120,7 +130,12 @@ const SubscribePage = (props) => {
inputValue={props.baseUrl} inputValue={props.baseUrl}
onInputChange={(ev, newVal) => props.setBaseUrl(newVal)} onInputChange={(ev, newVal) => props.setBaseUrl(newVal)}
renderInput={ (params) => renderInput={ (params) =>
<TextField {...params} placeholder={window.location.origin} variant="standard"/> <TextField
{...params}
placeholder={window.location.origin}
variant="standard"
aria-label={t("subscribe_dialog_subscribe_base_url_label")}
/>
} }
/>} />}
</DialogContent> </DialogContent>
@ -168,6 +183,9 @@ const LoginPage = (props) => {
type="text" type="text"
fullWidth fullWidth
variant="standard" variant="standard"
inputProps={{
"aria-label": t("subscribe_dialog_login_username_label")
}}
/> />
<TextField <TextField
margin="dense" margin="dense"
@ -178,6 +196,9 @@ const LoginPage = (props) => {
onChange={ev => setPassword(ev.target.value)} onChange={ev => setPassword(ev.target.value)}
fullWidth fullWidth
variant="standard" variant="standard"
inputProps={{
"aria-label": t("subscribe_dialog_login_password_label")
}}
/> />
</DialogContent> </DialogContent>
<DialogFooter status={errorText}> <DialogFooter status={errorText}>