feat(offline): a11y improvements to offline indicator and tooltip

Author: grega

src/components/SaveButton/SaveButton.jsx

@@ -44,10 +44,18 @@ const SaveButton = ({ className, type, fill = false }) => {
 
   if (offlineEnabled && !isOnline && !user) {
     return (
-      <div className={classNames(className, "offline-badge")}>
+      <div
+        className={classNames(className, "offline-badge")}
+        tabIndex={0}
+        aria-describedby="offline-badge-tooltip"
+      >
         <OfflineIcon />
         <span>{t("header.offline")}</span>
-        <div className="offline-badge__tooltip">
+        <div
+          id="offline-badge-tooltip"
+          className="offline-badge__tooltip"
+          role="tooltip"
+        >
           <p>{t("header.offlineTooltipDevice")}</p>
           <p>{t("header.offlineTooltipContinue")}</p>
         </div>

src/components/SaveButton/SaveButton.test.js

@@ -272,6 +272,28 @@ describe("When project is loaded", () => {
       );
       expect(screen.queryByText("header.offline")).not.toBeInTheDocument();
     });
+
+    describe("accessibility", () => {
+      beforeEach(() => {
+        const store = configureStore([])(offlineState);
+        render(
+          <Provider store={store}>
+            <SaveButton />
+          </Provider>,
+        );
+      });
+
+      test("badge is keyboard focusable", () => {
+        const badge = screen.getByText("header.offline").parentElement;
+        expect(badge).toHaveAttribute("tabIndex", "0");
+      });
+
+      test("badge tooltip is associated via aria-describedby", () => {
+        const tooltip = screen.getByRole("tooltip");
+        const badge = screen.getByText("header.offline").parentElement;
+        expect(badge).toHaveAttribute("aria-describedby", tooltip.id);
+      });
+    });
   });
 
   afterAll(() => {