A11y last dance

src/components/Database/DatabaseContainer.tsx

@@ -60,7 +60,7 @@ export const DatabaseContainer: React.FC<React.PropsWithChildren<Props>> = ({
       <GridCell span={12} className="Database-Container">
         {hasNewDbs && (
           <Callout
-            icon="info"
+            type="note"
             actions={
               <Button theme="secondary" onClick={() => setDbs(databases)}>
                 Reload

src/components/Database/DatabasePicker.tsx

@@ -53,6 +53,10 @@ const DatabaseListItem: React.FC<
     <ListItem
       activated={activated}
       tag={Link}
+      aria-label={
+        // If this is the active DB, adjust the screen reader label to indicate as much.
+        activated ? name + ', currently selected' : ''
+      }
       to={to}
       data-testid={`nav-${name}`}
     >

src/components/common/Callout.tsx

@@ -24,17 +24,16 @@ import React, { ReactNode } from 'react';
 import { CustomThemeProvider, CustomThemeType, Type } from '../../themes';
 
 export interface CalloutProps {
-  /** Custom icon to override the default */
-  icon?: string;
   /** Show a lighter version of the callout */
   aside?: true;
   /** The color scheme of the callout. Defaults to 'note' */
   type?: CustomThemeType;
-
   /** Action buttons */
   actions?: ReactNode;
 }
 
+// Using a type from the map ensures we can apply the correct aria label in
+// addition to providing easy-to-use defaults.
 const DEFAULT_ICON_MAP: Record<string, string> = {
   [Type.CAUTION]: 'error',
   [Type.NOTE]: 'info',
@@ -45,12 +44,11 @@ const DEFAULT_ICON_MAP: Record<string, string> = {
 
 export const Callout: React.FC<React.PropsWithChildren<CalloutProps>> = ({
   children,
-  actions,
-  icon,
   aside,
   type = Type.NOTE,
+  actions,
 }) => {
-  const iconName = icon || DEFAULT_ICON_MAP[type];
+  const iconName = DEFAULT_ICON_MAP[type];
   const asideClass = aside ? ' Callout-aside' : '';
   const classes = `Callout Callout-${type}${asideClass}`;
 
@@ -66,7 +64,7 @@ export const Callout: React.FC<React.PropsWithChildren<CalloutProps>> = ({
             {iconName && (
               <Icon
                 icon={iconName}
-                aria-hidden="true"
+                aria-label={iconName + ' icon'}
                 className="Callout-icon"
               />
             )}

test-data/database_export/someotherdb.json

@@ -0,0 +1 @@
+{"a":"b"}

test-data/firebase-export-metadata.json

@@ -1 +1,20 @@
-{"version":"7.15.1","firestore":{"version":"1.11.1","path":"firestore_export","metadata_file":"firestore_export/firestore_export.overall_export_metadata"}}
+{
+  "version": "12.4.4",
+  "firestore": {
+    "version": "1.18.1",
+    "path": "firestore_export",
+    "metadata_file": "firestore_export/firestore_export.overall_export_metadata"
+  },
+  "database": {
+    "version": "4.11.2",
+    "path": "database_export"
+  },
+  "auth": {
+    "version": "12.4.4",
+    "path": "auth_export"
+  },
+  "storage": {
+    "version": "12.4.4",
+    "path": "storage_export"
+  }
+}