From 2d96560375478371332100457aea84367b58535f Mon Sep 17 00:00:00 2001
From: Philipp Heckel <pheckel@datto.com>
Date: Mon, 2 May 2022 20:02:21 -0400
Subject: [PATCH] Finish publish dialog aria- stuff

---
 web/public/static/langs/en.json     |  6 ++++++
 web/src/components/EmojiPicker.js   |  6 ++++--
 web/src/components/PublishDialog.js | 23 ++++++++++++++++-------
 3 files changed, 26 insertions(+), 9 deletions(-)

diff --git a/web/public/static/langs/en.json b/web/public/static/langs/en.json
index c97859c..30944e3 100644
--- a/web/public/static/langs/en.json
+++ b/web/public/static/langs/en.json
@@ -74,6 +74,7 @@
   "publish_dialog_base_url_placeholder": "Service URL, e.g. https://example.com",
   "publish_dialog_topic_label": "Topic name",
   "publish_dialog_topic_placeholder": "Topic name, e.g. phil_alerts",
+  "publish_dialog_topic_reset": "Reset topic",
   "publish_dialog_title_label": "Title",
   "publish_dialog_title_placeholder": "Notification title, e.g. Disk space alert",
   "publish_dialog_message_label": "Message",
@@ -83,14 +84,18 @@
   "publish_dialog_priority_label": "Priority",
   "publish_dialog_click_label": "Click URL",
   "publish_dialog_click_placeholder": "URL that is opened when notification is clicked",
+  "publish_dialog_click_reset": "Remove click URL",
   "publish_dialog_email_label": "Email",
   "publish_dialog_email_placeholder": "Address to forward the notification to, e.g. phil@example.com",
+  "publish_dialog_email_reset": "Remove email forward",
   "publish_dialog_attach_label": "Attachment URL",
   "publish_dialog_attach_placeholder": "Attach file by URL, e.g. https://f-droid.org/F-Droid.apk",
+  "publish_dialog_attach_reset": "Remove attachment URL",
   "publish_dialog_filename_label": "Filename",
   "publish_dialog_filename_placeholder": "Attachment filename",
   "publish_dialog_delay_label": "Delay",
   "publish_dialog_delay_placeholder": "Delay delivery, e.g. {{unixTimestamp}}, {{relativeTime}}, or \"{{naturalLanguage}}\" (English only)",
+  "publish_dialog_delay_reset": "Remove delayed delivery",
   "publish_dialog_other_features": "Other features:",
   "publish_dialog_chip_click_label": "Click URL",
   "publish_dialog_chip_email_label": "Forward to email",
@@ -105,6 +110,7 @@
   "publish_dialog_checkbox_publish_another": "Publish another",
   "publish_dialog_attached_file_title": "Attached file:",
   "publish_dialog_attached_file_filename_placeholder": "Attachment filename",
+  "publish_dialog_attached_file_remove": "Remove attached file",
   "publish_dialog_drop_file_here": "Drop file here",
   "emoji_picker_search_placeholder": "Search emoji",
   "emoji_picker_search_clear": "Clear search",
