Merge remote-tracking branch 'origin/main' into moar-labels

* origin/main: (30 commits) Only show "followed you back" when appropriate (#4849) [Web] Retrigger onEndReached if needed when content height changes (#4859) Remove unused NoopFeedTuner (#4856) useDedupe callback (#4855) [Video] Uploads (#4754) Make label required in link components (#4844) Boolean filter improvement alternative: TS upgrade (#4840) Add label to profile card (#4843) Improve a11y on noty feed (#4842) Add labels in feed card (#4836) Add labels to mod details dialog (#4839) Add labels to a few missing places (#4838) Add labels in list card (#4837) Refactor feed slices (#4834) `true` (#4833) Replace `import hairlineWidth =` with const (#4831) [Videos] Video player - PR #1 - basic player (#4731) Bump 1.90 (#4832) Fix sloppy filter(Boolean) types (#4830) Fuggedaboudit (#4829) ...
2024-07-31 16:29:10 -05:00
parent 7db97fc2b1 70ffd387e3
commit 6dffe623d0
121 changed files with 13047 additions and 10842 deletions
@@ -70,6 +70,9 @@ export type ButtonProps = Pick<
  AccessibilityProps &
  VariantProps & {
    testID?: string
+    /**
+     * For a11y, try to make this descriptive and clear
+     */
    label: string
    style?: StyleProp<ViewStyle>
    hoverStyle?: StyleProp<ViewStyle>
@@ -40,7 +40,7 @@ type Props = {
 export function Default(props: Props) {
  const {view} = props
  return (
-    <Link label={view.displayName} {...props}>
+    <Link {...props}>
      <Outer>
        <Header>
          <Avatar src={view.avatar} />
@@ -58,7 +58,7 @@ export function Link({
  view,
  children,
  ...props
-}: Props & Omit<LinkProps, 'to'>) {
+}: Props & Omit<LinkProps, 'to' | 'label'>) {
  const queryClient = useQueryClient()

  const href = React.useMemo(() => {
@@ -70,7 +70,11 @@ export function Link({
  }, [view, queryClient])

  return (
-    <InternalLink to={href} style={[a.flex_col]} {...props}>
+    <InternalLink
+      label={view.displayName}
+      to={href}
+      style={[a.flex_col]}
+      {...props}>
      {children}
    </InternalLink>
  )
@@ -190,7 +190,7 @@ export function SuggestedFollows() {
      {profiles.slice(0, maxLength).map(profile => (
        <ProfileCard.Link
          key={profile.did}
-          did={profile.handle}
+          profile={profile}
          onPress={() => {
            logEvent('feed:interstitial:profileCard:press', {})
          }}
@@ -266,7 +266,10 @@ export function SuggestedFollows() {
              a.pt_xs,
              a.gap_md,
            ]}>
-            <InlineLinkText to="/search" style={[t.atoms.text_contrast_medium]}>
+            <InlineLinkText
+              label={_(msg`Browse more suggestions`)}
+              to="/search"
+              style={[t.atoms.text_contrast_medium]}>
              <Trans>Browse more suggestions</Trans>
            </InlineLinkText>
            <Arrow size="sm" fill={t.atoms.text_contrast_medium.color} />
@@ -396,7 +399,10 @@ export function SuggestedFeeds() {
              a.pt_xs,
              a.gap_md,
            ]}>
-            <InlineLinkText to="/search" style={[t.atoms.text_contrast_medium]}>
+            <InlineLinkText
+              label={_(msg`Browse more suggestions`)}
+              to="/search"
+              style={[t.atoms.text_contrast_medium]}>
              <Trans>Browse more suggestions</Trans>
            </InlineLinkText>
            <Arrow size="sm" fill={t.atoms.text_contrast_medium.color} />
@@ -40,11 +40,6 @@ type BaseLinkProps = Pick<
 > & {
  testID?: string

-  /**
-   * Label for a11y. Defaults to the href.
-   */
-  label?: string
-
  /**
   * The React Navigation `StackAction` to perform when the link is pressed.
   */
@@ -197,7 +192,7 @@ export function useLink({
 }

 export type LinkProps = Omit<BaseLinkProps, 'disableMismatchWarning'> &
-  Omit<ButtonProps, 'onPress' | 'disabled' | 'label'>
+  Omit<ButtonProps, 'onPress' | 'disabled'>

 /**
 * A interactive element that renders as a `<a>` tag on the web. On mobile it
@@ -224,7 +219,6 @@ export function Link({

  return (
    <Button
-      label={href}
      {...rest}
      style={[a.justify_start, flatten(rest.style)]}
      role="link"
@@ -249,7 +243,8 @@ export function Link({

 export type InlineLinkProps = React.PropsWithChildren<
  BaseLinkProps & TextStyleProp & Pick<TextProps, 'selectable'>
->
+> &
+  Pick<ButtonProps, 'label'>

 export function InlineLinkText({
  children,
@@ -291,7 +286,7 @@ export function InlineLinkText({
    <Text
      selectable={selectable}
      accessibilityHint=""
-      accessibilityLabel={label || href}
+      accessibilityLabel={label}
      {...rest}
      style={[
        {color: t.palette.primary_500},
@@ -44,7 +44,7 @@ type Props = {
 export function Default(props: Props) {
  const {view, showPinButton} = props
  return (
-    <Link label={view.name} {...props}>
+    <Link {...props}>
      <Outer>
        <Header>
          <Avatar src={view.avatar} />
@@ -67,7 +67,7 @@ export function Link({
  view,
  children,
  ...props
-}: Props & Omit<LinkProps, 'to'>) {
+}: Props & Omit<LinkProps, 'to' | 'label'>) {
  const queryClient = useQueryClient()

  const href = React.useMemo(() => {
@@ -79,7 +79,7 @@ export function Link({
  }, [view, queryClient])

  return (
-    <InternalLink to={href} {...props}>
+    <InternalLink label={view.name} to={href} {...props}>
      {children}
    </InternalLink>
  )
@@ -189,7 +189,7 @@ let ListMaybePlaceholder = ({
    return (
      <Error
        title={errorTitle ?? _(msg`Oops!`)}
-        message={errorMessage ?? _(`Something went wrong!`)}
+        message={errorMessage ?? _(msg`Something went wrong!`)}
        onRetry={onRetry}
        onGoBack={onGoBack}
        sideBorders={sideBorders}
@@ -36,7 +36,7 @@ export function Default({
  logContext?: 'ProfileCard' | 'StarterPackProfilesList'
 }) {
  return (
-    <Link did={profile.did}>
+    <Link profile={profile}>
      <Card
        profile={profile}
        moderationOpts={moderationOpts}
@@ -96,16 +96,24 @@ export function Header({
 }

 export function Link({
-  did,
+  profile,
  children,
  style,
  ...rest
-}: {did: string} & Omit<LinkProps, 'to'>) {
+}: {
+  profile: AppBskyActorDefs.ProfileViewDetailed
+} & Omit<LinkProps, 'to' | 'label'>) {
+  const {_} = useLingui()
  return (
    <InternalLink
+      label={_(
+        msg`View ${
+          profile.displayName || sanitizeHandle(profile.handle)
+        }'s profile`,
+      )}
      to={{
        screen: 'Profile',
-        params: {name: did},
+        params: {name: profile.did},
      }}
      style={[a.flex_col, style]}
      {...rest}>
@@ -74,7 +74,9 @@ function DialogContent({

  const onPressAudience = (setting: ThreadgateSetting) => {
    // remove nobody
-    let newSelected = draft.filter(v => v.type !== 'nobody')
+    let newSelected: ThreadgateSetting[] = draft.filter(
+      v => v.type !== 'nobody',
+    )
    // toggle
    const i = newSelected.findIndex(v => isEqual(v, setting))
    if (i === -1) {
@@ -42,6 +42,7 @@ export function BlockedByListDialog({
              <React.Fragment key={block.source.list.uri}>
                {i === 0 ? null : ', '}
                <InlineLinkText
+                  label={block.source.list.name}
                  to={listUriToHref(block.source.list.uri)}
                  style={[a.text_md, a.leading_snug]}>
                  {block.source.list.name}
@@ -140,6 +140,7 @@ function HeaderReady({
    userBlock?: ModerationCause
  }
 }) {
+  const {_} = useLingui()
  const t = useTheme()
  const convoState = useConvo()
  const profile = useProfileShadow(profileUnshadowed)
@@ -156,6 +157,7 @@ function HeaderReady({
    <View style={[a.flex_1]}>
      <View style={[a.w_full, a.flex_row, a.align_center, a.justify_between]}>
        <Link
+          label={_(msg`View ${displayName}'s profile`)}
          style={[a.flex_row, a.align_start, a.gap_md, a.flex_1, a.pr_md]}
          to={makeProfileLink(profile)}>
          <View style={[a.pt_2xs]}>
@@ -2,6 +2,7 @@ import React from 'react'
 import {Pressable, View, ViewStyle} from 'react-native'
 import Animated, {LinearTransition} from 'react-native-reanimated'

+import {isNative} from '#/platform/detection'
 import {HITSLOP_10} from 'lib/constants'
 import {
  atoms as a,
@@ -459,3 +460,5 @@ export function Radio() {
    </View>
  )
 }
+
+export const Platform = isNative ? Switch : Checkbox
@@ -1,5 +0,0 @@
-import {createSinglePathSVG} from './TEMPLATE'
-
-export const SettingsGear2_Stroke2_Corner0_Rounded = createSinglePathSVG({
-  path: 'M11.1 2a1 1 0 0 0-.832.445L8.851 4.57 6.6 4.05a1 1 0 0 0-.932.268l-1.35 1.35a1 1 0 0 0-.267.932l.52 2.251-2.126 1.417A1 1 0 0 0 2 11.1v1.8a1 1 0 0 0 .445.832l2.125 1.417-.52 2.251a1 1 0 0 0 .268.932l1.35 1.35a1 1 0 0 0 .932.267l2.251-.52 1.417 2.126A1 1 0 0 0 11.1 22h1.8a1 1 0 0 0 .832-.445l1.417-2.125 2.251.52a1 1 0 0 0 .932-.268l1.35-1.35a1 1 0 0 0 .267-.932l-.52-2.251 2.126-1.417A1 1 0 0 0 22 12.9v-1.8a1 1 0 0 0-.445-.832L19.43 8.851l.52-2.251a1 1 0 0 0-.268-.932l-1.35-1.35a1 1 0 0 0-.932-.267l-2.251.52-1.417-2.126A1 1 0 0 0 12.9 2h-1.8Zm-.968 4.255L11.635 4h.73l1.503 2.255a1 1 0 0 0 1.057.42l2.385-.551.566.566-.55 2.385a1 1 0 0 0 .42 1.057L20 11.635v.73l-2.255 1.503a1 1 0 0 0-.42 1.057l.551 2.385-.566.566-2.385-.55a1 1 0 0 0-1.057.42L12.365 20h-.73l-1.503-2.255a1 1 0 0 0-1.057-.42l-2.385.551-.566-.566.55-2.385a1 1 0 0 0-.42-1.057L4 12.365v-.73l2.255-1.503a1 1 0 0 0 .42-1.057L6.123 6.69l.566-.566 2.385.55a1 1 0 0 0 1.057-.42ZM8 12a4 4 0 1 1 8 0 4 4 0 0 1-8 0Zm4-2a2 2 0 1 0 0 4 2 2 0 0 0 0-4Z',
-})
@@ -0,0 +1,9 @@
+import {createSinglePathSVG} from './TEMPLATE'
+
+export const Play_Stroke2_Corner2_Rounded = createSinglePathSVG({
+  path: 'M5 5.086C5 2.736 7.578 1.3 9.576 2.534L20.77 9.448c1.899 1.172 1.899 3.932 0 5.104L9.576 21.466C7.578 22.701 5 21.263 5 18.914V5.086Zm3.525-.85A1 1 0 0 0 7 5.085v13.828a1 1 0 0 0 1.525.85l11.194-6.913a1 1 0 0 0 0-1.702L8.525 4.235Z',
+})
+
+export const Play_Filled_Corner2_Rounded = createSinglePathSVG({
+  path: 'M9.576 2.534C7.578 1.299 5 2.737 5 5.086v13.828c0 2.35 2.578 3.787 4.576 2.552l11.194-6.914c1.899-1.172 1.899-3.932 0-5.104L9.576 2.534Z',
+})
@@ -174,7 +174,7 @@ export function LabelerLabelPreference({
  disabled?: boolean
  labelerDid?: string
 }) {
-  const {i18n} = useLingui()
+  const {_, i18n} = useLingui()
  const t = useTheme()
  const {gtPhone} = useBreakpoints()

@@ -243,7 +243,10 @@ export function LabelerLabelPreference({
              ) : isGlobalLabel ? (
                <Trans>
                  Configured in{' '}
-                  <InlineLinkText to="/moderation" style={a.text_sm}>
+                  <InlineLinkText
+                    label={_(msg`moderation settings`)}
+                    to="/moderation"
+                    style={a.text_sm}>
                    moderation settings
                  </InlineLinkText>
                  .
@@ -128,6 +128,9 @@ function Label({
  const t = useTheme()
  const {_} = useLingui()
  const {labeler, strings} = useLabelInfo(label)
+  const sourceName = labeler
+    ? sanitizeHandle(labeler.creator.handle, '@')
+    : label.src
  return (
    <View
      style={[
@@ -169,13 +172,12 @@ function Label({
            <Trans>
              Source:{' '}
              <InlineLinkText
+                label={sourceName}
                to={makeProfileLink(
                  labeler ? labeler.creator : {did: label.src, handle: ''},
                )}
                onPress={() => control.close()}>
-                {labeler
-                  ? sanitizeHandle(labeler.creator.handle, '@')
-                  : label.src}
+                {sourceName}
              </InlineLinkText>
            </Trans>
          )}
@@ -203,6 +205,9 @@ function AppealForm({
  const isAccountReport = 'did' in subject
  const agent = useAgent()
  const gate = useGate()
+  const sourceName = labeler
+    ? sanitizeHandle(labeler.creator.handle, '@')
+    : label.src

  const {mutate, isPending} = useMutation({
    mutationFn: async () => {
@@ -260,12 +265,13 @@ function AppealForm({
        <Trans>
          This appeal will be sent to{' '}
          <InlineLinkText
+            label={sourceName}
            to={makeProfileLink(
              labeler ? labeler.creator : {did: label.src, handle: ''},
            )}
            onPress={() => control.close()}
            style={[a.text_md, a.leading_snug]}>
-            {labeler ? sanitizeHandle(labeler.creator.handle, '@') : label.src}
+            {sourceName}
          </InlineLinkText>
          .
        </Trans>
@@ -54,7 +54,10 @@ function ModerationDetailsDialogInner({
      description = (
        <Trans>
          This user is included in the{' '}
-          <InlineLinkText to={listUriToHref(list.uri)} style={[a.text_sm]}>
+          <InlineLinkText
+            label={list.name}
+            to={listUriToHref(list.uri)}
+            style={[a.text_sm]}>
            {list.name}
          </InlineLinkText>{' '}
          list which you have blocked.
@@ -83,7 +86,10 @@ function ModerationDetailsDialogInner({
      description = (
        <Trans>
          This user is included in the{' '}
-          <InlineLinkText to={listUriToHref(list.uri)} style={[a.text_sm]}>
+          <InlineLinkText
+            label={list.name}
+            to={listUriToHref(list.uri)}
+            style={[a.text_sm]}>
            {list.name}
          </InlineLinkText>{' '}
          list which you have muted.
@@ -127,10 +133,11 @@ function ModerationDetailsDialogInner({
              <Trans>
                This label was applied by{' '}
                <InlineLinkText
+                  label={desc.source || _(msg`an unknown labeler`)}
                  to={makeProfileLink({did: modcause.label.src, handle: ''})}
                  onPress={() => control.close()}
                  style={a.text_md}>
-                  {desc.source}
+                  {desc.source || _(msg`an unknown labeler`)}
                </InlineLinkText>
                .
              </Trans>