Skip to content

Commit

Permalink
fix(Avatar): improve accessibility (#1213)
Browse files Browse the repository at this point in the history
  • Loading branch information
@langz
langz authored Jan 25, 2022
1 parent e4556ea commit 3a456c5
Show file tree
Hide file tree
Showing 23 changed files with 265 additions and 108 deletions.
182 changes: 108 additions & 74 deletions packages/dnb-design-system-portal/src/docs/uilib/components/avatar/Examples.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,71 +13,89 @@ import {
export const AvatarSizeDefault = () => (
<ComponentBox hideCode data-visual-test="avatar-size-default">
{() => /* jsx */ `
<Avatar>A</Avatar>
<Avatar.Group label="Persons:">
<Avatar>Ola Nordmann</Avatar>
</Avatar.Group>
`}
</ComponentBox>
)

export const AvatarSizeSmall = () => (
<ComponentBox hideCode data-visual-test="avatar-size-small">
{() => /* jsx */ `
<Avatar size="small">A</Avatar>
<Avatar.Group label="Animals:">
<Avatar size="small">Duck</Avatar>
</Avatar.Group>
`}
</ComponentBox>
)

export const AvatarSizeMedium = () => (
<ComponentBox hideCode data-visual-test="avatar-size-medium">
{() => /* jsx */ `
<Avatar size="medium">A</Avatar>
<Avatar.Group label="Stocks:">
<Avatar size="medium">NFLX</Avatar>
</Avatar.Group>
`}
</ComponentBox>
)

export const AvatarSizeLarge = () => (
<ComponentBox hideCode data-visual-test="avatar-size-large">
{() => /* jsx */ `
<Avatar size="large">A</Avatar>
<Avatar.Group label="Companies:">
<Avatar size="large">Amazon</Avatar>
</Avatar.Group>
`}
</ComponentBox>
)

export const AvatarSizeXLarge = () => (
<ComponentBox hideCode data-visual-test="avatar-size-x-large">
{() => /* jsx */ `
<Avatar size="x-large">A</Avatar>
<Avatar.Group label="TV Shows:">
<Avatar size="x-large">Friends</Avatar>
</Avatar.Group>
`}
</ComponentBox>
)

export const AvatarVariantDefault = () => (
<ComponentBox hideCode data-visual-test="avatar-variant-default">
{() => /* jsx */ `
<Avatar>A</Avatar>
<Avatar.Group label="Dogs:">
<Avatar>Kleiner münsterländer</Avatar>
</Avatar.Group>
`}
</ComponentBox>
)

export const AvatarVariantPrimary = () => (
<ComponentBox hideCode data-visual-test="avatar-variant-primary">
{() => /* jsx */ `
<Avatar variant="primary">A</Avatar>
<Avatar.Group label="Cities:">
<Avatar variant="primary">Oslo</Avatar>
</Avatar.Group>
`}
</ComponentBox>
)

export const AvatarVariantSecondary = () => (
<ComponentBox hideCode data-visual-test="avatar-variant-secondary">
{() => /* jsx */ `
<Avatar variant="secondary">A</Avatar>
<Avatar.Group label="Countries:">
<Avatar variant="secondary">Spain</Avatar>
</Avatar.Group>
`}
</ComponentBox>
)

export const AvatarVariantTertiary = () => (
<ComponentBox hideCode data-visual-test="avatar-variant-tertiary">
{() => /* jsx */ `
<Avatar variant="tertiary">A</Avatar>
<Avatar.Group label="Cars:">
<Avatar variant="tertiary">Tesla</Avatar>
</Avatar.Group>
`}
</ComponentBox>
)
Expand All @@ -89,9 +107,11 @@ export const AvatarConfettiIcon = () => (
data-visual-test="avatar-children-icon-primary"
>
{() => /* jsx */ `
<Avatar variant="primary">
<Icon icon={Confetti} />
</Avatar>
<Avatar.Group label="Icons:">
<Avatar variant="primary">
<Icon icon={Confetti} />
</Avatar>
</Avatar.Group>
`}
</ComponentBox>
)
Expand All @@ -103,9 +123,11 @@ export const AvatarCardIcon = () => (
data-visual-test="avatar-children-icon-secondary"
>
{() => /* jsx */ `
<Avatar variant="secondary">
<Icon icon={Card} />
</Avatar>
<Avatar.Group label="Icons:">
<Avatar variant="secondary">
<Icon icon={Card} />
</Avatar>
</Avatar.Group>
`}
</ComponentBox>
)
Expand All @@ -117,55 +139,65 @@ export const AvatarAccountCardIcon = () => (
data-visual-test="avatar-children-icon-tertiary"
>
{() => /* jsx */ `
<Avatar variant="tertiary">
<Icon icon={AccountCard} />
</Avatar>
<Avatar.Group label="Icons:">
<Avatar variant="tertiary">
<Icon icon={AccountCard} />
</Avatar>
</Avatar.Group>
`}
</ComponentBox>
)

export const AvatarDNBLogo = () => (
<ComponentBox hideCode data-visual-test="avatar-children-logo">
{() => /* jsx */ `
<Avatar>
<Logo/>
</Avatar>
<Avatar.Group label="Logos:">
<Avatar>
<Logo/>
</Avatar>
</Avatar.Group>
`}
</ComponentBox>
)

export const AvatarImageDNB = () => (
<ComponentBox hideCode data-visual-test="avatar-image-local-png">
{() => /* jsx */ `
<Avatar
src="/android-chrome-192x192.png"
alt="DNB Logo"
size="x-large"
/>
<Avatar.Group label="Banks:">
<Avatar
src="/android-chrome-192x192.png"
alt="DNB Logo"
size="x-large"
/>
</Avatar.Group>
`}
</ComponentBox>
)

export const AvatarImagePinnedTab = () => (
<ComponentBox hideCode data-visual-test="avatar-image-local-svg">
{() => /* jsx */ `
<Avatar
variant="tertiary"
src="/safari-pinned-tab.svg"
alt="DNB Logo"
/>
<Avatar.Group label="Icons:">
<Avatar
variant="tertiary"
src="/safari-pinned-tab.svg"
alt="DNB Logo"
/>
</Avatar.Group>
`}
</ComponentBox>
)

export const AvatarImageTobias = () => (
<ComponentBox hideCode data-visual-test="avatar-image-external">
{() => /* jsx */ `
<Avatar
src="https://avatars.githubusercontent.com/u/1501870?v=4"
alt="Profile picture"
size="large"
/>
<Avatar.Group label="Profiles:">
<Avatar
src="https://avatars.githubusercontent.com/u/1501870?v=4"
alt="Profile picture"
size="large"
/>
</Avatar.Group>
`}
</ComponentBox>
)
Expand All @@ -186,11 +218,13 @@ export const AvatarImageProps = () => (
};
return (
<Avatar
variant="secondary"
size="large"
imgProps={imgProps}
/>
<Avatar.Group label="Images of banks:">
<Avatar
variant="secondary"
size="large"
imgProps={imgProps}
/>
</Avatar.Group>
)
}
`}
Expand All @@ -200,14 +234,14 @@ export const AvatarImageProps = () => (
export const GroupedAvatarsSmall = () => (
<ComponentBox hideCode data-visual-test="avatar-grouped-small">
{() => /* jsx */ `
<Avatar.Group size="small" variant="primary" maxElements={6}>
<Avatar>A</Avatar>
<Avatar>B</Avatar>
<Avatar>C</Avatar>
<Avatar>D</Avatar>
<Avatar>E</Avatar>
<Avatar>F</Avatar>
<Avatar>G</Avatar>
<Avatar.Group label="Friends:" size="small" variant="primary" maxElements={6}>
<Avatar>Anders</Avatar>
<Avatar>Bjørnar</Avatar>
<Avatar>Cathrine</Avatar>
<Avatar>Didrik</Avatar>
<Avatar>Erlend</Avatar>
<Avatar>Frida</Avatar>
<Avatar>Gøril</Avatar>
</Avatar.Group>
`}
</ComponentBox>
Expand All @@ -216,14 +250,14 @@ export const GroupedAvatarsSmall = () => (
export const GroupedAvatarsMedium = () => (
<ComponentBox hideCode data-visual-test="avatar-grouped-medium">
{() => /* jsx */ `
<Avatar.Group size="medium" maxElements={5}>
<Avatar>A</Avatar>
<Avatar>B</Avatar>
<Avatar>C</Avatar>
<Avatar>D</Avatar>
<Avatar>E</Avatar>
<Avatar>F</Avatar>
<Avatar>G</Avatar>
<Avatar.Group label="Employees:" size="medium" maxElements={5}>
<Avatar>Anders</Avatar>
<Avatar>Bjørnar</Avatar>
<Avatar>Cathrine</Avatar>
<Avatar>Didrik</Avatar>
<Avatar>Erlend</Avatar>
<Avatar>Frida</Avatar>
<Avatar>Gøril</Avatar>
</Avatar.Group>
`}
</ComponentBox>
Expand All @@ -232,14 +266,14 @@ export const GroupedAvatarsMedium = () => (
export const GroupedAvatarsLarge = () => (
<ComponentBox hideCode data-visual-test="avatar-grouped-large">
{() => /* jsx */ `
<Avatar.Group size="large" variant="tertiary" maxElements={4}>
<Avatar>A</Avatar>
<Avatar>B</Avatar>
<Avatar>C</Avatar>
<Avatar>D</Avatar>
<Avatar>E</Avatar>
<Avatar>F</Avatar>
<Avatar>G</Avatar>
<Avatar.Group label="Borrowers:" size="large" variant="tertiary" maxElements={4}>
<Avatar>Anders</Avatar>
<Avatar>Bjørnar</Avatar>
<Avatar>Cathrine</Avatar>
<Avatar>Didrik</Avatar>
<Avatar>Erlend</Avatar>
<Avatar>Frida</Avatar>
<Avatar>Gøril</Avatar>
</Avatar.Group>
`}
</ComponentBox>
Expand All @@ -248,14 +282,14 @@ export const GroupedAvatarsLarge = () => (
export const GroupedAvatarsXLarge = () => (
<ComponentBox hideCode data-visual-test="avatar-grouped-x-large">
{() => /* jsx */ `
<Avatar.Group size="x-large" variant="secondary" maxElements={3}>
<Avatar>A</Avatar>
<Avatar>B</Avatar>
<Avatar>C</Avatar>
<Avatar>D</Avatar>
<Avatar>E</Avatar>
<Avatar>F</Avatar>
<Avatar>G</Avatar>
<Avatar.Group label="Enemies:" size="x-large" variant="secondary" maxElements={3}>
<Avatar>Anders</Avatar>
<Avatar>Bjørnar</Avatar>
<Avatar>Cathrine</Avatar>
<Avatar>Didrik</Avatar>
<Avatar>Erlend</Avatar>
<Avatar>Frida</Avatar>
<Avatar>Gøril</Avatar>
</Avatar.Group>
`}
</ComponentBox>
Expand All @@ -264,7 +298,7 @@ export const GroupedAvatarsXLarge = () => (
export const GroupedAvatarsImg = () => (
<ComponentBox hideCode data-visual-test="avatar-grouped-image">
{() => /* jsx */ `
<Avatar.Group size="large" maxElements={5}>
<Avatar.Group label="Eufemia contributors:" size="large" maxElements={5}>
<Avatar src="https://avatars.githubusercontent.com/u/1501870?v=4" alt="Profile picture"/>
<Avatar src="https://avatars.githubusercontent.com/u/35217511?v=4" alt="Profile picture"/>
<Avatar src="https://avatars.githubusercontent.com/u/21338570?v=4" alt="Profile picture"/>
Expand Down
6 changes: 6 additions & 0 deletions packages/dnb-design-system-portal/src/docs/uilib/components/avatar/demos.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -29,6 +29,12 @@ GroupedAvatarsImg

## Demos

### Avatar

To ensure the correct use of Avatars, we require using a `Avatar.Group` with `Avatar`-components as children. <br/>
The required `label`-property in `Avatar.Group` will ensure the correct use of accessibility for screen readers. <br/>
See more examples below.

### Setting property `size`

#### default `size` is 'medium'
Expand Down
1 change: 1 addition & 0 deletions packages/dnb-design-system-portal/src/docs/uilib/components/avatar/properties.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,6 +22,7 @@ showTabs: true

| Properties | Description |
| ------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------- |
| `label` | _(required)_ The label description of the group of avatars. |
| `size` | _(optional)_ Size of the Avatars, and "elements hidden text (+x)". Options: `small` \| `medium` \| `large` \| `x-large`. Defaults to `medium`. |
| `variant` | _(optional)_ Override the variant of the Avatars. Options: `primary` \| `secondary` \| `tertiary`. Defaults to `primary`. |
| `maxElements` | _(optional)_ Number of max displayed elements, including the "elements hidden text (+x)". Defaults to 4. |
Expand Down
Loading

0 comments on commit 3a456c5

Please sign in to comment.