Funkwhale UI

Appearance

ts
import Alert from "@ui/Alert.vue"

Alert ​

Display informative messages that may change and update over time

ts
export type Props = {
  role?: 'log' | 'status' | 'alert' | 'progressbar' | 'marquee' | 'timer'
} & PastelProps & AlignmentProps

Choose a role ​

By default, screenreaders will read out all alerts on a page. This is annoying and intrusive. Do use a more polite role such as status to skip the initial announcement, and use the (default) alert role only on extremely important announcements.

Careful with the alert role!

The alert role is intended for messages that are dynamically displayed, not for content that appears on page load. For example, it can show an error message if user-added content has an invalid format or the backend throws an error - the alert would immediately read out the message. It should not be used on HTML that the user hasn't interacted with. For example, if a page loads with multiple visible alerts scattered throughout, choose a role other than alert, as the messages were not dynamically triggered.

A11y Checklist

The role attribute [MDN]

Align content ​

Read more: Using Alignment props

Add actions ​

template
<Alert>
  Awesome artist
  <template #actions>
    <Button disabled>
      Deny
    </Button>
    <Button primary>
      Got it
    </Button>
  </template>
</Alert>

Apply color ​

Never rely on color alone to convey relevant information

Many people will not perceive certain colors, so give them other affordances to understand the meaning of a given alert.

Read more: Using Color

template
<Alert blue>
  Blue alert
</Alert>

<Alert red>
  Red alert
</Alert>

<Alert purple>
  Purple burglar alert
</Alert>

<Alert green>
  Green alert
</Alert>

<Alert yellow>
  Yellow alert
</Alert>

Using this component

A11y Checklist ​

Accessible alert ​

template
<Alert
  v-if="isAlertStatus"
  role="status"
  blue
>
  Your settings have been saved successfully.
</Alert>

<Alert
  v-if="isAlertUrgent"
  role="alert"
  red
>
  Connection lost. Please check your internet connection and try again.
  <template #actions>
    <Button
      aria-label="Close 'connection lost' alert"
      @click="toggleUrgent"
    >
      Dismiss
    </Button>
  </template>
</Alert>

Test this component in isolation against WCAG2 criteria