Tooltips for buttons without visible labels

public/static/locales/en/common.json

@@ -1,8 +1,9 @@
 {
   "loginButton": "Log in",
+  "logoutButton": "Log out",
   "username": "Username",
   "password": "Password",
-  "goto": "Go to page {{name}}",
+  "gotoDashboard": "Go to dashboard",
   "error": {
     "loginGeneric": "Couldn't log you in",
     "loginMissingData": "Username or password missing!",
@@ -23,5 +24,11 @@
   "notFound": {
     "title": "Nothing to see here!",
     "description": "This page has either been removed or never existed before."
+  },
+  "theme": {
+    "light": "Light",
+    "dark": "Dark",
+    "useLight": "Use light theme",
+    "useDark": "Use dark theme"
   }
 }

public/static/locales/en/fileview.json

@@ -1,5 +1,8 @@
 {
   "inspector": "File Inspector",
+  "openInspector": "Open inspector",
+  "hideInspector": "Hide inspector",
+  "toggleZoom": "Toggle zoom",
   "description": "Description",
   "width": "Width",
   "height": "Height",
@@ -14,6 +17,7 @@
   "gif": {
     "alt": "Animated GIF image of the video",
     "load": "Loading GIF image...",
-    "loadError": "Sorry, we could not open this image!"
+    "loadError": "Sorry, we could not open this image!",
+    "toggle": "Toggle between video and GIF view"
   }
 }

src/Dashboard/views/DashboardHeaderRight.tsx

@@ -1,19 +1,27 @@
 import React from "react";
 import { Button, ButtonAppearance } from "../../_DesignSystem";
 import { FaSignOutAlt } from "react-icons/fa";
+import { useTranslation } from "react-i18next";
 
 const signOut = () => {
   window.location.assign(window.location.href + "api/logout.php");
 };
 
 const DashboardHeaderRight: React.ComponentType<{}> = props => {
+  const { t } = useTranslation("common");
+  const title = t("logoutButton");
+
   return (
-    <Button
-      appearance={ButtonAppearance.lightweight}
-      icon={FaSignOutAlt}
-      onClick={signOut}
-    />
+    <>
+      <Button
+        appearance={ButtonAppearance.lightweight}
+        icon={FaSignOutAlt}
+        onClick={signOut}
+        aria-label={title}
+        title={title}
+      />
+    </>
   );
 };
 
-export default DashboardHeaderRight;
+export default React.memo(DashboardHeaderRight);

src/FileView/views/FVSidebar/FVSidebarToggleButton.tsx

@@ -16,6 +16,7 @@ import { parseColorHexRGBA } from "@microsoft/fast-colors";
 import { designSystemContext } from "@microsoft/fast-jss-manager-react/dist/context";
 import { ButtonClassNameContract } from "../../../_DesignSystem/Button/Button.props";
 import { Button } from "../../../_DesignSystem";
+import { useTranslation } from "react-i18next";
 
 /**
  * The position on the x-axis where the button is placed by default
@@ -58,6 +59,7 @@ const FVSidebarToggleButton: React.ComponentType<FVSidebarToggleButtonProps> = (
   const { isSidebarVisible, setSidebarVisibility, sidebarPos } = useContext(SidebarData);
   const [isButtonHover, setButtonHover] = useState(false);
   const designCtx = useContext(designSystemContext) as DesignSystem;
+  const { t } = useTranslation("fileview");
 
   /**
    * Moves the button into the sidebar when opened.
@@ -124,6 +126,8 @@ const FVSidebarToggleButton: React.ComponentType<FVSidebarToggleButtonProps> = (
         )}
         onClick={() => setSidebarVisibility(!isSidebarVisible)}
         jssStyleSheet={customCaretStyle}
+        aria-label={isSidebarVisible ? t("hideInspector") : t("openInspector")}
+        title={isSidebarVisible ? t("hideInspector") : t("openInspector")}
       />
     </motion.div>
   );

src/FileView/views/HeaderContent/HeaderRightContent.tsx

@@ -1,7 +1,7 @@
 import { ButtonAppearance } from "@microsoft/fast-components-react-msft";
 import { DesignSystem, baseLayerLuminance } from "@microsoft/fast-components-styles-msft";
 import { ComponentStyles } from "@microsoft/fast-jss-manager-react";
-import React, { useContext } from "react";
+import React, { useContext, useMemo } from "react";
 import { FaAdjust, FaSearchPlus, FaVideo, FaImage } from "react-icons/fa";
 import {
   Button,
@@ -16,42 +16,42 @@ import { motion } from "framer-motion";
 import { SidebarData, SidebarEventEmitter } from "../FVSidebar/FVSidebarContext";
 import { Orientation } from "@microsoft/fast-web-utilities";
 import { TabItem } from "../../../_DesignSystem/Tabs/TabBar/TabBar.props";
+import { ThemeName } from "../../../_DesignSystem/Toolkit/DesignSystem.props";
+import { useTranslation } from "react-i18next";
 
 /**
  * Rotate the theme switcher icon based on the current theme
  */
 const customThemeSwitcherStyle: ComponentStyles<ButtonClassNameContract, DesignSystem> = {
   button: {
-    transform: des => {
-      const luminance: number = baseLayerLuminance(des);
-      return `rotate(${luminance > 0.5 ? 180 : 0}deg)`;
-    },
     marginRight: "60px",
-    transition: "transform .3s",
+    "& svg": {
+      transform: des => {
+        const luminance: number = baseLayerLuminance(des);
+        return `rotate(${luminance > 0.5 ? 180 : 0}deg)`;
+      },
+      transition: "transform .3s",
+    },
     "&:active": {
-      transition: "transform .3s, background .1s",
+      transition: "background .1s",
     },
   },
 };
 
-/**
- * // We need to make space for the sidebar button.
-const marginLeftStyleSheet: ComponentStyles<ButtonClassNameContract, DesignSystem> = {
-  button: {
-    marginRight: "60px",
-  },
-};
- */
-
 const tabBarItems: TabItem[] = [
   { icon: FaVideo, id: "video", title: "Video" },
   { icon: FaImage, id: "gif", title: "Gif" },
 ];
 
 export const HeaderRightContent: React.ComponentType<HeaderRightContentProps> = React.memo(
-  ({ onShare, isVideo, hasGif }) => {
+  ({ isVideo, hasGif }) => {
     const themeCtx = useContext(DesignToolkit);
     const { sidebarPos, isSidebarFloating } = useContext(SidebarData);
+    const { t } = useTranslation(["common", "fileview"]);
+
+    const isDarkMode: boolean = useMemo(() => themeCtx.theme === ThemeName.dark, [
+      themeCtx.theme,
+    ]);
 
     /**
      * Move right-side header contents alongside sidebar
@@ -73,7 +73,7 @@ export const HeaderRightContent: React.ComponentType<HeaderRightContentProps> =
           <>
             <TabBar
               id="video-gif"
-              label="Switch between video and gif view"
+              label={t("fileview:gif.toggle")}
               orientation={Orientation.horizontal}
               items={tabBarItems}
             />
@@ -84,6 +84,8 @@ export const HeaderRightContent: React.ComponentType<HeaderRightContentProps> =
             appearance={ButtonAppearance.lightweight}
             icon={FaSearchPlus}
             onClick={toggleZoom}
+            aria-label={t("fileview:toggleZoom")}
+            title={t("fileview:toggleZoom")}
           />
         )}
         <Button
@@ -91,6 +93,8 @@ export const HeaderRightContent: React.ComponentType<HeaderRightContentProps> =
           icon={FaAdjust}
           onClick={themeCtx.toggleTheme}
           jssStyleSheet={customThemeSwitcherStyle}
+          aria-label={isDarkMode ? t("common:theme.useLight") : t("common:theme.useDark")}
+          title={isDarkMode ? t("common:theme.useLight") : t("common:theme.useDark")}
         />
         {/*
         <Button

src/_DesignSystem/Header/Header.tsx

@@ -12,6 +12,7 @@ import Logo from "../Logo/Logo";
 import { Link } from "react-router-dom";
 import { classNames } from "@microsoft/fast-web-utilities";
 import { applyBackdropBackground } from "../Utils/stylesheetModifiers";
+import { useTranslation } from "react-i18next";
 
 /**
  * Hardcoded height of the header.
@@ -87,6 +88,7 @@ const styles: ComponentStyles<HeaderClassNameContract, DesignSystem> = {
 };
 
 const HeaderBase: React.FC<HeaderProps> = props => {
+  const { t } = useTranslation("common");
   return (
     <header
       className={classNames(
@@ -96,8 +98,8 @@ const HeaderBase: React.FC<HeaderProps> = props => {
       )}
     >
       <div className={"header-left " + props.managedClasses.header_left}>
-        <Link to="/">
-          <Logo size="45" alt="Go to Homepage" />
+        <Link to="/" title={t("gotoDashboard")}>
+          <Logo size="45" alt={t("gotoDashboard")} />
         </Link>
         <Paragraph size={2}>Shadis</Paragraph>
         {props.leftContent || null}