more style and a11y fixes

src/activities/Activities.tsx

@@ -75,6 +75,32 @@ const Activities: React.VoidFunctionComponent = () => {
         firstTab.setAttribute('tabindex', '0');
     }, [tabsRef, selectedActivity]);
 
+    // HACK: hoist html title attribute from icon to tab
+
+    useEffect(() => {
+        // @ts-expect-error: using private property
+        const tablist: HTMLDivElement = tabsRef.current?.tablistElement;
+
+        // istanbul-ignore-if: should not happen
+        if (!tablist) {
+            return;
+        }
+
+        for (const element of tablist.getElementsByClassName(
+            'pb-activities-tablist-tab',
+        )) {
+            const title = element.firstElementChild?.getAttribute('title');
+
+            // istanbul-ignore-if: should not happen
+            if (!title) {
+                continue;
+            }
+
+            element.setAttribute('title', title);
+            element.firstElementChild?.removeAttribute('title');
+        }
+    }, [tabsRef]);
+
     return (
         <Tabs
             aria-label={i18n.translate(I18nId.Title)}

src/activities/activities.scss

@@ -4,19 +4,27 @@
 @use '@blueprintjs/core/lib/scss/variables' as bp;
 @use '../variables' as pb;
 
-.pb-activities {
-    & .#{bp.$ns}-tab-list {
-        @include pb.background-contrast(6%);
-    }
-
-    // override bluetprintjs styles
-    .#{bp.$ns}-tabs.#{bp.$ns}-vertical > .#{bp.$ns}-tab-list &-tablist-tab {
+// override bluetprintjs styles
+.#{bp.$ns}-tabs.#{bp.$ns}-vertical > {
+    & .#{bp.$ns}-tab-list .pb-activities-tablist-tab {
         margin: bp.$pt-grid-size * 0.6;
         padding: unset;
         width: unset;
         line-height: unset;
     }
 
+    & .pb-activities-tabview {
+        padding-left: bp.$pt-grid-size;
+    }
+}
+
+.pb-activities {
+    // TODO: submit upstream patch to allow setting tablist class
+    &-tablist,
+    & .#{bp.$ns}-tab-list {
+        @include pb.background-contrast(6%);
+    }
+
     &-tabview {
         width: bp.$pt-grid-size * 25;
         padding: bp.$pt-grid-size;

src/explorer/Explorer.tsx

@@ -145,11 +145,15 @@ const Header: React.VoidFunctionComponent<HeaderProps> = ({ i18n }) => {
     const files = useSelector((s) => s.explorer.files);
 
     return (
-        <div style={{ display: 'flex', justifyContent: 'flex-end' }}>
-            <ButtonGroup minimal={true}>
+        <div className="pb-explorer-header">
+            <ButtonGroup
+                minimal={true}
+                role="toolbar"
+                aria-label={i18n.translate(I18nId.HeaderToolbarTitle)}
+            >
                 <ActionButton
                     icon="archive"
-                    tooltip={i18n.translate(I18nId.HeaderExportAllTooltip)}
+                    tooltip={i18n.translate(I18nId.HeaderToolbarExportAll)}
                     disabled={files.length === 0}
                     onClick={() => dispatch(explorerArchiveAllFiles())}
                 />
@@ -158,12 +162,12 @@ const Header: React.VoidFunctionComponent<HeaderProps> = ({ i18n }) => {
                     // what we want here since import is analogous to upload
                     // even though this is the "import" action
                     icon="export"
-                    tooltip={i18n.translate(I18nId.HeaderImportTooltip)}
+                    tooltip={i18n.translate(I18nId.HeaderToolbarImport)}
                     onClick={() => dispatch(explorerImportFiles())}
                 />
                 <ActionButton
                     icon="plus"
-                    tooltip={i18n.translate(I18nId.HeaderAddNewTooltip)}
+                    tooltip={i18n.translate(I18nId.HeaderToolbarAddNew)}
                     onClick={() => dispatch(explorerCreateNewFile())}
                 />
             </ButtonGroup>
@@ -377,7 +381,7 @@ const Explorer: React.VFC = () => {
     const [i18n] = useI18n();
 
     return (
-        <div className="h-100">
+        <div className="pb-explorer">
             <Header i18n={i18n} />
             <Divider />
             <FileTree i18n={i18n} />

src/explorer/explorer.scss

@@ -7,3 +7,10 @@
 .#{bp.$ns}-tree-node-content:not(:hover) .pb-explorer-file-action-button-group {
     display: none;
 }
+
+.pb-explorer {
+    &-header {
+        display: flex;
+        justify-content: flex-end;
+    }
+}

src/explorer/i18n.ts

@@ -4,9 +4,10 @@
 // Explorer translation keys.
 
 export enum I18nId {
-    HeaderExportAllTooltip = 'header.exportAllTooltip',
-    HeaderImportTooltip = 'header.importTooltip',
-    HeaderAddNewTooltip = 'header.addNewTooltip',
+    HeaderToolbarTitle = 'header.toolbar.title',
+    HeaderToolbarExportAll = 'header.toolbar.exportAll',
+    HeaderToolbarImport = 'header.toolbar.import',
+    HeaderToolbarAddNew = 'header.toolbar.addNew',
     TreeLabel = 'tree.label',
     TreeLiveDescriptorIntroAccessibilityGuide = 'tree.liveDescriptor.intro.accessibilityGuide',
     TreeLiveDescriptorIntroNavigation = 'tree.liveDescriptor.intro.navigation',

src/explorer/translations/en.json

@@ -1,8 +1,11 @@
 {
     "header": {
-        "exportAllTooltip": "Backup all files",
-        "importTooltip": "Import a file",
-        "addNewTooltip": "Create a new file"
+        "toolbar": {
+            "title": "File Actions",
+            "exportAll": "Backup all files",
+            "import": "Import a file",
+            "addNew": "Create a new file"
+        }
     },
     "tree": {
         "label": "File Explorer",