Skip to content
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.

Commit 65b6723

Browse files
321gillian321gillian
committedMar 13, 2025·
fix(button): Icon examples clickable in NVDA
1 parent d358276 commit 65b6723

File tree

2 files changed

+76
-94
lines changed

2 files changed

+76
-94
lines changed
 

‎packages/genesys-spark-components/src/components/stable/gux-button-slot/example.html

+4-4
Original file line numberDiff line numberDiff line change
@@ -22,10 +22,10 @@ <h2>Gux Button</h2>
2222
</div>
2323

2424
<gux-button onclick="notify(event)">
25-
<gux-icon
26-
icon-name="fa/diamond-regular"
27-
screenreader-text="This will be read by a screen reader"
28-
></gux-icon>
25+
<gux-icon icon-name="fa/diamond-regular" decorative></gux-icon>
26+
<gux-screen-reader-beta>
27+
This will be read by a screen reader
28+
</gux-screen-reader-beta>
2929
</gux-button>
3030

3131
<gux-button onclick="notify(event)">

‎packages/genesys-spark-components/src/components/stable/gux-button/example.html

+72-90
Original file line numberDiff line numberDiff line change
@@ -17,46 +17,46 @@ <h3>Text Only</h3>
1717
</div>
1818
<h3>Icon Only</h3>
1919
<div class="container">
20-
<gux-button onclick="notify(event)"
21-
><gux-icon
22-
icon-name="fa/diamond-regular"
23-
screenreader-text="This will be read by a screen reader"
24-
></gux-icon
20+
<gux-button onclick="notify(event)">
21+
<gux-screen-reader-beta>
22+
This will be read by a screen reader
23+
</gux-screen-reader-beta>
24+
<gux-icon icon-name="fa/diamond-regular" decorative></gux-icon
2525
></gux-button>
2626

2727
<gux-button accent="primary" onclick="notify(event)">
28-
<gux-icon
29-
icon-name="fa/diamond-regular"
30-
screenreader-text="This will be read by a screen reader"
31-
></gux-icon
28+
<gux-screen-reader-beta>
29+
This will be read by a screen reader
30+
</gux-screen-reader-beta>
31+
<gux-icon icon-name="fa/diamond-regular" decorative></gux-icon
3232
></gux-button>
3333

3434
<gux-button accent="secondary" onclick="notify(event)">
35-
<gux-icon
36-
icon-name="fa/diamond-regular"
37-
screenreader-text="This will be read by a screen reader"
38-
></gux-icon
35+
<gux-screen-reader-beta>
36+
This will be read by a screen reader
37+
</gux-screen-reader-beta>
38+
<gux-icon icon-name="fa/diamond-regular" decorative></gux-icon
3939
></gux-button>
4040

4141
<gux-button accent="tertiary" onclick="notify(event)">
42-
<gux-icon
43-
icon-name="fa/diamond-regular"
44-
screenreader-text="This will be read by a screen reader"
45-
></gux-icon
42+
<gux-screen-reader-beta>
43+
This will be read by a screen reader
44+
</gux-screen-reader-beta>
45+
<gux-icon icon-name="fa/diamond-regular" decorative></gux-icon
4646
></gux-button>
4747

4848
<gux-button accent="ghost" onclick="notify(event)">
49-
<gux-icon
50-
icon-name="fa/diamond-regular"
51-
screenreader-text="This will be read by a screen reader"
52-
></gux-icon>
49+
<gux-screen-reader-beta>
50+
This will be read by a screen reader
51+
</gux-screen-reader-beta>
52+
<gux-icon icon-name="fa/diamond-regular" decorative></gux-icon>
5353
</gux-button>
5454

5555
<gux-button accent="danger" onclick="notify(event)">
56-
<gux-icon
57-
icon-name="fa/diamond-regular"
58-
screenreader-text="This will be read by a screen reader"
59-
></gux-icon
56+
<gux-screen-reader-beta>
57+
This will be read by a screen reader
58+
</gux-screen-reader-beta>
59+
<gux-icon icon-name="fa/diamond-regular" decorative></gux-icon
6060
></gux-button>
6161
</div>
6262

@@ -103,73 +103,55 @@ <h4>Text with extra description</h4>
103103
<h4>Icon Only</h4>
104104
<div class="container">
105105
<gux-button onclick="notify(event)">
106-
<gux-icon
107-
icon-name="fa/diamond-regular"
108-
screenreader-text="This will be read by a screen reader"
109-
></gux-icon>
110-
<gux-tooltip-beta aria-hidden="true"
106+
<gux-icon icon-name="fa/diamond-regular" decorative></gux-icon>
107+
<gux-tooltip-beta
111108
><span slot="content"
112-
>Visual of screen reader text</span
109+
>This is some screenreader text</span
113110
></gux-tooltip-beta
114111
>
115112
</gux-button>
116113

117114
<gux-button accent="primary" onclick="notify(event)">
118-
<gux-icon
119-
icon-name="fa/diamond-regular"
120-
screenreader-text="This will be read by a screen reader"
121-
></gux-icon>
122-
<gux-tooltip-beta aria-hidden="true"
115+
<gux-icon icon-name="fa/diamond-regular" decorative></gux-icon>
116+
<gux-tooltip-beta
123117
><span slot="content"
124-
>Visual of screen reader text</span
118+
>This is some screenreader text</span
125119
></gux-tooltip-beta
126120
>
127121
</gux-button>
128122

