Accessibility fixes: add missing labels, dynamically scale home header (#1516)

* Improve labels

* Dynanically adjust home header to account for font scaling

5 files changed, 18 insertions, 6 deletions

diff --git a/src/view/com/posts/FeedItem.tsx b/src/view/com/posts/FeedItem.tsx
index 71be3969a..f6b6e5339 100644
--- a/src/view/com/posts/FeedItem.tsx
+++ b/src/view/com/posts/FeedItem.tsx
@@ -203,9 +203,9 @@ export const FeedItem = observer(function FeedItemImpl({
             <Link
               style={styles.includeReason}
               href={makeProfileLink(item.reasonRepost.by)}
-              title={sanitizeDisplayName(
+              title={`Reposted by ${sanitizeDisplayName(
                 item.reasonRepost.by.displayName || item.reasonRepost.by.handle,
-              )}>
+              )}`}>
               <FontAwesomeIcon
                 icon="retweet"
                 style={{
diff --git a/src/view/com/profile/ProfileHeader.tsx b/src/view/com/profile/ProfileHeader.tsx
index 82b992551..57fa22f1e 100644
--- a/src/view/com/profile/ProfileHeader.tsx
+++ b/src/view/com/profile/ProfileHeader.tsx
@@ -454,7 +454,9 @@ const ProfileHeaderLoaded = observer(function ProfileHeaderLoadedImpl({
           {dropdownItems?.length ? (
             <NativeDropdown
               testID="profileHeaderDropdownBtn"
-              items={dropdownItems}>
+              items={dropdownItems}
+              accessibilityLabel="More options"
+              accessibilityHint="">
               <View style={[styles.btn, styles.secondaryBtn, pal.btn]}>
                 <FontAwesomeIcon icon="ellipsis" size={20} style={[pal.text]} />
               </View>
diff --git a/src/view/com/util/Link.tsx b/src/view/com/util/Link.tsx
index 1a6f047f6..8734cf32f 100644
--- a/src/view/com/util/Link.tsx
+++ b/src/view/com/util/Link.tsx
@@ -142,6 +142,7 @@ export const TextLink = observer(function TextLink({
   dataSet,
   title,
   onPress,
+  ...orgProps
 }: {
   testID?: string
   type?: TypographyVariant
@@ -190,7 +191,8 @@ export const TextLink = observer(function TextLink({
       title={title}
       // @ts-ignore web only -prf
       hrefAttrs={hrefAttrs} // hack to get open in new tab to work on safari. without this, safari will open in a new window
-      {...props}>
+      {...props}
+      {...orgProps}>
       {text}
     </Text>
   )
diff --git a/src/view/com/util/UserAvatar.tsx b/src/view/com/util/UserAvatar.tsx
index 7a42ab4d3..80d506b4a 100644
--- a/src/view/com/util/UserAvatar.tsx
+++ b/src/view/com/util/UserAvatar.tsx
@@ -230,7 +230,11 @@ export function UserAvatar({
 
   // onSelectNewAvatar is only passed as prop on the EditProfile component
   return onSelectNewAvatar ? (
-    <NativeDropdown testID="changeAvatarBtn" items={dropdownItems}>
+    <NativeDropdown
+      testID="changeAvatarBtn"
+      items={dropdownItems}
+      accessibilityLabel="Image options"
+      accessibilityHint="">
       {avatar ? (
         <HighPriorityImage
           testID="userAvatarImage"
diff --git a/src/view/com/util/UserBanner.tsx b/src/view/com/util/UserBanner.tsx
index 7c5c583c2..0b48dcdd7 100644
--- a/src/view/com/util/UserBanner.tsx
+++ b/src/view/com/util/UserBanner.tsx
@@ -106,7 +106,11 @@ export function UserBanner({
 
   // setUserBanner is only passed as prop on the EditProfile component
   return onSelectNewBanner ? (
-    <NativeDropdown testID="changeBannerBtn" items={dropdownItems}>
+    <NativeDropdown
+      testID="changeBannerBtn"
+      items={dropdownItems}
+      accessibilityLabel="Image options"
+      accessibilityHint="">
       {banner ? (
         <Image
           testID="userBannerImage"