diff --git a/web/src/components/EmojiPicker.js b/web/src/components/EmojiPicker.js
index 9e5da67..9b29e8f 100644
--- a/web/src/components/EmojiPicker.js
+++ b/web/src/components/EmojiPicker.js
@@ -73,8 +73,6 @@ const EmojiPicker = (props) => {
                                 inputRef={searchRef}
                                 margin="dense"
                                 size="small"
-                                role="searchbox" 
-                                aria-label={t("emoji_picker_search_placeholder")}
                                 placeholder={t("emoji_picker_search_placeholder")}
                                 value={search}
                                 onChange={ev => setSearch(ev.target.value)}
@@ -82,6 +80,10 @@ const EmojiPicker = (props) => {
                                 variant="standard"
                                 fullWidth
                                 sx={{ marginTop: 0, marginBottom: "12px", paddingRight: 2 }}
+                                inputProps={{
+                                    role: "searchbox",
+                                    "aria-label": t("emoji_picker_search_placeholder")
+                                }}
                                 InputProps={{
                                     endAdornment:
                                         <InputAdornment position="end" sx={{ display: (search) ? '' : 'none' }}>
diff --git a/web/src/components/PublishDialog.js b/web/src/components/PublishDialog.js
index d78e67b..90e4b9b 100644
--- a/web/src/components/PublishDialog.js
+++ b/web/src/components/PublishDialog.js
@@ -232,7 +232,7 @@ const PublishDialog = (props) => {
                 <DialogContent>
                     {dropZone && <DropBox/>}
                     {showTopicUrl &&
-                        <ClosableRow closable={!!props.baseUrl && !!props.topic} disabled={disabled} onClose={() => {
+                        <ClosableRow closable={!!props.baseUrl && !!props.topic} disabled={disabled} closeLabel={t("publish_dialog_topic_reset")} onClose={() => {
                             setBaseUrl(props.baseUrl);
                             setTopic(props.topic);
                             setShowTopicUrl(false);
@@ -338,7 +338,7 @@ const PublishDialog = (props) => {
                         </FormControl>
                     </div>
                     {showClickUrl &&
-                        <ClosableRow disabled={disabled} onClose={() => {
+                        <ClosableRow disabled={disabled} closeLabel={t("publish_dialog_click_reset")} onClose={() => {
                             setClickUrl("");
                             setShowClickUrl(false);
                         }}>
@@ -357,7 +357,7 @@ const PublishDialog = (props) => {
                         </ClosableRow>
                     }
                     {showEmail &&
-                        <ClosableRow disabled={disabled} onClose={() => {
+                        <ClosableRow disabled={disabled} closeLabel={t("publish_dialog_email_reset")} onClose={() => {
                             setEmail("");
                             setShowEmail(false);
                         }}>
@@ -376,7 +376,7 @@ const PublishDialog = (props) => {
                         </ClosableRow>
                     }
                     {showAttachUrl &&
-                        <ClosableRow disabled={disabled} onClose={() => {
+                        <ClosableRow disabled={disabled} closeLabel={t("publish_dialog_attach_reset")} onClose={() => {
                             setAttachUrl("");
                             setFilename("");
                             setFilenameEdited(false);
@@ -444,7 +444,7 @@ const PublishDialog = (props) => {
                         }}
                     />}
                     {showDelay &&
-                        <ClosableRow disabled={disabled} onClose={() => {
+                        <ClosableRow disabled={disabled} closeLabel={t("publish_dialog_delay_reset")} onClose={() => {
                             setDelay("");
                             setShowDelay(false);
                         }}>
@@ -525,7 +525,11 @@ const ClosableRow = (props) => {
     return (
         <Row>
             {props.children}
-            {closable && <DialogIconButton disabled={props.disabled} onClick={props.onClose} sx={{marginLeft: "6px"}}><Close/></DialogIconButton>}
+            {closable &&
+                <DialogIconButton disabled={props.disabled} onClick={props.onClose} sx={{marginLeft: "6px"}} aria-label={props.closeLabel}>
+                    <Close/>
+                </DialogIconButton>
+            }
         </Row>
     );
 };
@@ -540,6 +544,7 @@ const DialogIconButton = (props) => {
             sx={{height: "45px", marginTop: "17px", ...sx}}
             onClick={props.onClick}
             disabled={props.disabled}
+            aria-label={props["aria-label"]}
         >
             {props.children}
         </IconButton>
@@ -580,7 +585,9 @@ const AttachmentBox = (props) => {
                         }
                     </Typography>
                 </Box>
-                <DialogIconButton disabled={props.disabled} onClick={props.onClose} sx={{marginLeft: "6px"}}><Close/></DialogIconButton>
+                <DialogIconButton disabled={props.disabled} onClick={props.onClose} sx={{marginLeft: "6px"}} aria-label={t("publish_dialog_attached_file_remove")}>
+                    <Close/>
+                </DialogIconButton>
             </Box>
         </>
     );
@@ -605,12 +612,14 @@ const ExpandingTextField = (props) => {
                 ref={invisibleFieldRef}
                 component="span"
                 variant={props.variant}
+                aria-hidden={true}
                 sx={{position: "absolute", left: "-200%"}}
             >
                 {props.value}
             </Typography>
             <TextField
                 margin="dense"
+                aria-label={props.placeholder}
                 placeholder={props.placeholder}
                 value={props.value}
                 onChange={props.onChange}