129123
<gux-button accent="secondary" onclick="notify(event)">
130-
<gux-icon
131-
icon-name="fa/diamond-regular"
132-
screenreader-text="This will be read by a screen reader"
133-
></gux-icon>
134-
<gux-tooltip-beta aria-hidden="true"
124+
<gux-icon icon-name="fa/diamond-regular" decorative></gux-icon>
125+
<gux-tooltip-beta
135126
><span slot="content"
136-
>Visual of screen reader text</span
127+
>This is some screenreader text</span
137128
></gux-tooltip-beta
138129
>
139130
</gux-button>
140131

141132
<gux-button accent="tertiary" onclick="notify(event)">
142-
<gux-icon
143-
icon-name="fa/diamond-regular"
144-
screenreader-text="This will be read by a screen reader"
145-
></gux-icon>
146-
<gux-tooltip-beta aria-hidden="true"
133+
<gux-icon icon-name="fa/diamond-regular" decorative></gux-icon>
134+
<gux-tooltip-beta
147135
><span slot="content"
148-
>Visual of screen reader text</span
136+
>This is some screenreader text</span
149137
></gux-tooltip-beta
150138
>
151139
</gux-button>
152140

153141
<gux-button accent="ghost" onclick="notify(event)">
154-
<gux-icon
155-
icon-name="fa/diamond-regular"
156-
screenreader-text="This will be read by a screen reader"
157-
></gux-icon>
158-
<gux-tooltip-beta aria-hidden="true"
142+
<gux-icon icon-name="fa/diamond-regular" decorative></gux-icon>
143+
<gux-tooltip-beta
159144
><span slot="content"
160-
>Visual of screen reader text</span
145+
>This is some screenreader text</span
161146
></gux-tooltip-beta
162147
>
163148
</gux-button>
164149

165150
<gux-button accent="danger" onclick="notify(event)">
166-
<gux-icon
167-
icon-name="fa/diamond-regular"
168-
screenreader-text="This will be read by a screen reader"
169-
></gux-icon>
170-
<gux-tooltip-beta aria-hidden="true"
151+
<gux-icon icon-name="fa/diamond-regular" decorative></gux-icon>
152+
<gux-tooltip-beta
171153
><span slot="content"
172-
>Visual of screen reader text</span
154+
>This is some screenreader text</span
173155
></gux-tooltip-beta
174156
>
175157
</gux-button>
@@ -248,46 +230,46 @@ <h2>Disabled</h2>
248230
</div>
249231
<h3>Icon Only</h3>
250232
<div class="container">
251-
<gux-button disabled onclick="notify(event)"
252-
><gux-icon
253-
icon-name="fa/diamond-regular"
254-
screenreader-text="This will be read by a screen reader"
255-
></gux-icon>
233+
<gux-button disabled onclick="notify(event)">
234+
<gux-screen-reader-beta>
235+
This will be read by a screen reader
236+
</gux-screen-reader-beta>
237+
<gux-icon icon-name="fa/diamond-regular" decorative></gux-icon>
256238
</gux-button>
257239

258240
<gux-button disabled accent="primary" onclick="notify(event)">
259-
<gux-icon
260-
icon-name="fa/diamond-regular"
261-
screenreader-text="This will be read by a screen reader"
262-
></gux-icon
263-
></gux-button>
241+
<gux-screen-reader-beta>
242+
This will be read by a screen reader
243+
</gux-screen-reader-beta>
244+
<gux-icon icon-name="fa/diamond-regular" decorative></gux-icon>
245+
</gux-button>
264246

265247
<gux-button disabled accent="secondary" onclick="notify(event)">
266-
<gux-icon
267-
icon-name="fa/diamond-regular"
268-
screenreader-text="This will be read by a screen reader"
269-
></gux-icon
270-
></gux-button>
248+
<gux-screen-reader-beta>
249+
This will be read by a screen reader
250+
</gux-screen-reader-beta>
251+
<gux-icon icon-name="fa/diamond-regular" decorative></gux-icon>
252+
</gux-button>
271253

272254
<gux-button disabled accent="tertiary" onclick="notify(event)">
273-
<gux-icon
274-
icon-name="fa/diamond-regular"
275-
screenreader-text="This will be read by a screen reader"
276-
></gux-icon
277-
></gux-button>
255+
<gux-screen-reader-beta>
256+
This will be read by a screen reader
257+
</gux-screen-reader-beta>
258+
<gux-icon icon-name="fa/diamond-regular" decorative></gux-icon>
259+
</gux-button>
278260

279261
<gux-button disabled accent="ghost" onclick="notify(event)">
280-
<gux-icon
281-
icon-name="fa/diamond-regular"
282-
screenreader-text="This will be read by a screen reader"
283-
></gux-icon
284-
></gux-button>
262+
<gux-screen-reader-beta>
263+
This will be read by a screen reader
264+
</gux-screen-reader-beta>
265+
<gux-icon icon-name="fa/diamond-regular" decorative></gux-icon>
266+
</gux-button>
285267

286268
<gux-button disabled accent="danger" onclick="notify(event)">
287-
<gux-icon
288-
icon-name="fa/diamond-regular"
289-
screenreader-text="This will be read by a screen reader"
290-
></gux-icon
269+
<gux-screen-reader-beta>
270+
This will be read by a screen reader
271+
</gux-screen-reader-beta>
272+
<gux-icon icon-name="fa/diamond-regular" decorative></gux-icon
291273
></gux-button>
292274
</div>
293275

0 commit comments

Comments
 (0)
Please sign in to comment.