Fix accessibility of saving reminder banner (#382)

closes #380

---------

Co-authored-by: loiswells97 <loiswells97@users.noreply.github.com>
Co-authored-by: Lois Wells <lois.wells@raspberrypi.org>

CHANGELOG.md

@@ -32,7 +32,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 - Web component icon visibility (#358)
 - Renaming project, adding new file or renaming file always triggers autosave (#368)
 - Use `HtmlRunner` for `html` projects (#378)
-- Accessibility Fixes (#373)
+- Accessibility Fixes (#373, #382)
 
 ## [0.12.0] - 2023-01-27
 

src/i18n.js

@@ -119,6 +119,7 @@ i18n
             loginText: 'Log in to your Raspberry Pi account to save your work, and you\'ll be able to access and edit your project whenever you need to.'
           },
           notifications: {
+            close: 'close',
             loginPrompt: 'To save this project and access it later, don\'t forget to log in or sign up!',
             projectRemixed: 'Your remixed project has been saved',
             projectRenamed: 'You have renamed your project.',

src/utils/Notifications.js

@@ -1,6 +1,13 @@
 import { toast } from "react-toastify";
-import { InfoIcon, TickIcon } from "../Icons";
+import { CloseIcon, InfoIcon, TickIcon } from "../Icons";
 import i18n from "../i18n";
+import Button from "../components/Button/Button";
+
+const CloseButton = ({ closeToast }) => {
+  return (
+    <Button ButtonIcon = {CloseIcon} onClickHandler = {closeToast} title={i18n.t('notifications.close')} label={i18n.t('notifications.close')} />
+  )
+}
 
 const bottomCenterSettings = {
   position: toast.POSITION.BOTTOM_CENTER,
@@ -15,6 +22,7 @@ const topCenterSettings = {
   position: toast.POSITION.TOP_CENTER,
   autoClose: 6000,
   className: 'toast--top-center__message',
+  closeButton: CloseButton,
   containerId: 'top-center',
   hideProgressBar: true
 }