Journey Level Analytics Error Card Implementation

[xinghaohuang91]

In JLA, we use Card component in evergreen to implement the error section. When the API return errors, we will display it to the users and a button "Try Again" to refetch the data. If refetch is working, we will display the data and hide the error section.

Cause it is using simple texts and button, it can be read by screen reader, like chrome screen reader extension.

<Card
            data-testid="journey-analytics-error-card"
            border="muted"
            width="100%"
            paddingLeft={minorScale(13)}
            paddingRight={minorScale(13)}
            marginTop={majorScale(1)}
            display="flex"
            justifyContent="space-between"
            alignItems="center"
            height={majorScale(13)}
          >
            <Pane display="flex" alignItems="center" justifyContent="start">
              <Pane>
                <ErrorIcon />
              </Pane>
              <Pane display="flex" flexDirection="column" marginLeft={majorScale(6)}>
                <Pane>
                  <Heading size={500} color={colors.muted}>
                    Unable to retrieve journey data. {urlError}
                  </Heading>
                </Pane>
                <Pane>
                  <Paragraph size={400} marginTop={minorScale(1)} color={colors.gray600}>
                    Please contact us at{' '}
                    <Link href="https://segment.com/help" target="_blank" fontSize="inherit">
                      segment.com/help
                    </Link>{' '}
                    if this persists.
                  </Paragraph>
                </Pane>
              </Pane>
            </Pane>
            <Pane>
              <Button
                onClick={async () => analytics.refetch && analytics.refetch()}
                appearance="primary"
                iconBefore={RefreshIcon}
              >
                Try Again
              </Button>
            </Pane>
          </Card>

[xinghaohuang91]

screen-recording-2023-03-07-at-10311-pm_CGmZ52NT.mp4

[SiTaggart]

Hi @xinghaohuang91

Can you help me understand what the ask is here by providing a bit more information on what you're after from this discussion topic?

Thanks

[xinghaohuang91]

Hi @SiTaggart , this is the context. https://twilio.slack.com/archives/C02BC5K0Y68/p1677859983085619
Basically, I want to show how we display an error section/message to customers.

[darcimm]

Hi Simon, for context here, Megan Allison (content design) is in the process of reviewing error states and fleshing out content guidelines. My team implemented this custom error on an analytics screen, and Megan was asking about whether this is screen readable.

As you can see in the video, it is being read by the Chrome screen reader. I think the question is whether that meets accessibility standards of Paste error states/alerts, or if there's any additional accessibility/screen reader requirements to implement.

[loreina]

@xinghaohuang91 Can you create a CodeSandbox with a reproduction of the current error card implementation? That'll help us investigate if it's accessible. Thanks!

[serifluous]

Closing due to inactivity. Please let us know if we can help further!

[xinghaohuang91]

cc @loreina