more style and a11y fixes

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",