Skip to content

Commit 2c9c667

Browse files
elizabetdevelizabetdev
committed
Adding iconAriaLabel to EuiTimelineItem
1 parent 28496cb commit 2c9c667

7 files changed

Lines changed: 122 additions & 30 deletions

File tree

‎src-docs/src/views/timeline/timeline.tsx‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@ import {
88
const items: EuiTimelineProps['items'] = [
99
{
1010
icon: 'email',
11+
iconAriaLabel: 'Invitation',
1112
children: (
1213
<EuiText size="s">
1314
<p>
@@ -18,6 +19,7 @@ const items: EuiTimelineProps['items'] = [
1819
},
1920
{
2021
icon: 'pencil',
22+
iconAriaLabel: 'Edited',
2123
children: (
2224
<EuiText size="s">
2325
<p>
@@ -28,6 +30,7 @@ const items: EuiTimelineProps['items'] = [
2830
},
2931
{
3032
icon: 'folderClosed',
33+
iconAriaLabel: 'Project closed',
3134
children: (
3235
<EuiText size="s">
3336
<p>The project was archived.</p>

‎src-docs/src/views/timeline/timeline_item.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import React from 'react';
22
import { EuiTimelineItem, EuiText, EuiCode } from '../../../../src/components';
33

44
export default () => (
5-
<EuiTimelineItem icon="dot">
5+
<EuiTimelineItem icon="dot" iconAriaLabel="Main icon">
66
<EuiText size="s">
77
<p>
88
I&apos;m the <EuiCode>children</EuiCode> and you can find the{' '}

‎src/components/timeline/__snapshots__/timeline.test.tsx.snap‎

Lines changed: 3 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -49,17 +49,15 @@ exports[`EuiTimeline is rendered with items 1`] = `
4949
class="css-irfkcc-euiTimelineItemIcon__content"
5050
>
5151
<div
52-
aria-label="bolt"
52+
aria-label=""
5353
class="euiAvatar euiAvatar--m euiAvatar--user css-rdwecc-euiAvatar-m-user-subdued"
5454
role="img"
55-
title="bolt"
55+
title=""
5656
>
5757
<span
5858
class="euiAvatar__icon"
5959
data-euiicon-type="bolt"
60-
>
61-
bolt
62-
</span>
60+
/>
6361
</div>
6462
</div>
6563
</div>

‎src/components/timeline/__snapshots__/timeline_item.test.tsx.snap‎

Lines changed: 76 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,39 @@
11
// Jest Snapshot v1, https://goo.gl/fbAQLP
22

33
exports[`EuiTimelineItem is rendered 1`] = `
4+
<div
5+
class="css-88d0w-euiTimelineItem"
6+
>
7+
<div
8+
class="css-1grznaw-euiTimelineItemIcon-center"
9+
>
10+
<div
11+
class="css-irfkcc-euiTimelineItemIcon__content"
12+
>
13+
<div
14+
aria-label=""
15+
class="euiAvatar euiAvatar--m euiAvatar--user css-rdwecc-euiAvatar-m-user-subdued"
16+
role="img"
17+
title=""
18+
>
19+
<span
20+
class="euiAvatar__icon"
21+
data-euiicon-type="dot"
22+
/>
23+
</div>
24+
</div>
25+
</div>
26+
<div
27+
class="css-1a9m88x-euiTimelineItemEvent-center"
28+
>
29+
<p>
30+
I'm the children
31+
</p>
32+
</div>
33+
</div>
34+
`;
35+
36+
exports[`EuiTimelineItem props EuiAvatar is passed as an icon 1`] = `
437
<div
538
class="css-88d0w-euiTimelineItem"
639
>
@@ -12,7 +45,7 @@ exports[`EuiTimelineItem is rendered 1`] = `
1245
>
1346
<div
1447
aria-label="dot"
15-
class="euiAvatar euiAvatar--s euiAvatar--user css-ifcftd-euiAvatar-s-user-subdued"
48+
class="euiAvatar euiAvatar--m euiAvatar--user css-rdwecc-euiAvatar-m-user-subdued"
1649
role="img"
1750
title="dot"
1851
>
@@ -35,7 +68,7 @@ exports[`EuiTimelineItem is rendered 1`] = `
3568
</div>
3669
`;
3770

38-
exports[`EuiTimelineItem props verticalAlign center is rendered 1`] = `
71+
exports[`EuiTimelineItem props iconAriaLabel is rendered 1`] = `
3972
<div
4073
class="css-88d0w-euiTimelineItem"
4174
>
@@ -46,16 +79,16 @@ exports[`EuiTimelineItem props verticalAlign center is rendered 1`] = `
4679
class="css-irfkcc-euiTimelineItemIcon__content"
4780
>
4881
<div
49-
aria-label="dot"
50-
class="euiAvatar euiAvatar--s euiAvatar--user css-ifcftd-euiAvatar-s-user-subdued"
82+
aria-label="icon aria label"
83+
class="euiAvatar euiAvatar--m euiAvatar--user css-rdwecc-euiAvatar-m-user-subdued"
5184
role="img"
52-
title="dot"
85+
title="icon aria label"
5386
>
5487
<span
5588
class="euiAvatar__icon"
5689
data-euiicon-type="dot"
5790
>
58-
dot
91+
icon aria label
5992
</span>
6093
</div>
6194
</div>
@@ -70,6 +103,39 @@ exports[`EuiTimelineItem props verticalAlign center is rendered 1`] = `
70103
</div>
71104
`;
72105

106+
exports[`EuiTimelineItem props verticalAlign center is rendered 1`] = `
107+
<div
108+
class="css-88d0w-euiTimelineItem"
109+
>
110+
<div
111+
class="css-1grznaw-euiTimelineItemIcon-center"
112+
>
113+
<div
114+
class="css-irfkcc-euiTimelineItemIcon__content"
115+
>
116+
<div
117+
aria-label=""
118+
class="euiAvatar euiAvatar--m euiAvatar--user css-rdwecc-euiAvatar-m-user-subdued"
119+
role="img"
120+
title=""
121+
>
122+
<span
123+
class="euiAvatar__icon"
124+
data-euiicon-type="dot"
125+
/>
126+
</div>
127+
</div>
128+
</div>
129+
<div
130+
class="css-1a9m88x-euiTimelineItemEvent-center"
131+
>
132+
<p>
133+
I'm the children
134+
</p>
135+
</div>
136+
</div>
137+
`;
138+
73139
exports[`EuiTimelineItem props verticalAlign top is rendered 1`] = `
74140
<div
75141
class="css-88d0w-euiTimelineItem"
@@ -81,17 +147,15 @@ exports[`EuiTimelineItem props verticalAlign top is rendered 1`] = `
81147
class="css-irfkcc-euiTimelineItemIcon__content"
82148
>
83149
<div
84-
aria-label="dot"
85-
class="euiAvatar euiAvatar--s euiAvatar--user css-ifcftd-euiAvatar-s-user-subdued"
150+
aria-label=""
151+
class="euiAvatar euiAvatar--m euiAvatar--user css-rdwecc-euiAvatar-m-user-subdued"
86152
role="img"
87-
title="dot"
153+
title=""
88154
>
89155
<span
90156
class="euiAvatar__icon"
91157
data-euiicon-type="dot"
92-
>
93-
dot
94-
</span>
158+
/>
95159
</div>
96160
</div>
97161
</div>

‎src/components/timeline/timeline_item.test.tsx‎

Lines changed: 24 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -14,9 +14,7 @@ import { EuiTimelineItem, VERTICAL_ALIGN } from './timeline_item';
1414
describe('EuiTimelineItem', () => {
1515
test('is rendered', () => {
1616
const component = render(
17-
<EuiTimelineItem
18-
icon={<EuiAvatar size="s" name="dot" iconType="dot" color="subdued" />}
19-
>
17+
<EuiTimelineItem icon="dot">
2018
<p>I&apos;m the children</p>
2119
</EuiTimelineItem>
2220
);
@@ -29,12 +27,7 @@ describe('EuiTimelineItem', () => {
2927
VERTICAL_ALIGN.forEach((alignment) => {
3028
test(`${alignment} is rendered`, () => {
3129
const component = render(
32-
<EuiTimelineItem
33-
icon={
34-
<EuiAvatar size="s" name="dot" iconType="dot" color="subdued" />
35-
}
36-
verticalAlign={alignment}
37-
>
30+
<EuiTimelineItem icon="dot" verticalAlign={alignment}>
3831
<p>I&apos;m the children</p>
3932
</EuiTimelineItem>
4033
);
@@ -43,5 +36,27 @@ describe('EuiTimelineItem', () => {
4336
});
4437
});
4538
});
39+
40+
test('iconAriaLabel is rendered', () => {
41+
const component = render(
42+
<EuiTimelineItem icon="dot" iconAriaLabel="icon aria label">
43+
<p>I&apos;m the children</p>
44+
</EuiTimelineItem>
45+
);
46+
47+
expect(component).toMatchSnapshot();
48+
});
49+
50+
test('EuiAvatar is passed as an icon', () => {
51+
const component = render(
52+
<EuiTimelineItem
53+
icon={<EuiAvatar name="dot" iconType="dot" color="subdued" />}
54+
>
55+
<p>I&apos;m the children</p>
56+
</EuiTimelineItem>
57+
);
58+
59+
expect(component).toMatchSnapshot();
60+
});
4661
});
4762
});

‎src/components/timeline/timeline_item.tsx‎

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -38,6 +38,7 @@ export const EuiTimelineItem: FunctionComponent<EuiTimelineItemProps> = ({
3838
children,
3939
verticalAlign = 'center',
4040
icon,
41+
iconAriaLabel,
4142
className,
4243
...rest
4344
}) => {
@@ -48,7 +49,11 @@ export const EuiTimelineItem: FunctionComponent<EuiTimelineItemProps> = ({
4849

4950
return (
5051
<div css={cssStyles} {...rest}>
51-
<EuiTimelineItemIcon icon={icon} verticalAlign={verticalAlign} />
52+
<EuiTimelineItemIcon
53+
icon={icon}
54+
iconAriaLabel={iconAriaLabel}
55+
verticalAlign={verticalAlign}
56+
/>
5257

5358
<EuiTimelineItemEvent verticalAlign={verticalAlign}>
5459
{children}

‎src/components/timeline/timeline_item_icon.tsx‎

Lines changed: 9 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -19,22 +19,29 @@ export interface EuiTimelineItemIconProps {
1919
*/
2020
icon: ReactNode | IconType;
2121
verticalAlign?: EuiTimelineItemVerticalAlign;
22+
/**
23+
* Specify an `aria-label` for the icon when passed as an `IconType`
24+
* If no `aria-label` is passed we assume the icon is purely decorative.
25+
*/
26+
iconAriaLabel?: string;
2227
}
2328

2429
export const EuiTimelineItemIcon: FunctionComponent<EuiTimelineItemIconProps> = ({
2530
icon,
2631
verticalAlign = 'center',
32+
iconAriaLabel,
2733
}) => {
2834
const euiTheme = useEuiTheme();
2935
const styles = euiTimelineItemIconStyles(euiTheme);
3036

3137
const cssStyles = [styles.euiTimelineItemIcon, styles[verticalAlign]];
32-
3338
const cssContentStyles = styles.euiTimelineItemIcon__content;
3439

40+
const ariaLabel = iconAriaLabel ? iconAriaLabel : '';
41+
3542
const iconRender =
3643
typeof icon === 'string' ? (
37-
<EuiAvatar color="subdued" name={icon} iconType={icon} />
44+
<EuiAvatar color="subdued" name={ariaLabel} iconType={icon} />
3845
) : (
3946
icon
4047
);

0 commit comments

Comments
 (0)