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

#1516) * Improve labels * Dynanically adjust home header to account for font scaling
bluesky-social · Sep 23, 2023 · b7697f0 · b7697f0
1 parent 88b95df
commit b7697f0
Show file tree

Hide file tree

Showing 10 changed files with 52 additions and 32 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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"

diff --git a/src/view/screens/CustomFeed.tsx b/src/view/screens/CustomFeed.tsx
@@ -405,7 +405,11 @@ export const CustomFeedScreenInner = observer(
               )}
             </>
           ) : null}
-          <NativeDropdown testID="feedHeaderDropdownBtn" items={dropdownItems}>
+          <NativeDropdown
+            testID="feedHeaderDropdownBtn"
+            items={dropdownItems}
+            accessibilityLabel="More options"
+            accessibilityHint="">
             <View
               style={{
                 paddingLeft: 12,

diff --git a/src/view/screens/Feeds.tsx b/src/view/screens/Feeds.tsx
@@ -120,7 +120,10 @@ export const FeedsScreen = withAuthRequired(
                 <Text type="title-lg" style={[pal.text, s.bold]}>
                   My Feeds
                 </Text>
-                <Link href="/settings/saved-feeds">
+                <Link
+                  href="/settings/saved-feeds"
+                  accessibilityLabel="Edit My Feeds"
+                  accessibilityHint="">
                   <CogIcon strokeWidth={1.5} style={pal.icon} size={28} />
                 </Link>
               </View>

diff --git a/src/view/screens/Home.tsx b/src/view/screens/Home.tsx
@@ -1,5 +1,5 @@
 import React from 'react'
-import {FlatList, View} from 'react-native'
+import {FlatList, View, useWindowDimensions} from 'react-native'
 import {useFocusEffect, useIsFocused} from '@react-navigation/native'
 import {FontAwesomeIcon} from '@fortawesome/react-native-fontawesome'
 import {FontAwesomeIconStyle} from '@fortawesome/react-native-fontawesome'
@@ -26,9 +26,6 @@ import {useAnalytics} from 'lib/analytics/analytics'
 import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries'
 import {ComposeIcon2} from 'lib/icons'
 
-const HEADER_OFFSET_MOBILE = 78
-const HEADER_OFFSET_TABLET = 50
-const HEADER_OFFSET_DESKTOP = 0
 const POLL_FREQ = 30e3 // 30sec
 
 type Props = NativeStackScreenProps<HomeTabNavigatorParams, 'Home'>
@@ -160,16 +157,10 @@ const FeedPage = observer(function FeedPageImpl({
 }) {
   const store = useStores()
   const pal = usePalette('default')
-  const {isMobile, isTablet, isDesktop} = useWebMediaQueries()
+  const {isDesktop} = useWebMediaQueries()
   const [onMainScroll, isScrolledDown, resetMainScroll] = useOnMainScroll(store)
   const {screen, track} = useAnalytics()
-  const [headerOffset, setHeaderOffset] = React.useState(
-    isMobile
-      ? HEADER_OFFSET_MOBILE
-      : isTablet
-      ? HEADER_OFFSET_TABLET
-      : HEADER_OFFSET_DESKTOP,
-  )
+  const headerOffset = useHeaderOffset()
   const scrollElRef = React.useRef<FlatList>(null)
   const {appState} = useAppState({
     onForeground: () => doPoll(true),
@@ -214,17 +205,6 @@ const FeedPage = observer(function FeedPageImpl({
     }
   }, [isPageFocused, scrollToTop, feed])
 
-  // listens for resize events
-  React.useEffect(() => {
-    setHeaderOffset(
-      isMobile
-        ? HEADER_OFFSET_MOBILE
-        : isTablet
-        ? HEADER_OFFSET_TABLET
-        : HEADER_OFFSET_DESKTOP,
-    )
-  }, [isMobile, isTablet])
-
   // fires when page within screen is activated/deactivated
   // - check for latest
   React.useEffect(() => {
@@ -301,6 +281,8 @@ const FeedPage = observer(function FeedPageImpl({
             type="title-lg"
             href="/settings/home-feed"
             style={{fontWeight: 'bold'}}
+            accessibilityLabel="Feed Preferences"
+            accessibilityHint=""
             text={
               <FontAwesomeIcon
                 icon="sliders"
@@ -347,3 +329,17 @@ const FeedPage = observer(function FeedPageImpl({
     </View>
   )
 })
+
+function useHeaderOffset() {
+  const {isDesktop, isTablet} = useWebMediaQueries()
+  const {fontScale} = useWindowDimensions()
+  if (isDesktop) {
+    return 0
+  }
+  if (isTablet) {
+    return 50
+  }
+  // default text takes 44px, plus 34px of pad
+  // scale the 44px by the font scale
+  return 34 + 44 * fontScale
+}
diff --git a/src/view/screens/Settings.tsx b/src/view/screens/Settings.tsx
@@ -651,7 +651,11 @@ function AccountDropdownBtn({handle}: {handle: string}) {
   ]
   return (
     <Pressable accessibilityRole="button" style={s.pl10}>
-      <NativeDropdown testID="accountSettingsDropdownBtn" items={items}>
+      <NativeDropdown
+        testID="accountSettingsDropdownBtn"
+        items={items}
+        accessibilityLabel="Account options"
+        accessibilityHint="">
         <FontAwesomeIcon
           icon="ellipsis-h"
           style={pal.textLight as FontAwesomeIconStyle}

diff --git a/src/view/shell/desktop/LeftNav.tsx b/src/view/shell/desktop/LeftNav.tsx
@@ -47,6 +47,7 @@ const ProfileCard = observer(function ProfileCardImpl() {
     <Link
       href={makeProfileLink(store.me)}
       style={[styles.profileCard, !isDesktop && styles.profileCardTablet]}
+      title="My Profile"
       asAnchor>
       <UserAvatar avatar={store.me.avatar} size={size} />
     </Link>