From e57aac93f60c14e7f0906f864f2bf7e289e4cc2a Mon Sep 17 00:00:00 2001
From: Johannes Klein <johannes.t.klein@gmail.com>
Date: Sat, 4 Feb 2023 15:18:42 +0100
Subject: [PATCH] 418 create an index.js file for importing shared components
 (#427)

* Update .eslintrc.js

* Create index.js

* Change Button usage in GridItem

* Replace imports

* Add strings

* Add hint prop to button

* Add a11y hint prop to EvidenceButton

* Add EvidenceButton to index

* Add a11y props to EvidenceButton

* Update UiLibrary.js

* Add a11y props to CloseButton

* Add CloseButton to index and UiLib

* Rename function

* Update string

* Add a11y props to AddObsButton

* Add Tabs to index

* Linebreak

* Add Typography to index

* Remove unused text

* Refactor UserIcon test coverage in it's own test

* Add UserIcon to index

* Add UserIcon to UiLib

* Add InlineUser to index

* Add Quality badge to index

* Update UiLibrary.js

* Remove unused component

* Change AddObsButton a11y label

* Change hint

* Use consistent uri in snapshots

* Add snapshot to InlineUser

* Fix wrong user key

* Update Tabs.test.js

* Snapshot TODO

* Update NavButton.js

* Update snapshot

* Add snapshot for active user icon

* Remove snapshot result

* Add ActivityCount to index

* Update UiLibrary.js
---
 .eslintrc.js                                  |   5 +
 src/components/About.js                       |   2 +-
 src/components/AddObsModal.js                 |   4 +-
 src/components/Camera/StandardCamera.js       |   8 +-
 src/components/Identify/GridItem.js           |   5 +-
 src/components/LoginSignUp/Login.js           |   2 +-
 src/components/LoginSignUp/Logout.js          |   2 +-
 src/components/Messages/Messages.js           |   2 +-
 src/components/ObsDetails/ActivityItem.js     |   2 +-
 src/components/ObsDetails/ActivityTab.js      |   5 +-
 src/components/ObsDetails/ObsDetails.js       |   8 +-
 src/components/ObsEdit/AddEvidenceModal.js    |  11 +-
 .../ObsEdit/DeleteObservationDialog.js        |   2 +-
 .../ObsEdit/IdentificationSection.js          |   2 +-
 src/components/ObsEdit/LocationPicker.js      |   2 +-
 src/components/ObsEdit/ObsEdit.js             |   2 +-
 src/components/ObsEdit/SaveDialog.js          |   2 +-
 src/components/Observations/LoginPrompt.js    |   2 +-
 src/components/Observations/ObsCardStats.js   |   3 +-
 .../PhotoImporter/GroupPhotosFooter.js        |   2 +-
 src/components/PhotoImporter/PhotoGallery.js  |   2 +-
 src/components/Projects/ProjectTabs.js        |   2 +-
 .../{ => ActivityCount}/ActivityCount.js      |   0
 .../SharedComponents/Buttons/AddObsButton.js  |   3 +-
 .../SharedComponents/Buttons/Button.js        |   7 +-
 .../SharedComponents/Buttons/CloseButton.js   |   4 +-
 .../Buttons/EvidenceButton.js                 |   8 +-
 .../{ => InlineUser}/InlineUser.js            |   3 +-
 .../SharedComponents/NavBar/NavButton.js      |   2 +-
 .../SharedComponents/QualityBadge.js          |  19 ---
 .../QualityGradeStatus.js                     |   5 +-
 .../SharedComponents/{ => Tabs}/Tabs.js       |   2 +-
 .../{ => UserIcon}/UserIcon.js                |   0
 src/components/SharedComponents/index.js      |  19 +++
 src/components/UiLibrary.js                   | 115 ++++++++++++++----
 src/components/UserProfile/UserProfile.js     |   3 +-
 src/components/styledComponents.js            |   6 -
 src/i18n/l10n/en.ftl                          |  21 +++-
 src/i18n/l10n/en.ftl.json                     |  20 ++-
 src/i18n/strings.ftl                          |  21 +++-
 .../components/ObsDetails/ObsDetails.test.js  |   1 -
 .../{ => InlineUser}/InlineUser.test.js       |  35 +++++-
 .../UserIcon/UserIcon.test.js                 |  33 +++++
 .../__snapshots__/UserIcon.test.js.snap       | 107 ++++++++++++++++
 tests/unit/components/Tabs.test.js            |   2 +-
 45 files changed, 390 insertions(+), 123 deletions(-)
 rename src/components/SharedComponents/{ => ActivityCount}/ActivityCount.js (100%)
 rename src/components/SharedComponents/{ => InlineUser}/InlineUser.js (96%)
 delete mode 100644 src/components/SharedComponents/QualityBadge.js
 rename src/components/SharedComponents/{ => QualityGradeStatus}/QualityGradeStatus.js (94%)
 rename src/components/SharedComponents/{ => Tabs}/Tabs.js (95%)
 rename src/components/SharedComponents/{ => UserIcon}/UserIcon.js (100%)
 create mode 100644 src/components/SharedComponents/index.js
 rename tests/unit/components/SharedComponents/{ => InlineUser}/InlineUser.test.js (71%)
 create mode 100644 tests/unit/components/SharedComponents/UserIcon/UserIcon.test.js
 create mode 100644 tests/unit/components/SharedComponents/UserIcon/__snapshots__/UserIcon.test.js.snap

diff --git a/.eslintrc.js b/.eslintrc.js
index 86c9c995f..f9d3f5b79 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -49,6 +49,11 @@ module.exports = {
     // raise alarms when you try to import things not declared in
     // package.json.
     "import/no-extraneous-dependencies": ["error", {}],
+    "import/extensions": [2, {
+      js: "never",
+      jsx: "never",
+      json: "always"
+    }],
     "max-len": [
       "error",
       100,
diff --git a/src/components/About.js b/src/components/About.js
index cf4d33b86..062ffca23 100644
--- a/src/components/About.js
+++ b/src/components/About.js
@@ -1,6 +1,6 @@
 // @flow
 
-import Button from "components/SharedComponents/Buttons/Button";
+import { Button } from "components/SharedComponents";
 import {
   fontMonoClass, Text, View
 } from "components/styledComponents";
diff --git a/src/components/AddObsModal.js b/src/components/AddObsModal.js
index 085170ba1..ca3a0ffdc 100644
--- a/src/components/AddObsModal.js
+++ b/src/components/AddObsModal.js
@@ -78,7 +78,7 @@ const AddObsModal = ( { closeModal }: Props ): React.Node => {
           "camera",
           "mx-5",
           navToStandardCamera,
-          t( "Navigate-to-camera" ),
+          t( "Navigates-to-camera" ),
           "camera-button"
         )}
         {renderIconButton(
@@ -108,7 +108,7 @@ const AddObsModal = ( { closeModal }: Props ): React.Node => {
           "microphone",
           "mx-2",
           navToSoundRecorder,
-          t( "Navigate-to-sound-recorder" ),
+          t( "Navigates-to-sound-recorder" ),
           "record-sound-button"
         )}
       </View>
diff --git a/src/components/Camera/StandardCamera.js b/src/components/Camera/StandardCamera.js
index 994666af7..bd756396e 100644
--- a/src/components/Camera/StandardCamera.js
+++ b/src/components/Camera/StandardCamera.js
@@ -1,7 +1,7 @@
 // @flow
 
 import { useNavigation, useRoute } from "@react-navigation/native";
-import CloseButton from "components/SharedComponents/Buttons/CloseButton";
+import { CloseButton } from "components/SharedComponents";
 import {
   Pressable, View
 } from "components/styledComponents";
@@ -138,7 +138,7 @@ const StandardCamera = ( ): Node => {
     navigation.navigate( "ObsEdit" );
   };
 
-  const renderAddObsButtons = icon => {
+  const renderFlashButton = icon => {
     let testID = "";
     let accessibilityLabel = "";
     switch ( icon ) {
@@ -180,8 +180,8 @@ const StandardCamera = ( ): Node => {
           {hasFlash ? (
             <Pressable onPress={toggleFlash} accessibilityRole="button">
               {takePhotoOptions.flash === "on"
-                ? renderAddObsButtons( "flash-on-circle" )
-                : renderAddObsButtons( "camera" )}
+                ? renderFlashButton( "flash-on-circle" )
+                : renderFlashButton( "camera" )}
             </Pressable>
           ) : (
             <View />
diff --git a/src/components/Identify/GridItem.js b/src/components/Identify/GridItem.js
index c75638b11..4d86b9cbe 100644
--- a/src/components/Identify/GridItem.js
+++ b/src/components/Identify/GridItem.js
@@ -1,7 +1,7 @@
 // @flow
 
 import createIdentification from "api/identifications";
-import Button from "components/SharedComponents/Buttons/Button";
+import { Button } from "components/SharedComponents";
 import { t } from "i18next";
 import type { Node } from "react";
 import React, { useState } from "react";
@@ -88,9 +88,10 @@ const GridItem = ( {
           <Button
             level="focus"
             onPress={agreeWithObservation}
-            text={t( "agree" )}
+            text={t( "Agree" )}
             testID="Identify.agree"
             disabled={wasReviewed}
+            accessibilityHint={t( "Agrees-with-identification" )}
           />
         )}
       </View>
diff --git a/src/components/LoginSignUp/Login.js b/src/components/LoginSignUp/Login.js
index 18e4f2cf5..7fce0010c 100644
--- a/src/components/LoginSignUp/Login.js
+++ b/src/components/LoginSignUp/Login.js
@@ -1,7 +1,7 @@
 // @flow
 
 import { useNavigation } from "@react-navigation/native";
-import Button from "components/SharedComponents/Buttons/Button";
+import { Button } from "components/SharedComponents";
 import {
   Image, Pressable, SafeAreaView
 } from "components/styledComponents";
diff --git a/src/components/LoginSignUp/Logout.js b/src/components/LoginSignUp/Logout.js
index 8c44092e6..75fc7490d 100644
--- a/src/components/LoginSignUp/Logout.js
+++ b/src/components/LoginSignUp/Logout.js
@@ -2,7 +2,7 @@
 
 import { useNavigation } from "@react-navigation/native";
 import { useQueryClient } from "@tanstack/react-query";
-import Button from "components/SharedComponents/Buttons/Button";
+import { Button } from "components/SharedComponents";
 import { Pressable, SafeAreaView, View } from "components/styledComponents";
 import { t } from "i18next";
 import { RealmContext } from "providers/contexts";
diff --git a/src/components/Messages/Messages.js b/src/components/Messages/Messages.js
index 0a5646035..7d63a1290 100644
--- a/src/components/Messages/Messages.js
+++ b/src/components/Messages/Messages.js
@@ -1,7 +1,7 @@
 // @flow
 
 import searchMessages from "api/messages";
-import Tabs from "components/SharedComponents/Tabs";
+import { Tabs } from "components/SharedComponents";
 import ViewWithFooter from "components/SharedComponents/ViewWithFooter";
 import { Text } from "components/styledComponents";
 import { t } from "i18next";
diff --git a/src/components/ObsDetails/ActivityItem.js b/src/components/ObsDetails/ActivityItem.js
index be9317760..eba321147 100644
--- a/src/components/ObsDetails/ActivityItem.js
+++ b/src/components/ObsDetails/ActivityItem.js
@@ -4,7 +4,7 @@ import { useQueryClient } from "@tanstack/react-query";
 import { deleteComments } from "api/comments";
 import { isCurrentUser } from "components/LoginSignUp/AuthenticationService";
 import FlagItemModal from "components/ObsDetails/FlagItemModal";
-import InlineUser from "components/SharedComponents/InlineUser";
+import { InlineUser } from "components/SharedComponents";
 import KebabMenu from "components/SharedComponents/KebabMenu";
 import UserText from "components/SharedComponents/UserText";
 import {
diff --git a/src/components/ObsDetails/ActivityTab.js b/src/components/ObsDetails/ActivityTab.js
index fdc417e55..9cb7f7273 100644
--- a/src/components/ObsDetails/ActivityTab.js
+++ b/src/components/ObsDetails/ActivityTab.js
@@ -1,7 +1,7 @@
 // @flow
 import { useNavigation } from "@react-navigation/native";
 import createIdentification from "api/identifications";
-import Button from "components/SharedComponents/Buttons/Button";
+import { Button } from "components/SharedComponents";
 import { Text, View } from "components/styledComponents";
 import { formatISO } from "date-fns";
 import { t } from "i18next";
@@ -131,6 +131,8 @@ const ActivityTab = ( {
           onPress={navToAddID}
           className="mx-3"
           testID="ObsDetail.cvSuggestionsButton"
+          accessibilityRole="link"
+          accessibilityHint={t( "Navigates-to-suggest-identification" )}
         />
         <Button
           text={t( "Add-Comment" )}
@@ -138,6 +140,7 @@ const ActivityTab = ( {
           className="mx-3"
           testID="ObsDetail.commentButton"
           disabled={showCommentBox}
+          accessibilityHint={t( "Opens-add-comment-modal" )}
         />
       </View>
     </View>
diff --git a/src/components/ObsDetails/ObsDetails.js b/src/components/ObsDetails/ObsDetails.js
index da5fc32e5..3cb5082da 100644
--- a/src/components/ObsDetails/ObsDetails.js
+++ b/src/components/ObsDetails/ObsDetails.js
@@ -5,12 +5,14 @@ import { createComment } from "api/comments";
 import {
   faveObservation, fetchRemoteObservation, markObservationUpdatesViewed, unfaveObservation
 } from "api/observations";
+import {
+  InlineUser,
+  QualityGradeStatus,
+  Tabs
+} from "components/SharedComponents";
 import HideView from "components/SharedComponents/HideView";
-import InlineUser from "components/SharedComponents/InlineUser";
 import PhotoScroll from "components/SharedComponents/PhotoScroll";
-import QualityGradeStatus from "components/SharedComponents/QualityGradeStatus";
 import ScrollWithFooter from "components/SharedComponents/ScrollWithFooter";
-import Tabs from "components/SharedComponents/Tabs";
 import {
   Image, Pressable, Text, View
 } from "components/styledComponents";
diff --git a/src/components/ObsEdit/AddEvidenceModal.js b/src/components/ObsEdit/AddEvidenceModal.js
index b2c4c55c1..d77f3c797 100644
--- a/src/components/ObsEdit/AddEvidenceModal.js
+++ b/src/components/ObsEdit/AddEvidenceModal.js
@@ -7,7 +7,7 @@ import {
 } from "@gorhom/bottom-sheet";
 import { useNavigation } from "@react-navigation/native";
 import { MAX_PHOTOS_ALLOWED } from "components/Camera/StandardCamera";
-import EvidenceButton from "components/SharedComponents/Buttons/EvidenceButton";
+import { EvidenceButton } from "components/SharedComponents";
 import { Text, View } from "components/styledComponents";
 import type { Node } from "react";
 import React, {
@@ -109,19 +109,22 @@ const AddEvidenceModal = ( {
               icon="camera"
               handlePress={onTakePhoto}
               disabled={disableAddingMoreEvidence}
-              accessibilityLabel={t( "Navigate-to-camera" )}
+              accessibilityLabel={t( "Camera" )}
+              accessibilityHint={t( "Navigates-to-camera" )}
             />
             <EvidenceButton
               icon="pencil"
               handlePress={onImportPhoto}
               disabled={disableAddingMoreEvidence}
-              accessibilityLabel={t( "Navigate-to-bulk-importer" )}
+              accessibilityLabel={t( "Bulk-importer" )}
+              accessibilityHint={t( "Navigates-to-bulk-importer" )}
             />
             <EvidenceButton
               icon="microphone"
               handlePress={onRecordSound}
               disabled={disableAddingMoreEvidence}
-              accessibilityLabel={t( "Navigate-to-sound-recorder" )}
+              accessibilityLabel={t( "Sound-recorder" )}
+              accessibilityHint={t( "Navigates-to-sound-recorder" )}
             />
           </View>
           <Text
diff --git a/src/components/ObsEdit/DeleteObservationDialog.js b/src/components/ObsEdit/DeleteObservationDialog.js
index fc04e77c1..63082d361 100644
--- a/src/components/ObsEdit/DeleteObservationDialog.js
+++ b/src/components/ObsEdit/DeleteObservationDialog.js
@@ -2,7 +2,7 @@
 
 import { useNavigation } from "@react-navigation/native";
 import { deleteObservation } from "api/observations";
-import Button from "components/SharedComponents/Buttons/Button";
+import { Button } from "components/SharedComponents";
 import { Text } from "components/styledComponents";
 import { t } from "i18next";
 import { ObsEditContext } from "providers/contexts";
diff --git a/src/components/ObsEdit/IdentificationSection.js b/src/components/ObsEdit/IdentificationSection.js
index 790f5e2d0..e73cf4441 100644
--- a/src/components/ObsEdit/IdentificationSection.js
+++ b/src/components/ObsEdit/IdentificationSection.js
@@ -1,7 +1,7 @@
 // @flow
 
 import { useNavigation } from "@react-navigation/native";
-import Button from "components/SharedComponents/Buttons/Button";
+import { Button } from "components/SharedComponents";
 import { Text, View } from "components/styledComponents";
 import { t } from "i18next";
 import { ObsEditContext } from "providers/contexts";
diff --git a/src/components/ObsEdit/LocationPicker.js b/src/components/ObsEdit/LocationPicker.js
index 55c1b2f71..dc3ee3548 100644
--- a/src/components/ObsEdit/LocationPicker.js
+++ b/src/components/ObsEdit/LocationPicker.js
@@ -1,6 +1,6 @@
 // @flow
 
-import Button from "components/SharedComponents/Buttons/Button";
+import { Button } from "components/SharedComponents";
 import InputField from "components/SharedComponents/InputField";
 import Map from "components/SharedComponents/Map";
 import ViewNoFooter from "components/SharedComponents/ViewNoFooter";
diff --git a/src/components/ObsEdit/ObsEdit.js b/src/components/ObsEdit/ObsEdit.js
index a082bcff1..dc4a8deb2 100644
--- a/src/components/ObsEdit/ObsEdit.js
+++ b/src/components/ObsEdit/ObsEdit.js
@@ -3,7 +3,7 @@
 import { HeaderBackButton } from "@react-navigation/elements";
 import { useFocusEffect, useNavigation, useRoute } from "@react-navigation/native";
 import MediaViewerModal from "components/MediaViewer/MediaViewerModal";
-import Button from "components/SharedComponents/Buttons/Button";
+import { Button } from "components/SharedComponents";
 import KebabMenu from "components/SharedComponents/KebabMenu";
 import { Text, View } from "components/styledComponents";
 import { t } from "i18next";
diff --git a/src/components/ObsEdit/SaveDialog.js b/src/components/ObsEdit/SaveDialog.js
index 9c3bc41c6..ddfdc6b78 100644
--- a/src/components/ObsEdit/SaveDialog.js
+++ b/src/components/ObsEdit/SaveDialog.js
@@ -1,6 +1,6 @@
 // @flow
 
-import Button from "components/SharedComponents/Buttons/Button";
+import { Button } from "components/SharedComponents";
 import { Text } from "components/styledComponents";
 import { t } from "i18next";
 import { ObsEditContext } from "providers/contexts";
diff --git a/src/components/Observations/LoginPrompt.js b/src/components/Observations/LoginPrompt.js
index b127f1654..f82e0e7e0 100644
--- a/src/components/Observations/LoginPrompt.js
+++ b/src/components/Observations/LoginPrompt.js
@@ -1,7 +1,7 @@
 // @flow
 
 import { useNavigation } from "@react-navigation/native";
-import Button from "components/SharedComponents/Buttons/Button";
+import { Button } from "components/SharedComponents";
 import { t } from "i18next";
 import type { Node } from "react";
 import React from "react";
diff --git a/src/components/Observations/ObsCardStats.js b/src/components/Observations/ObsCardStats.js
index 1adb4cbeb..af12489b0 100644
--- a/src/components/Observations/ObsCardStats.js
+++ b/src/components/Observations/ObsCardStats.js
@@ -1,8 +1,7 @@
 // @flow
 
 import checkCamelAndSnakeCase from "components/ObsDetails/helpers/checkCamelAndSnakeCase";
-import ActivityCount from "components/SharedComponents/ActivityCount";
-import QualityGradeStatus from "components/SharedComponents/QualityGradeStatus";
+import { ActivityCount, QualityGradeStatus } from "components/SharedComponents";
 import { View } from "components/styledComponents";
 import type { Node } from "react";
 import React from "react";
diff --git a/src/components/PhotoImporter/GroupPhotosFooter.js b/src/components/PhotoImporter/GroupPhotosFooter.js
index 7e084e965..7a0281e38 100644
--- a/src/components/PhotoImporter/GroupPhotosFooter.js
+++ b/src/components/PhotoImporter/GroupPhotosFooter.js
@@ -1,6 +1,6 @@
 // @flow
 
-import Button from "components/SharedComponents/Buttons/Button";
+import { Button } from "components/SharedComponents";
 import SecondaryCTAButton from "components/SharedComponents/Buttons/SecondaryCTAButton";
 import KebabMenu from "components/SharedComponents/KebabMenu";
 import { Text, View } from "components/styledComponents";
diff --git a/src/components/PhotoImporter/PhotoGallery.js b/src/components/PhotoImporter/PhotoGallery.js
index 777659350..dec97427b 100644
--- a/src/components/PhotoImporter/PhotoGallery.js
+++ b/src/components/PhotoImporter/PhotoGallery.js
@@ -5,7 +5,7 @@ import useCameraRollPhotos from "components/PhotoImporter/hooks/useCameraRollPho
 import usePhotoAlbums from "components/PhotoImporter/hooks/usePhotoAlbums";
 import PhotoAlbumPicker from "components/PhotoImporter/PhotoAlbumPicker";
 import PhotoGalleryImage from "components/PhotoImporter/PhotoGalleryImage";
-import Button from "components/SharedComponents/Buttons/Button";
+import { Button } from "components/SharedComponents";
 import ViewNoFooter from "components/SharedComponents/ViewNoFooter";
 import { Text, View } from "components/styledComponents";
 import { t } from "i18next";
diff --git a/src/components/Projects/ProjectTabs.js b/src/components/Projects/ProjectTabs.js
index 1100dacd9..ce6d4d6a4 100644
--- a/src/components/Projects/ProjectTabs.js
+++ b/src/components/Projects/ProjectTabs.js
@@ -1,7 +1,7 @@
 // @flow
 
 import { searchProjects } from "api/projects";
-import Tabs from "components/SharedComponents/Tabs";
+import { Tabs } from "components/SharedComponents";
 import { t } from "i18next";
 import type { Node } from "react";
 import React, { useEffect, useState } from "react";
diff --git a/src/components/SharedComponents/ActivityCount.js b/src/components/SharedComponents/ActivityCount/ActivityCount.js
similarity index 100%
rename from src/components/SharedComponents/ActivityCount.js
rename to src/components/SharedComponents/ActivityCount/ActivityCount.js
diff --git a/src/components/SharedComponents/Buttons/AddObsButton.js b/src/components/SharedComponents/Buttons/AddObsButton.js
index 6e36dc952..aaa1f77a9 100644
--- a/src/components/SharedComponents/Buttons/AddObsButton.js
+++ b/src/components/SharedComponents/Buttons/AddObsButton.js
@@ -27,7 +27,8 @@ const AddObsButton = ( ): React.Node => {
         mode="contained"
         containerColor={theme.colors.secondary}
         iconColor={theme.colors.onSecondary}
-        accessibilityLabel={t( "Open-add-evidence-modal" )}
+        accessibilityLabel={t( "Observe" )}
+        accessibilityHint={t( "Opens-add-observation-modal" )}
         className="m-0"
         disabled={false}
         testID="add-obs-button"
diff --git a/src/components/SharedComponents/Buttons/Button.js b/src/components/SharedComponents/Buttons/Button.js
index 0053f02aa..3960a264a 100644
--- a/src/components/SharedComponents/Buttons/Button.js
+++ b/src/components/SharedComponents/Buttons/Button.js
@@ -14,7 +14,8 @@ type ButtonProps = {
   loading?: boolean,
   style?: any,
   className?: string,
-  accessibilityRole?: string
+  accessibilityRole?: string,
+  accessibilityHint?: string
 }
 
 const setStyles = ( {
@@ -56,7 +57,8 @@ const Button = ( {
   loading,
   style,
   className,
-  accessibilityRole
+  accessibilityRole,
+  accessibilityHint
 }: ButtonProps ): React.Node => {
   const { buttonClass, textClass } = setStyles( { disabled, level, className } );
 
@@ -69,6 +71,7 @@ const Button = ( {
       testID={testID}
       accessibilityRole={accessibilityRole || "button"}
       accessibilityState={{ disabled }}
+      accessibilityHint={accessibilityHint}
     >
       {loading && <ActivityIndicator size={18} className="mr-2" />}
       <Heading4 className={textClass}>
diff --git a/src/components/SharedComponents/Buttons/CloseButton.js b/src/components/SharedComponents/Buttons/CloseButton.js
index a794b387b..901f9420e 100644
--- a/src/components/SharedComponents/Buttons/CloseButton.js
+++ b/src/components/SharedComponents/Buttons/CloseButton.js
@@ -20,7 +20,9 @@ const CloseButton = ( { className }: Props ): Node => {
       className={className}
       iconColor={theme.colors.background}
       onPress={( ) => navigation.goBack( )}
-      accessibilityLabel={t( "Return-to-previous-screen" )}
+      accessibilityRole="button"
+      accessibilityLabel={t( "Close" )}
+      accessibilityHint={t( "Returns-to-previous-screen" )}
       disabled={false}
     />
   );
diff --git a/src/components/SharedComponents/Buttons/EvidenceButton.js b/src/components/SharedComponents/Buttons/EvidenceButton.js
index 7154e8eed..ec5300366 100644
--- a/src/components/SharedComponents/Buttons/EvidenceButton.js
+++ b/src/components/SharedComponents/Buttons/EvidenceButton.js
@@ -6,14 +6,16 @@ type Props = {
   icon: any,
   disabled?: boolean,
   handlePress: any,
-  accessibilityLabel: string
+  accessibilityLabel: string,
+  accessibilityHint?: string
 }
 
 const EvidenceButton = ( {
   icon,
   disabled,
   handlePress,
-  accessibilityLabel
+  accessibilityLabel,
+  accessibilityHint
 }: Props ): React.Node => {
   const theme = useTheme( );
   return (
@@ -24,7 +26,9 @@ const EvidenceButton = ( {
       iconColor={theme.colors.onSecondary}
       size={35}
       icon={icon}
+      accessibilityRole="link"
       accessibilityLabel={accessibilityLabel}
+      accessibilityHint={accessibilityHint}
     />
   );
 };
diff --git a/src/components/SharedComponents/InlineUser.js b/src/components/SharedComponents/InlineUser/InlineUser.js
similarity index 96%
rename from src/components/SharedComponents/InlineUser.js
rename to src/components/SharedComponents/InlineUser/InlineUser.js
index 3d984c38b..93df12891 100644
--- a/src/components/SharedComponents/InlineUser.js
+++ b/src/components/SharedComponents/InlineUser/InlineUser.js
@@ -1,6 +1,7 @@
 // @flow
 
 import { useNavigation } from "@react-navigation/native";
+import UserIcon from "components/SharedComponents/UserIcon/UserIcon";
 import {
   Pressable, Text, View
 } from "components/styledComponents";
@@ -12,8 +13,6 @@ import User from "realmModels/User";
 import useIsConnected from "sharedHooks/useIsConnected";
 import colors from "styles/tailwindColors";
 
-import UserIcon from "./UserIcon";
-
 type Props = {
   user: any
 };
diff --git a/src/components/SharedComponents/NavBar/NavButton.js b/src/components/SharedComponents/NavBar/NavButton.js
index 5458babde..09f1e9f4a 100644
--- a/src/components/SharedComponents/NavBar/NavButton.js
+++ b/src/components/SharedComponents/NavBar/NavButton.js
@@ -1,5 +1,5 @@
 // @flow
-import UserIcon from "components/SharedComponents/UserIcon";
+import { UserIcon } from "components/SharedComponents";
 import { Pressable } from "components/styledComponents";
 import * as React from "react";
 import { IconButton } from "react-native-paper";
diff --git a/src/components/SharedComponents/QualityBadge.js b/src/components/SharedComponents/QualityBadge.js
deleted file mode 100644
index 2d78613a5..000000000
--- a/src/components/SharedComponents/QualityBadge.js
+++ /dev/null
@@ -1,19 +0,0 @@
-// @flow
-
-import { Text, View } from "components/styledComponents";
-import { t } from "i18next";
-import * as React from "react";
-
-type Props = {
-  qualityGrade: ?string,
-}
-
-const QualityBadge = ( { qualityGrade }: Props ): React.Node => (
-  <View className="bg-primary">
-    <Text className="text-white m-1">
-      {t( `Quality-Grade-Badge-${qualityGrade ? qualityGrade.replace( "_", "_" ) : ""}` )}
-    </Text>
-  </View>
-);
-
-export default QualityBadge;
diff --git a/src/components/SharedComponents/QualityGradeStatus.js b/src/components/SharedComponents/QualityGradeStatus/QualityGradeStatus.js
similarity index 94%
rename from src/components/SharedComponents/QualityGradeStatus.js
rename to src/components/SharedComponents/QualityGradeStatus/QualityGradeStatus.js
index 708fab2da..d2723934c 100644
--- a/src/components/SharedComponents/QualityGradeStatus.js
+++ b/src/components/SharedComponents/QualityGradeStatus/QualityGradeStatus.js
@@ -43,10 +43,7 @@ const qualityGradeSVG = ( qualityGrade, color ) => {
 };
 
 const QualityGradeStatus = ( { qualityGrade, color }: Props ): React.Node => (
-  <View>
-    { qualityGradeSVG( qualityGrade, color )}
-  </View>
-
+  <View>{qualityGradeSVG( qualityGrade, color )}</View>
 );
 
 export default QualityGradeStatus;
diff --git a/src/components/SharedComponents/Tabs.js b/src/components/SharedComponents/Tabs/Tabs.js
similarity index 95%
rename from src/components/SharedComponents/Tabs.js
rename to src/components/SharedComponents/Tabs/Tabs.js
index 3e2197a81..82ab4d599 100644
--- a/src/components/SharedComponents/Tabs.js
+++ b/src/components/SharedComponents/Tabs/Tabs.js
@@ -42,7 +42,7 @@ const Tabs = ( { tabs = DEFAULT_TABS, activeId }: Props ): Node => (
               testID={testID || `${id}-tab`}
               accessibilityRole="tab"
               accessibilityLabel={text}
-              accessibilityHint={t( "Switch-to-tab", { tab: text } )}
+              accessibilityHint={t( "Switches-to-tab", { tab: text } )}
               accessibilityState={{
                 selected: active,
                 expanded: active
diff --git a/src/components/SharedComponents/UserIcon.js b/src/components/SharedComponents/UserIcon/UserIcon.js
similarity index 100%
rename from src/components/SharedComponents/UserIcon.js
rename to src/components/SharedComponents/UserIcon/UserIcon.js
diff --git a/src/components/SharedComponents/index.js b/src/components/SharedComponents/index.js
new file mode 100644
index 000000000..336ae5782
--- /dev/null
+++ b/src/components/SharedComponents/index.js
@@ -0,0 +1,19 @@
+export { default as ActivityCount } from "./ActivityCount/ActivityCount";
+export { default as Button } from "./Buttons/Button";
+export { default as CloseButton } from "./Buttons/CloseButton";
+export { default as EvidenceButton } from "./Buttons/EvidenceButton";
+export { default as InlineUser } from "./InlineUser/InlineUser";
+export { default as QualityGradeStatus } from "./QualityGradeStatus/QualityGradeStatus";
+export { default as Tabs } from "./Tabs/Tabs";
+export { default as Body1 } from "./Typography/Body1";
+export { default as Body2 } from "./Typography/Body2";
+export { default as Body3 } from "./Typography/Body3";
+export { default as Body4 } from "./Typography/Body4";
+export { default as Heading1 } from "./Typography/Heading1";
+export { default as Heading2 } from "./Typography/Heading2";
+export { default as Heading3 } from "./Typography/Heading3";
+export { default as Heading4 } from "./Typography/Heading4";
+export { default as List1 } from "./Typography/List1";
+export { default as List2 } from "./Typography/List2";
+export { default as Subheading1 } from "./Typography/Subheading1";
+export { default as UserIcon } from "./UserIcon/UserIcon";
diff --git a/src/components/UiLibrary.js b/src/components/UiLibrary.js
index 9f34f625a..d710ccb6b 100644
--- a/src/components/UiLibrary.js
+++ b/src/components/UiLibrary.js
@@ -1,22 +1,27 @@
 import INatIcon, { glyphMap } from "components/INatIcon";
-import ActivityCount from "components/SharedComponents/ActivityCount";
+import {
+  ActivityCount,
+  Body1,
+  Body2,
+  Body3,
+  Body4,
+  Button,
+  CloseButton,
+  EvidenceButton,
+  Heading1,
+  Heading2,
+  Heading3,
+  Heading4,
+  InlineUser,
+  List1,
+  List2,
+  QualityGradeStatus,
+  Subheading1,
+  Tabs,
+  UserIcon
+} from "components/SharedComponents";
 import AddObsButton from "components/SharedComponents/Buttons/AddObsButton";
-import Button from "components/SharedComponents/Buttons/Button";
-import EvidenceButton from "components/SharedComponents/Buttons/EvidenceButton";
 import SecondaryCTAButton from "components/SharedComponents/Buttons/SecondaryCTAButton";
-import InlineUser from "components/SharedComponents/InlineUser";
-import QualityGradeStatus from "components/SharedComponents/QualityGradeStatus";
-import Body1 from "components/SharedComponents/Typography/Body1";
-import Body2 from "components/SharedComponents/Typography/Body2";
-import Body3 from "components/SharedComponents/Typography/Body3";
-import Body4 from "components/SharedComponents/Typography/Body4";
-import Heading1 from "components/SharedComponents/Typography/Heading1";
-import Heading2 from "components/SharedComponents/Typography/Heading2";
-import Heading3 from "components/SharedComponents/Typography/Heading3";
-import Heading4 from "components/SharedComponents/Typography/Heading4";
-import List1 from "components/SharedComponents/Typography/List1";
-import List2 from "components/SharedComponents/Typography/List2";
-import Subheading1 from "components/SharedComponents/Typography/Subheading1";
 import ViewWithFooter from "components/SharedComponents/ViewWithFooter";
 import {
   ScrollView,
@@ -45,7 +50,12 @@ const UiLibrary = ( ) => {
         </Body1>
         <Heading1>Buttons</Heading1>
         <Heading2>Button</Heading2>
-        <Button className="mb-2" level="primary" text="PRIMARY BUTTON" />
+        <Button
+          className="mb-2"
+          level="primary"
+          text="PRIMARY BUTTON"
+          accessibilityHint="Describes the result of performing the tap action on this element."
+        />
         <Button className="mb-2" text="NEUTRAL BUTTON" />
         <Button
           className="mb-2"
@@ -167,6 +177,15 @@ const UiLibrary = ( ) => {
             />
           </View>
         </View>
+
+        <Heading2>Special Icon buttons</Heading2>
+        <View className="flex flex-row justify-between">
+          <View className="bg-secondary">
+            <Body2>CloseButton</Body2>
+            <CloseButton />
+          </View>
+        </View>
+
         <Heading2>Custom iNaturalist Icons</Heading2>
         <Body1>
           Make sure you're exporting glyphMap from components/INatIcon.js to see all custom icons
@@ -185,22 +204,64 @@ const UiLibrary = ( ) => {
             />
           ) )}
         </View>
-        <Heading2 className="my-2">InlineUser</Heading2>
-        <Body2 className="my-2">InlineUser component</Body2>
-        <InlineUser
-          user={currentUser || {
-            icon_url:
-            "https://static.inaturalist.org/attachments/users/icons/1044550/medium.jpg?1653532155",
-            login: "turtletamer74"
-          }}
+
+        <Heading2 className="my-2">User Icons</Heading2>
+        <View className="flex flex-row justify-between">
+          <View>
+            <Body2 className="my-2">UserIcon</Body2>
+            <UserIcon
+              uri={{
+                uri: "https://static.inaturalist.org/attachments/users/icons/1044550/medium.jpg?1653532155"
+              }}
+            />
+          </View>
+          <View>
+            <Body2 className="my-2">InlineUser</Body2>
+            <InlineUser
+              user={
+                currentUser || {
+                  icon_url:
+                    "https://static.inaturalist.org/attachments/users/icons/1044550/medium.jpg?1653532155",
+                  login: "turtletamer74"
+                }
+              }
+            />
+          </View>
+          <View>
+            <Body2 className="my-2">
+              InlineUser for a user that has no icon set
+            </Body2>
+            <InlineUser user={{ login: "frogfinder23" }} />
+          </View>
+        </View>
+
+        <Heading2>Tabs component</Heading2>
+        <Tabs
+          tabs={[
+            {
+              id: "TAB1",
+              text: "Tab1",
+              onPress: () => {
+                console.log( "Tab1" );
+              }
+            },
+            {
+              id: "TAB2",
+              text: "Tab2",
+              onPress: () => {
+                console.log( "Tab2" );
+              }
+            }
+          ]}
+          activeId="TAB1"
         />
-        <Body2 className="my-2">InlineUser component for a user that has no icon set</Body2>
-        <InlineUser user={{ login: "frogfinder23" }} />
 
         <Heading2 className="my-2">Quality Grade Status</Heading2>
         <View className="flex flex-row justify-between">
           <View>
             <Body2 className="text-center">Research</Body2>
+            { /* TODO: refactor to not have color prop because we only need black and white */}
+            { /* TODO: better to access the color from theme here */}
             <QualityGradeStatus qualityGrade="research" color="black" />
           </View>
           <View>
diff --git a/src/components/UserProfile/UserProfile.js b/src/components/UserProfile/UserProfile.js
index c8b0e881e..4be3fb955 100644
--- a/src/components/UserProfile/UserProfile.js
+++ b/src/components/UserProfile/UserProfile.js
@@ -3,8 +3,7 @@
 import { useNavigation, useRoute } from "@react-navigation/native";
 import { updateRelationships } from "api/relationships";
 import { fetchRemoteUser } from "api/users";
-import Button from "components/SharedComponents/Buttons/Button";
-import UserIcon from "components/SharedComponents/UserIcon";
+import { Button, UserIcon } from "components/SharedComponents";
 import ViewWithFooter from "components/SharedComponents/ViewWithFooter";
 import { Text, View } from "components/styledComponents";
 import { t } from "i18next";
diff --git a/src/components/styledComponents.js b/src/components/styledComponents.js
index 1ab80eff9..3afb23a0b 100644
--- a/src/components/styledComponents.js
+++ b/src/components/styledComponents.js
@@ -29,11 +29,6 @@ const SafeAreaView = styled( StyledSafeAreaView );
 // $FlowIgnore
 const ScrollView = styled( StyledScrollView );
 // $FlowIgnore
-const HeaderText = styled(
-  StyledText,
-  Platform.OS === "ios" ? "font-Papyrus-Condensed" : "font-Roboto"
-);
-// $FlowIgnore
 const Text = styled(
   StyledText,
   Platform.OS === "ios" ? "font-Whitney-Medium" : "font-Whitney-Medium-Pro"
@@ -60,7 +55,6 @@ export {
   ActivityIndicator,
   BottomSheetTextInput,
   fontMonoClass,
-  HeaderText,
   Image,
   KeyboardAvoidingView,
   LightText,
diff --git a/src/i18n/l10n/en.ftl b/src/i18n/l10n/en.ftl
index 04a80cb52..bfc3d5304 100644
--- a/src/i18n/l10n/en.ftl
+++ b/src/i18n/l10n/en.ftl
@@ -29,6 +29,8 @@ Added-on-date = Added on { $date }
 # Shows user network affiliation on user profile
 Affiliation-colon = Affiliation:
 
+Agree = Agree
+
 All = All
 
 All-observations = All observations
@@ -717,19 +719,33 @@ Are-you-sure-discard-comment = Are you sure you want to discard this comment?
 
 ## Accessibility labels: these are used by screen readers to label actionable elements iOS: https://developer.apple.com/documentation/uikit/uiaccessibilityelement/1619577-accessibilitylabel
 ## iOS Guidelines "A string that succinctly identifies the accessibility element." Starts with capital letter, no ending punctuation.
+Bulk-importer = Bulk importer
+Camera = Camera
+Close = Close
 Explore = Explore
 Messages = Messages
 Observations = Observations
+Observe = Observe
 Open-drawer = Open drawer
+Sound-recorder = Sound recorder
 User = User { $userHandle }
 
 ## Accessibility hints: these are used by screen readers to describe what happens when the user interacts with an element iOS: https://developer.apple.com/documentation/uikit/uiaccessibilityelement/1619585-accessibilityhint
 ## iOS Guidelines "A string that briefly describes the result of performing an action on the accessibility element." Third person singular ending with a period.
+Agrees-with-identification = Agrees with this identification.
+Navigates-to-bulk-importer = Navigates to bulk importer.
+Navigates-to-camera = Navigate to camera.
 Navigates-to-explore = Navigates to explore.
 Navigates-to-messages = Navigates to messages.
 Navigates-to-observations = Navigates to observations.
+Navigates-to-sound-recorder = Navigates to sound recorder.
+Navigates-to-suggest-identification = Navigates to suggest identification.
 Navigates-to-user-profile = Navigates to user profile.
+Opens-add-comment-modal = Opens add comment modal.
+Opens-add-observation-modal = Opens add observation modal.
 Opens-the-side-drawer-menu = Opens the side drawer menu.
+Returns-to-previous-screen = Returns to previous screen.
+Switches-to-tab = Switches to { $tab } tab.
 
 ## The following are actually more like "accessibility hints" than labels we should probably refactor
 Add-this-ID = Add this identification
@@ -760,7 +776,6 @@ Number-of-comments = Number of comments
 Number-of-identifications = Number of identifications
 Observation-has-no-photos-and-no-sounds = This observation has no photos and no sounds.
 Photo-taken-at = Photo taken at { $date }
-Switch-to-tab = Switch to { $tab } tab
 Take-photo = Take photo
 # Accessibility labels for no internet state in ObsDetails
 Location-map-unavailable-without-internet = Location map unavailable without internet
@@ -770,16 +785,12 @@ User-photo-unavailable-without-internet = User photo unavailable without interne
 
 # Accessibility labels for icons
 Close-camera-options-modal = Close camera options modal
-Navigate-to-camera = Navigate to camera
 Navigate-to-explore-screen = Navigate to explore screen
 Navigate-to-notifications-screen = Navigate to notifications screen
 Navigate-to-observation-edit-screen = Navigate to observation edit screen
 Navigate-to-observation-list = Navigate to observation list
 Navigate-to-photo-importer = Navigate to photo importer
-Navigate-to-sound-recorder = Navigate to sound recorder
-Open-add-evidence-modal = Open add evidence modal
 Open-side-menu = Open side menu
-Return-to-previous-screen = Return to previous screen
 Take-photo = Take photo
 
 
diff --git a/src/i18n/l10n/en.ftl.json b/src/i18n/l10n/en.ftl.json
index 0b631d8d7..a00c4b5cb 100644
--- a/src/i18n/l10n/en.ftl.json
+++ b/src/i18n/l10n/en.ftl.json
@@ -21,6 +21,7 @@
     "comment": "Shows user network affiliation on user profile",
     "val": "Affiliation:"
   },
+  "Agree": "Agree",
   "All": "All",
   "All-observations": "All observations",
   "all-rights-reserved": {
@@ -507,13 +508,27 @@
   },
   "Discard-Comment": "Discard Comment",
   "Are-you-sure-discard-comment": "Are you sure you want to discard this comment?",
+  "Bulk-importer": "Bulk importer",
+  "Camera": "Camera",
+  "Close": "Close",
   "Messages": "Messages",
+  "Observe": "Observe",
   "Open-drawer": "Open drawer",
+  "Sound-recorder": "Sound recorder",
+  "Agrees-with-identification": "Agrees with this identification.",
+  "Navigates-to-bulk-importer": "Navigates to bulk importer.",
+  "Navigates-to-camera": "Navigate to camera.",
   "Navigates-to-explore": "Navigates to explore.",
   "Navigates-to-messages": "Navigates to messages.",
   "Navigates-to-observations": "Navigates to observations.",
+  "Navigates-to-sound-recorder": "Navigates to sound recorder.",
+  "Navigates-to-suggest-identification": "Navigates to suggest identification.",
   "Navigates-to-user-profile": "Navigates to user profile.",
+  "Opens-add-comment-modal": "Opens add comment modal.",
+  "Opens-add-observation-modal": "Opens add observation modal.",
   "Opens-the-side-drawer-menu": "Opens the side drawer menu.",
+  "Returns-to-previous-screen": "Returns to previous screen.",
+  "Switches-to-tab": "Switches to { $tab } tab.",
   "Add-this-ID": "Add this identification",
   "Camera-button-label-switch-camera": {
     "comment": "Accessible label for the camera button",
@@ -552,7 +567,6 @@
   "Number-of-identifications": "Number of identifications",
   "Observation-has-no-photos-and-no-sounds": "This observation has no photos and no sounds.",
   "Photo-taken-at": "Photo taken at { $date }",
-  "Switch-to-tab": "Switch to { $tab } tab",
   "Take-photo": "Take photo",
   "Location-map-unavailable-without-internet": {
     "comment": "Accessibility labels for no internet state in ObsDetails",
@@ -565,15 +579,11 @@
     "comment": "Accessibility labels for icons",
     "val": "Close camera options modal"
   },
-  "Navigate-to-camera": "Navigate to camera",
   "Navigate-to-explore-screen": "Navigate to explore screen",
   "Navigate-to-notifications-screen": "Navigate to notifications screen",
   "Navigate-to-observation-edit-screen": "Navigate to observation edit screen",
   "Navigate-to-observation-list": "Navigate to observation list",
   "Navigate-to-photo-importer": "Navigate to photo importer",
-  "Navigate-to-sound-recorder": "Navigate to sound recorder",
-  "Open-add-evidence-modal": "Open add evidence modal",
   "Open-side-menu": "Open side menu",
-  "Return-to-previous-screen": "Return to previous screen",
   "Intl-number": "{ $val }"
 }
diff --git a/src/i18n/strings.ftl b/src/i18n/strings.ftl
index 04a80cb52..bfc3d5304 100644
--- a/src/i18n/strings.ftl
+++ b/src/i18n/strings.ftl
@@ -29,6 +29,8 @@ Added-on-date = Added on { $date }
 # Shows user network affiliation on user profile
 Affiliation-colon = Affiliation:
 
+Agree = Agree
+
 All = All
 
 All-observations = All observations
@@ -717,19 +719,33 @@ Are-you-sure-discard-comment = Are you sure you want to discard this comment?
 
 ## Accessibility labels: these are used by screen readers to label actionable elements iOS: https://developer.apple.com/documentation/uikit/uiaccessibilityelement/1619577-accessibilitylabel
 ## iOS Guidelines "A string that succinctly identifies the accessibility element." Starts with capital letter, no ending punctuation.
+Bulk-importer = Bulk importer
+Camera = Camera
+Close = Close
 Explore = Explore
 Messages = Messages
 Observations = Observations
+Observe = Observe
 Open-drawer = Open drawer
+Sound-recorder = Sound recorder
 User = User { $userHandle }
 
 ## Accessibility hints: these are used by screen readers to describe what happens when the user interacts with an element iOS: https://developer.apple.com/documentation/uikit/uiaccessibilityelement/1619585-accessibilityhint
 ## iOS Guidelines "A string that briefly describes the result of performing an action on the accessibility element." Third person singular ending with a period.
+Agrees-with-identification = Agrees with this identification.
+Navigates-to-bulk-importer = Navigates to bulk importer.
+Navigates-to-camera = Navigate to camera.
 Navigates-to-explore = Navigates to explore.
 Navigates-to-messages = Navigates to messages.
 Navigates-to-observations = Navigates to observations.
+Navigates-to-sound-recorder = Navigates to sound recorder.
+Navigates-to-suggest-identification = Navigates to suggest identification.
 Navigates-to-user-profile = Navigates to user profile.
+Opens-add-comment-modal = Opens add comment modal.
+Opens-add-observation-modal = Opens add observation modal.
 Opens-the-side-drawer-menu = Opens the side drawer menu.
+Returns-to-previous-screen = Returns to previous screen.
+Switches-to-tab = Switches to { $tab } tab.
 
 ## The following are actually more like "accessibility hints" than labels we should probably refactor
 Add-this-ID = Add this identification
@@ -760,7 +776,6 @@ Number-of-comments = Number of comments
 Number-of-identifications = Number of identifications
 Observation-has-no-photos-and-no-sounds = This observation has no photos and no sounds.
 Photo-taken-at = Photo taken at { $date }
-Switch-to-tab = Switch to { $tab } tab
 Take-photo = Take photo
 # Accessibility labels for no internet state in ObsDetails
 Location-map-unavailable-without-internet = Location map unavailable without internet
@@ -770,16 +785,12 @@ User-photo-unavailable-without-internet = User photo unavailable without interne
 
 # Accessibility labels for icons
 Close-camera-options-modal = Close camera options modal
-Navigate-to-camera = Navigate to camera
 Navigate-to-explore-screen = Navigate to explore screen
 Navigate-to-notifications-screen = Navigate to notifications screen
 Navigate-to-observation-edit-screen = Navigate to observation edit screen
 Navigate-to-observation-list = Navigate to observation list
 Navigate-to-photo-importer = Navigate to photo importer
-Navigate-to-sound-recorder = Navigate to sound recorder
-Open-add-evidence-modal = Open add evidence modal
 Open-side-menu = Open side menu
-Return-to-previous-screen = Return to previous screen
 Take-photo = Take photo
 
 
diff --git a/tests/unit/components/ObsDetails/ObsDetails.test.js b/tests/unit/components/ObsDetails/ObsDetails.test.js
index b9e1fdba2..7f4957ee7 100644
--- a/tests/unit/components/ObsDetails/ObsDetails.test.js
+++ b/tests/unit/components/ObsDetails/ObsDetails.test.js
@@ -65,7 +65,6 @@ jest.mock( "sharedHooks/useAuthenticatedMutation", ( ) => ( {
 jest.mock( "components/ObsDetails/AddCommentModal" );
 jest.mock( "components/ObsDetails/ActivityTab" );
 jest.mock( "components/SharedComponents/PhotoScroll" );
-jest.mock( "components/SharedComponents/QualityBadge" );
 
 const mockDataTab = <View testID="mock-data-tab" />;
 jest.mock( "components/ObsDetails/DataTab", () => ( {
diff --git a/tests/unit/components/SharedComponents/InlineUser.test.js b/tests/unit/components/SharedComponents/InlineUser/InlineUser.test.js
similarity index 71%
rename from tests/unit/components/SharedComponents/InlineUser.test.js
rename to tests/unit/components/SharedComponents/InlineUser/InlineUser.test.js
index 605a4dfb5..dd1d71d4f 100644
--- a/tests/unit/components/SharedComponents/InlineUser.test.js
+++ b/tests/unit/components/SharedComponents/InlineUser/InlineUser.test.js
@@ -1,9 +1,9 @@
 import { fireEvent, render, screen } from "@testing-library/react-native";
-import InlineUser from "components/SharedComponents/InlineUser";
+import { InlineUser } from "components/SharedComponents";
 import React from "react";
 import useIsConnected from "sharedHooks/useIsConnected";
 
-import factory from "../../../factory";
+import factory from "../../../../factory";
 
 jest.mock( "sharedHooks/useIsConnected" );
 useIsConnected.mockReturnValue( true );
@@ -22,16 +22,32 @@ jest.mock( "@react-navigation/native", ( ) => {
 const mockUser = factory( "RemoteUser" );
 const mockUserWithoutImage = factory( "RemoteUser", { icon_url: null } );
 
+const consistentUser = { login: "some_login", icon_url: "some_icon_url" };
+
+jest.mock(
+  "components/SharedComponents/UserIcon/UserIcon",
+  () => function MockUserIcon( ) {
+    const MockName = "mockUserIcon";
+    return <MockName testID={MockName} />;
+  }
+);
+
 describe( "InlineUser", ( ) => {
+  it( "renders reliably", () => {
+    // Snapshot test
+    render( <InlineUser user={consistentUser} /> );
+    // TODO: Enable this test when Typography is used instead of Text
+    // expect( screen ).toMatchSnapshot();
+  } );
+
   it( "displays user handle and image correctly", async ( ) => {
     render( <InlineUser user={mockUser} /> );
     // Check for user name text
     expect( screen.getByText( `@${mockUser.login}` ) ).toBeTruthy( );
     // This image appears after useIsConnected returns true
     // so we have to use await and findByTestId
-    const profilePicture = await screen.findByTestId( "UserIcon.photo" );
+    const profilePicture = await screen.findByTestId( "mockUserIcon" );
     expect( profilePicture ).toBeTruthy( );
-    expect( profilePicture.props.source ).toEqual( { uri: mockUser.icon_url } );
     expect( screen.queryByTestId( "InlineUser.FallbackPicture" ) ).not.toBeTruthy( );
     expect( screen.queryByTestId( "InlineUser.NoInternetPicture" ) ).not.toBeTruthy( );
   } );
@@ -43,7 +59,7 @@ describe( "InlineUser", ( ) => {
     // This icon appears after useIsConnected returns true
     // so we have to use await and findByTestId
     expect( await screen.findByTestId( "InlineUser.FallbackPicture" ) ).toBeTruthy();
-    expect( screen.queryByTestId( "UserIcon.photo" ) ).not.toBeTruthy();
+    expect( screen.queryByTestId( "mockUserIcon" ) ).not.toBeTruthy();
     expect( screen.queryByTestId( "InlineUser.NoInternetPicture" ) ).not.toBeTruthy();
   } );
 
@@ -73,8 +89,15 @@ describe( "InlineUser", ( ) => {
       // This icon appears after useIsConnected returns false
       // so we have to use await and findByTestId
       expect( await screen.findByTestId( "InlineUser.NoInternetPicture" ) ).toBeTruthy();
-      expect( screen.queryByTestId( "UserIcon.photo" ) ).not.toBeTruthy();
+      expect( screen.queryByTestId( "mockUserIcon" ) ).not.toBeTruthy();
       expect( screen.queryByTestId( "InlineUser.FallbackPicture" ) ).not.toBeTruthy( );
     } );
+
+    // TODO: Enable this test when the offline icon is from our icon design font
+    // it( "renders reliably", ( ) => {
+    //   // Snapshot test
+    //   render( <InlineUser user={consistentUser} /> );
+    //   expect( screen ).toMatchSnapshot();
+    // } );
   } );
 } );
diff --git a/tests/unit/components/SharedComponents/UserIcon/UserIcon.test.js b/tests/unit/components/SharedComponents/UserIcon/UserIcon.test.js
new file mode 100644
index 000000000..6cecfea9c
--- /dev/null
+++ b/tests/unit/components/SharedComponents/UserIcon/UserIcon.test.js
@@ -0,0 +1,33 @@
+import { render, screen } from "@testing-library/react-native";
+import { UserIcon } from "components/SharedComponents";
+import React from "react";
+
+const mockUri = { uri: "some_uri" };
+
+describe( "UserIcon", () => {
+  it( "displays user image correctly", async () => {
+    render( <UserIcon uri={mockUri} /> );
+
+    // Check for image source
+    const profilePicture = await screen.findByTestId( "UserIcon.photo" );
+    expect( profilePicture ).toBeTruthy();
+    expect( profilePicture.props.source ).toEqual( mockUri );
+
+    // Snapshot test
+    expect( screen ).toMatchSnapshot();
+  } );
+
+  it( "displays small user image correctly", async () => {
+    render( <UserIcon uri={mockUri} small /> );
+
+    // Snapshot test
+    expect( screen ).toMatchSnapshot();
+  } );
+
+  it( "displays active user image correctly", async () => {
+    render( <UserIcon uri={mockUri} active /> );
+
+    // Snapshot test
+    expect( screen ).toMatchSnapshot();
+  } );
+} );
diff --git a/tests/unit/components/SharedComponents/UserIcon/__snapshots__/UserIcon.test.js.snap b/tests/unit/components/SharedComponents/UserIcon/__snapshots__/UserIcon.test.js.snap
new file mode 100644
index 000000000..71d2b386d
--- /dev/null
+++ b/tests/unit/components/SharedComponents/UserIcon/__snapshots__/UserIcon.test.js.snap
@@ -0,0 +1,107 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`UserIcon displays active user image correctly 1`] = `
+<Image
+  accessibilityIgnoresInvertColors={true}
+  source={
+    Object {
+      "uri": "some_uri",
+    }
+  }
+  style={
+    Array [
+      Array [
+        Object {
+          "borderBottomLeftRadius": 9999,
+          "borderBottomRightRadius": 9999,
+          "borderTopLeftRadius": 9999,
+          "borderTopRightRadius": 9999,
+        },
+        Object {
+          "width": 40,
+        },
+        Object {
+          "height": 40,
+        },
+        Object {
+          "borderBottomWidth": 3,
+          "borderLeftWidth": 3,
+          "borderRightWidth": 3,
+          "borderTopWidth": 3,
+        },
+        Object {
+          "borderBottomColor": "#77b300",
+          "borderLeftColor": "#77b300",
+          "borderRightColor": "#77b300",
+          "borderTopColor": "#77b300",
+        },
+        Object {
+          "borderColor": "#77b300",
+          "borderWidth": 3,
+        },
+      ],
+    ]
+  }
+  testID="UserIcon.photo"
+/>
+`;
+
+exports[`UserIcon displays small user image correctly 1`] = `
+<Image
+  accessibilityIgnoresInvertColors={true}
+  source={
+    Object {
+      "uri": "some_uri",
+    }
+  }
+  style={
+    Array [
+      Array [
+        Object {
+          "borderBottomLeftRadius": 9999,
+          "borderBottomRightRadius": 9999,
+          "borderTopLeftRadius": 9999,
+          "borderTopRightRadius": 9999,
+        },
+        Object {
+          "width": 22,
+        },
+        Object {
+          "height": 22,
+        },
+      ],
+    ]
+  }
+  testID="UserIcon.photo"
+/>
+`;
+
+exports[`UserIcon displays user image correctly 1`] = `
+<Image
+  accessibilityIgnoresInvertColors={true}
+  source={
+    Object {
+      "uri": "some_uri",
+    }
+  }
+  style={
+    Array [
+      Array [
+        Object {
+          "borderBottomLeftRadius": 9999,
+          "borderBottomRightRadius": 9999,
+          "borderTopLeftRadius": 9999,
+          "borderTopRightRadius": 9999,
+        },
+        Object {
+          "width": 40,
+        },
+        Object {
+          "height": 40,
+        },
+      ],
+    ]
+  }
+  testID="UserIcon.photo"
+/>
+`;
diff --git a/tests/unit/components/Tabs.test.js b/tests/unit/components/Tabs.test.js
index d69fff50a..ea3c4a378 100644
--- a/tests/unit/components/Tabs.test.js
+++ b/tests/unit/components/Tabs.test.js
@@ -1,5 +1,5 @@
 import { fireEvent, screen } from "@testing-library/react-native";
-import Tabs from "components/SharedComponents/Tabs";
+import { Tabs } from "components/SharedComponents";
 import React from "react";
 
 import { renderComponent } from "../../helpers/render";