Skip to content

Commit d96535d

Browse files
author
Lee White
committed
fix(notification): updated assistive text for dismiss notification button and added event type to header and live region
1 parent a005a4c commit d96535d

File tree

1 file changed

+132
-173
lines changed

1 file changed

+132
-173
lines changed

‎ui/components/notifications/base/example.jsx

Lines changed: 132 additions & 173 deletions
Original file line numberDiff line numberDiff line change
@@ -26,16 +26,30 @@ let Notification = props => {
2626
className="slds-notification"
2727
role="dialog"
2828
aria-labelledby={props.headingID}
29-
aria-describedby={bodyUniqueId}>
29+
aria-describedby={bodyUniqueId}
30+
>
3031
<div className="slds-notification__body" id={bodyUniqueId}>
3132
<a className="slds-notification__target slds-media" href="javascript:void(0);">
32-
{ props.children }
33+
<StandardIcon
34+
containerClassName="slds-media__figure"
35+
className="slds-icon--small"
36+
assistiveText={false}
37+
symbol={props.type}
38+
title={props.type}
39+
/>
40+
<div className="slds-media__body">
41+
<h2 className="slds-text-heading--small slds-m-bottom--xx-small" id={props.headingID}>
42+
<span className="slds-assistive-text">{props.type + " notification:"}</span>
43+
{props.title}
44+
</h2>
45+
<p>{props.description}</p>
46+
</div>
3347
</a>
3448
<ButtonIcon
3549
className="slds-button--icon-container slds-notification__close"
3650
symbol="close"
37-
assistiveText="Dismiss notification"
38-
title="Dismiss notification"
51+
assistiveText={"Dismiss " + props.title + " notification"}
52+
title={"Dismiss " + props.title + " notification"}
3953
/>
4054
</div>
4155
{ props.footer
@@ -54,19 +68,19 @@ let Notification = props => {
5468
export default (
5569
<div className="demo-only slds-is-relative" style={{ height: '4.5rem' }}>
5670
<NotificationContainer>
57-
<Notification headingID="noti52">
58-
<StandardIcon
59-
containerClassName="slds-media__figure"
60-
className="slds-icon--small"
61-
assistiveText={false}
62-
symbol="event"
63-
title="event"
64-
/>
65-
<div className="slds-media__body">
66-
<h2 className="slds-text-heading--small slds-m-bottom--xx-small" id="noti52"><span className="slds-assistive-text">Notification:</span>Tesla - Renewal meeting</h2>
67-
<p>Event at 11:00am on Jan 8</p>
68-
</div>
69-
</Notification>
71+
<div
72+
aria-live="assertive"
73+
aria-atomic="true"
74+
className="slds-assistive-text"
75+
>
76+
event notification: Tesla - Renewal meeting
77+
</div>
78+
<Notification
79+
headingID="noti52"
80+
type="event"
81+
title="Tesla - Renewal meeting"
82+
description="Event at 11:00am on Jan 8"
83+
/>
7084
</NotificationContainer>
7185
</div>
7286
);
@@ -78,19 +92,19 @@ export let examples = [
7892
element:
7993
<div className="demo-only slds-is-relative" style={{ height: '4.5rem' }}>
8094
<NotificationContainer>
81-
<Notification headingID="noti77">
82-
<StandardIcon
83-
containerClassName="slds-media__figure"
84-
className="slds-icon--small"
85-
assistiveText={false}
86-
symbol="task"
87-
title="task"
88-
/>
89-
<div className="slds-media__body">
90-
<h2 className="slds-text-heading--small slds-m-bottom--xx-small" id="noti77"><span className="slds-assistive-text">Notification:</span>Call Two: Jane Johnson</h2>
91-
<p>Task due on Jan 8</p>
92-
</div>
93-
</Notification>
95+
<div
96+
aria-live="assertive"
97+
aria-atomic="true"
98+
className="slds-assistive-text"
99+
>
100+
task notification: Call Two: Jane Johnson
101+
</div>
102+
<Notification
103+
headingID="noti77"
104+
type="task"
105+
title="Call Two: Jane Johnson"
106+
description="Task due on Jan 8"
107+
/>
94108
</NotificationContainer>
95109
</div>
96110
},
@@ -100,32 +114,25 @@ export let examples = [
100114
element:
101115
<div className="demo-only slds-is-relative" style={{ height: '15rem' }}>
102116
<NotificationContainer>
103-
<Notification headingID="noti77">
104-
<StandardIcon
105-
containerClassName="slds-media__figure"
106-
className="slds-icon--small"
107-
assistiveText={false}
108-
symbol="task"
109-
title="task"
110-
/>
111-
<div className="slds-media__body">
112-
<h2 className="slds-text-heading--small slds-m-bottom--xx-small" id="noti77"><span className="slds-assistive-text">Notification:</span>Call Two: Jane Johnson</h2>
113-
<p>Task due on Jan 8</p>
114-
</div>
115-
</Notification>
116-
<Notification headingID="noti52">
117-
<StandardIcon
118-
containerClassName="slds-media__figure"
119-
className="slds-icon--small"
120-
assistiveText={false}
121-
symbol="event"
122-
title="event"
123-
/>
124-
<div className="slds-media__body">
125-
<h2 className="slds-text-heading--small slds-m-bottom--xx-small" id="noti52"><span className="slds-assistive-text">Notification:</span>Tesla - Renewal meeting</h2>
126-
<p>Event at 11:00am on Jan 8</p>
127-
</div>
128-
</Notification>
117+
<div
118+
aria-live="assertive"
119+
aria-atomic="true"
120+
className="slds-assistive-text"
121+
>
122+
task notification: Call Two: Jane Johnson
123+
</div>
124+
<Notification
125+
headingID="noti77"
126+
type="task"
127+
title="Call Two: Jane Johnson"
128+
description="Task due on Jan 8"
129+
/>
130+
<Notification
131+
headingID="noti52"
132+
type="event"
133+
title="Tesla - Renewal meeting"
134+
description="Event at 11:00am on Jan 8"
135+
/>
129136
</NotificationContainer>
130137
</div>
131138
},
@@ -135,45 +142,31 @@ export let examples = [
135142
element:
136143
<div className="demo-only slds-is-relative" style={{ height: '15rem' }}>
137144
<NotificationContainer>
138-
<Notification headingID="noti77">
139-
<StandardIcon
140-
containerClassName="slds-media__figure"
141-
className="slds-icon--small"
142-
assistiveText={false}
143-
symbol="task"
144-
title="task"
145-
/>
146-
<div className="slds-media__body">
147-
<h2 className="slds-text-heading--small slds-m-bottom--xx-small" id="noti77"><span className="slds-assistive-text">Notification:</span>Call Two: Jane Johnson</h2>
148-
<p>Task due on Jan 8</p>
149-
</div>
150-
</Notification>
151-
<Notification headingID="noti52">
152-
<StandardIcon
153-
containerClassName="slds-media__figure"
154-
className="slds-icon--small"
155-
assistiveText={false}
156-
symbol="event"
157-
title="event"
158-
/>
159-
<div className="slds-media__body">
160-
<h2 className="slds-text-heading--small slds-m-bottom--xx-small" id="noti52"><span className="slds-assistive-text">Notification:</span>Tesla - Renewal meeting</h2>
161-
<p>Event at 11:00am on Jan 8</p>
162-
</div>
163-
</Notification>
164-
<Notification headingID="noti66">
165-
<StandardIcon
166-
containerClassName="slds-media__figure"
167-
className="slds-icon--small"
168-
assistiveText={false}
169-
symbol="task"
170-
title="task"
171-
/>
172-
<div className="slds-media__body">
173-
<h2 className="slds-text-heading--small slds-m-bottom--xx-small" id="noti66"><span className="slds-assistive-text">Notification:</span>Call Three: Jim Jameson</h2>
174-
<p>Task due on Jan 8</p>
175-
</div>
176-
</Notification>
145+
<div
146+
aria-live="assertive"
147+
aria-atomic="true"
148+
className="slds-assistive-text"
149+
>
150+
task notification: Call Two: Jane Johnson
151+
</div>
152+
<Notification
153+
headingID="noti77"
154+
type="task"
155+
title="Call Two: Jane Johnson"
156+
description="Task due on Jan 8"
157+
/>
158+
<Notification
159+
headingID="noti52"
160+
type="event"
161+
title="Tesla - Renewal meeting"
162+
description="Event at 11:00am on Jan 8"
163+
/>
164+
<Notification
165+
headingID="noti66"
166+
type="task"
167+
title="Call Three: Jim Jameson"
168+
description="Task due on Jan 8"
169+
/>
177170
</NotificationContainer>
178171
</div>
179172
},
@@ -183,85 +176,51 @@ export let examples = [
183176
element:
184177
<div className="demo-only slds-is-relative" style={{ height: '17rem' }}>
185178
<NotificationContainer>
186-
<Notification headingID="noti77">
187-
<StandardIcon
188-
containerClassName="slds-media__figure"
189-
className="slds-icon--small"
190-
assistiveText={false}
191-
symbol="task"
192-
title="task"
193-
/>
194-
<div className="slds-media__body">
195-
<h2 className="slds-text-heading--small slds-m-bottom--xx-small" id="noti77"><span className="slds-assistive-text">Notification:</span>Call Two: Jane Johnson</h2>
196-
<p>Task due on Jan 8</p>
197-
</div>
198-
</Notification>
199-
<Notification headingID="noti52">
200-
<StandardIcon
201-
containerClassName="slds-media__figure"
202-
className="slds-icon--small"
203-
assistiveText={false}
204-
symbol="event"
205-
title="event"
206-
/>
207-
<div className="slds-media__body">
208-
<h2 className="slds-text-heading--small slds-m-bottom--xx-small" id="noti52"><span className="slds-assistive-text">Notification:</span>Tesla - Renewal meeting</h2>
209-
<p>Event at 11:00am on Jan 8</p>
210-
</div>
211-
</Notification>
212-
<Notification headingID="noti66">
213-
<StandardIcon
214-
containerClassName="slds-media__figure"
215-
className="slds-icon--small"
216-
assistiveText={false}
217-
symbol="task"
218-
title="task"
219-
/>
220-
<div className="slds-media__body">
221-
<h2 className="slds-text-heading--small slds-m-bottom--xx-small" id="noti66"><span className="slds-assistive-text">Notification:</span>Call Three: Jim Jameson</h2>
222-
<p>Task due on Jan 8</p>
223-
</div>
224-
</Notification>
225-
<Notification headingID="noti48">
226-
<StandardIcon
227-
containerClassName="slds-media__figure"
228-
className="slds-icon--small"
229-
assistiveText={false}
230-
symbol="task"
231-
title="task"
232-
/>
233-
<div className="slds-media__body">
234-
<h2 className="slds-text-heading--small slds-m-bottom--xx-small" id="noti48"><span className="slds-assistive-text">Notification:</span>Call Two: Jane Johnson</h2>
235-
<p>Task due on Jan 8</p>
236-
</div>
237-
</Notification>
238-
<Notification headingID="noti59">
239-
<StandardIcon
240-
containerClassName="slds-media__figure"
241-
className="slds-icon--small"
242-
assistiveText={false}
243-
symbol="event"
244-
title="event"
245-
/>
246-
<div className="slds-media__body">
247-
<h2 className="slds-text-heading--small slds-m-bottom--xx-small" id="noti59"><span className="slds-assistive-text">Notification:</span>Tesla - Renewal meeting</h2>
248-
<p>Event at 11:00am on Jan 8</p>
249-
</div>
250-
</Notification>
251-
<Notification headingID="noti86">
252-
<StandardIcon
253-
containerClassName="slds-media__figure"
254-
className="slds-icon--small"
255-
assistiveText={false}
256-
symbol="task"
257-
title="task"
258-
/>
259-
<div className="slds-media__body">
260-
<h2 className="slds-text-heading--small slds-m-bottom--xx-small" id="noti86"><span className="slds-assistive-text">Notification:</span>Call Three: Jim Jameson</h2>
261-
<p>Task due on Jan 8</p>
262-
</div>
263-
</Notification>
179+
<div
180+
aria-live="assertive"
181+
aria-atomic="true"
182+
className="slds-assistive-text"
183+
>
184+
task notification: Call Two: Jane Johnson
185+
</div>
186+
<Notification
187+
headingID="noti77"
188+
type="task"
189+
title="Call Two: Jane Johnson"
190+
description="Task due on Jan 8"
191+
/>
192+
<Notification
193+
headingID="noti52"
194+
type="event"
195+
title="Tesla - Renewal meeting"
196+
description="Event at 11:00am on Jan 8"
197+
/>
198+
<Notification
199+
headingID="noti66"
200+
type="task"
201+
title="Call Three: Jim Jameson"
202+
description="Task due on Jan 8"
203+
/>
204+
<Notification
205+
headingID="noti48"
206+
type="task"
207+
title="Call Two: Jane Johnson"
208+
description="Task due on Jan 8"
209+
/>
210+
<Notification
211+
headingID="noti59"
212+
type="event"
213+
title="Tesla - Renewal meeting"
214+
description="Event at 11:00am on Jan 8"
215+
/>
216+
<Notification
217+
headingID="noti86"
218+
type="task"
219+
title="Call Three: Jim Jameson"
220+
description="Task due on Jan 8"
221+
/>
264222
</NotificationContainer>
265223
</div>
266224
}
267225
];
226+

0 commit comments

Comments
 (0)