<commit_before>import { Flex, Text, RadioProps, Clickable } from "@artsy/palette"
import * as React from "react"
import styled from "styled-components"
import { SavedAddresses_me$data } from "__generated__/SavedAddresses_me.graphql"

type AddressNode = NonNullable<
  NonNullable<
    NonNullable<
      NonNullable<SavedAddresses_me$data["addressConnection"]>["edges"]
    >[number]
  >["node"]
>

interface SavedAddressItemProps {
  address: AddressNode
  handleClickEdit: (number) => void
  index: number
}

export const SavedAddressItem: React.FC<SavedAddressItemProps> = (
  props
): React.ReactElement<RadioProps> => {
  const handleClickEdit = props?.handleClickEdit
  const index = props?.index
  const address = props?.address
  const addressLine1 = address?.addressLine1
  const addressLine2 = address?.addressLine2
  const addressLine3 = address?.addressLine3
  const city = address?.city
  const country = address?.country
  const name = address?.name
  const phoneNumber = address?.phoneNumber
  const postalCode = address?.postalCode
  const region = address?.region
  const formattedAddressLine = [city, region, country, postalCode]
    .filter(el => el)
    .join(", ")
  const nameAndAddressLine = [name, addressLine1, addressLine2, addressLine3]

  return (
    <Flex maxWidth="100%">
      <Flex flexDirection="column">
        {nameAndAddressLine.length > 0 &&
          nameAndAddressLine.map(
            (line: string, index: number) =>
              line && (
                <Flex
                  key={index}
                  justifyContent="row"
                  alignItems="center"
                  mb={index === 0 ? 1 : 0}
                  height={24}
                >
                  <Text
                    variant="sm-display"
                    textTransform="capitalize"
                    textColor={index === 0 ? "black100" : "black60"}
                  >
                    {line}
                  </Text>
                </Flex>
              )
          )}
        <Text textColor="black60" textTransform="capitalize" variant="sm">
          {formattedAddressLine}
        </Text>
        <Text textColor="black60" variant="sm">
          {phoneNumber}
        </Text>
      </Flex>
      <Clickable
        position="absolute"
        top={2}
        right={2}
        onClick={event => {
          event.preventDefault()
          event.stopPropagation()

          handleClickEdit(index)
        }}
        data-test="editAddressInShipping"
      >
        <EditButton textColor="blue100" variant="sm">
          Edit
        </EditButton>
      </Clickable><commit_msg>fix: edit button accessibility  (#11321)<commit_after>import { Flex, Text, RadioProps } from "@artsy/palette"
import * as React from "react"
import styled from "styled-components"
import { SavedAddresses_me$data } from "__generated__/SavedAddresses_me.graphql"

type AddressNode = NonNullable<
  NonNullable<
    NonNullable<
      NonNullable<SavedAddresses_me$data["addressConnection"]>["edges"]
    >[number]
  >["node"]
>

interface SavedAddressItemProps {
  address: AddressNode
  handleClickEdit: (number) => void
  index: number
}

export const SavedAddressItem: React.FC<SavedAddressItemProps> = (
  props
): React.ReactElement<RadioProps> => {
  const handleClickEdit = props?.handleClickEdit
  const index = props?.index
  const address = props?.address
  const addressLine1 = address?.addressLine1
  const addressLine2 = address?.addressLine2
  const addressLine3 = address?.addressLine3
  const city = address?.city
  const country = address?.country
  const name = address?.name
  const phoneNumber = address?.phoneNumber
  const postalCode = address?.postalCode
  const region = address?.region
  const formattedAddressLine = [city, region, country, postalCode]
    .filter(el => el)
    .join(", ")
  const nameAndAddressLine = [name, addressLine1, addressLine2, addressLine3]

  return (
    <Flex maxWidth="100%">
      <Flex flexDirection="column">
        {nameAndAddressLine.length > 0 &&
          nameAndAddressLine.map(
            (line: string, index: number) =>
              line && (
                <Flex
                  key={index}
                  justifyContent="row"
                  alignItems="center"
                  mb={index === 0 ? 1 : 0}
                  height={24}
                >
                  <Text
                    variant="sm-display"
                    textTransform="capitalize"
                    textColor={index === 0 ? "black100" : "black60"}
                  >
                    {line}
                  </Text>
                </Flex>
              )
          )}
        <Text textColor="black60" textTransform="capitalize" variant="sm">
          {formattedAddressLine}
        </Text>
        <Text textColor="black60" variant="sm">
          {phoneNumber}
        </Text>
      </Flex>
      <EditButton
        textColor="blue100"
        variant="sm"
        position="absolute"
        top={2}
        right={2}
        tabIndex={0}
        onClick={event => {
          event.preventDefault()
          event.stopPropagation()

          handleClickEdit(index)
        }}
        onKeyPress={event => {
          event.preventDefault()
          event.stopPropagation()

          event.key === "Enter" && handleClickEdit(index)
        }}
        data-test="editAddressInShipping"
      >
        Edit
      </EditButton>
{'fraction_non_alphanumeric': 0.11119293078055964, 'fraction_numerical': 0.013254786450662739, 'mean_word_length': 2.122413793103448, 'pattern_counts': {'":': 0, '<': 43, '<?xml version=': 0, '>': 56, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '2265653', 'n_tokens_mistral': 1542, 'n_tokens_neox': 1460, 'n_words': 313}