﻿1 00:00:00,000 --> 00:00:02,583
(upbeat music) 2
my name is Alba Rivas, 3
Salesforce. 4
talk about 5
accessibility tests 6
7 00:00:21,510 --> 00:00:23,740
In Salesforce, we have a strong commitment 8
9 00:00:25,460 --> 00:00:28,770
We want to make our products easy to use 10
abilities, 11
we have created sa11y. 12
internally 13
accessibility tests. 14
sourced it 15
for your apps. 16
to show you how to write 17
for a lightning web component. 18
using the sa11y jest module, 19
we use jest 20
Component Tests. 21
another module that works 22
23 00:01:10,370
--> 00:01:12,620 and there is another
module that you can use 24
JavaScript. 25
matcher. 26
use to perform our assertions 27
element is accessible. 28
every individual test, 29
create a configuration file 30
31 00:01:36,900 --> 00:01:40,840
and register that configuration file 32
setup. 33
a very simple component, 34
template 35
if a property is true. 36
called areDetailsVisible 37
controls 38
piece of markup here. 39
at the JavaScript class, 40
API property, 41
a external component 42
43 00:02:18,270 --> 00:02:21,570
So what we're going to do is to create
a test 44
component. 45
a command, 46
Web Component Test. 47
shortcut 48
CLI command. 49
you can select the folder, 50
the component 51
the test, 52
test file 53
automatically for you. 54
file that has been generated 55
56
is to modify this dummy test 57
created, 58
to be our accessibility test. 59
to change the test name 60
going to appear on the screen 61
terminal, right? 62
63 00:03:18,730 --> 00:03:21,120
Then I'm happy with this part here. 64
and I'm appending the child
65 00:03:25,350 --> 00:03:26,740
to the DOM. 66
had a portion of markup 67
when the details are true. 68
this piece of markup here 69
it visible. 70
do here before adding it 71
markup. 72
details visible equals true.
73 00:03:56,490 --> 00:03:57,810
Amazing. 74
75 00:03:59,830
--> 00:04:03,120 this part is okay, I'm
adding the component 76
document. 77
modify this assertion. 78
and instead of it, 79
check that our element 80
81 00:04:19,970 --> 00:04:22,213
That's it, very easy, right? 82
because it's the matcher 83
our configuration file 84
the video. 85
is that this call here 86
asynchronously. 87
that I'm going to await for it, 88
arrow function async so that
89 00:04:49,860 --> 00:04:51,363
this works correctly. 90
91 00:04:53,760 --> 00:04:56,593
Now what I'm going to do is to run the test,
92 00:04:57,920 --> 00:05:02,920
and we are going to see that the test passes successfully.
93 00:05:04,360 --> 00:05:06,040
One thing to bear in mind is that 94
accessibility tests 95
configurations and states 96
97 00:05:15,830 --> 00:05:18,080
So you saw how easy it is 98
accessibility tests with sa11y. 99
that sa11y 100
of accessibility issues,