Adding Custom Ruleset to wagtail sa11y plugin

is Umar Faruk again and um I'm making this screencast to put on screw on how to make use of the um SA11Y plugin and defining a custom accessibility rule set. Yeah. Um just come here yeah So this is it from the um web page you will actually see that you can create a custom check on the on your site. Yeah and then Yeah quite a lot of things you could explore here. You could use the induced selectors and then you could use some utility components and then

We'll define it as a button notation and then you have the option of using this method which is this. salido root and then you can use your default JavaScript documents query selector. Yeah, and then highlight text you could use the warning highlight text or error highlight text. I think we have some sort of some of them here like uh Okay, we just try to go through it and then um let's come here. So this is like a sample There's yeah a sample is a over using a component on a page. So you could actually use this to define um uh maybe over

when you use a over user component on your page and then you could use this to say okay um this for nested accordion containing a form which is kind of problematic so let's just go ahead and then we'll go to our bakery demo site here so this is my bakery demo site on firefox and then We could actually see a lot here. Okay. So we just come here and Okay, very okay. So what rule set should we define? Okay, let's say I want to this is my gallery page. So I want to define a rule set to say In a ga in a single gallery page we shouldn't have more than 20 images.

Yeah. We could you could see we have uh roughly it'd be 30 something here. So we don't want it. We don't want to have more than 30 something images in a gallery page. We want to have less than that. So if I should turn on my check and now you see just analyze everything without the um it's not cheaping for the length of the um images so let's define a co uh custom rule set to prepare for this. So and um okay So in defining that , in the previous screencast you could remember that I had included this version, this logic here saying

the Sally custom checks. js and dots so in this file is where we define our custom rule set here And then I think I have mine cleared already. So but by default in yours you should see some predefined rule set that comes with it some sample rule sets. Yeah, that comes with it. So let's let's just go on and let's use this. So This is the class, this is a SAA11Y custom checks class. So we want to extend this class. Yeah. Want to extend this class to to like data for um our uh custom rule set

so we could define the error good or warning messages yeah so these are just like syntax so we could define any of this and then In this section is where we are going to define our custom messages. Yeah, so our custom messages should go within this app here and then we just say um let's see let's say C is equal to and then we try to open it Yeah, so we say um it's going to be announcement. Yeah, let's define it as A con uh

a constant announcement. Uh main save. So Alright, so we just define and say okay no more than twenty images should be in a single gallery page yeah so we've defined this and then you could have multiple um messages here so just say announcement message Okay, let's just use it announcement message.

So we've defined our announcement message here and then the next thing to do is uh we want to define our custom rule set here. Yeah so In defining personal rule set here, what we have to do here is uh you could come to your browser And then let 's try to inspect to get the um class currently. Yeah. So we could just come and then say um I try to Right again okay. So let's try to take a focus. Okay, so well that's interesting. It's carrying it's And uh on other lists carrying

several list items. Yeah. So it's made it more interesting. We just need to say um this on other list shouldn't take more than 10 items or 20 items, right? So what's the class? List limits? Alright. Okay. So let's just come back to um Let's come back to our where we are defining uh custom checks and then we'll say constant uh check Check gallery is equal to these S And then um so I'm not I'm not like picking it off my head.

That's part of what we get from the SA10Y um site. So we could actually extend this and then let's say we try to pick this yeah. So let's speak that and then come here by saying Yeah, so It's interesting. Let's say we want to extend this class and um if we just try to extend the class, so we say UL dot uh Listening, there 's voice, that's images And uh I'm sure we are all

like pretty familiar with this. Um concept in JavaScript. So I'm just picking the classes. It's not I'm not picking anything special. It's more parallel yes. on on other list so having the listing images and then we pick the um LI classes so it's not like I'm picking something uh new okay so we've defined our uh um variable called check gallery and then we want to locate this and after that we can have an add the um conditional statement here we say So how do we say so we we try to get the length

and then return the length to be fine here? So this one If this dot length is uh greater than twenty , at least twenty, it's extended Yeah, so if it's greater than ten then we we it trade through each of them and uh we try to add some interesting border around it okay so um I define my uh follow here and then I say let I recur to tenth? Yeah. So we want to start from the tenth item, yeah.

And uh When we start from the 10th item , let's say let's i is equal to 10 and uh i sorry i is less than uh Check gallery oops I forgot to say to gallery dot length and then the uh I was yeah. So we have that, so we've initialized our um what's the name? We've initialized our loop We've set it to start from um the 10th item and then till the max and then

equate. So in the next sense when you say okay, the Check gallery at I dot so we will now want to add the um SA10Y classes so let's come back here say okay what can we add the class list dot so we want to add the border so we come back here then we say Yeah so so we want to add the actual we are we shouldn't add the error border it should be a warning border So I think we have the logic for that. Yeah, so this is a warning border. You want to add a warning

border to it and then You just copy it down here and then bam. Okay, so we have it and uh the next thing is uh you want to add the section for our message saying okay maybe you want you to add this uh message down here so I'll just try to explain everything One after the other. Okay. So this is what we are getting there and then let 's just try to bring it right there. We say um so what do we do next? Say

it's try to adjust these and then So we try to eject this and try to adjust this also. Yeah, and then Alright, so we've tried to adjust them. It's now remaining for us to ship it back to uh Alright, I love to use this object reference in as I love to use it as the what 's the name Okay, so this path before I clean it this is saying m. warning but we didn't define a warning message in an object so we just call it directly because we define it as a constant here

So we'll just call a warning message here. Bam. So this is referencing that here we want this kind of uh we want to display a warning message. So This should come as a warning to get and then the next thing is uh warning message here so uh I don't really like this though we might use it also but let's just use the dots um object referencing so just pick dot announcement message if this did you see dot announcement message and then If we happen to define this um constant, the error warning or good um values in a in an object then we could actually use this notation also.

Let's just pick it like this and um try to save. So let's go by it again and then see what else do we have So we've successfully picked the cap here and then say all these icons in that class So say once it's greater than 10, start from the um 11th item since I yeah an array always starts from zero. So start from the 11th item till the last item you create keep uh increasing and then um what you need to do the is you add the class for Sally one in uh border Oh yeah, we made a mistake here. So this is you know we copied this from

uh the SA11Y uh site, so we should change it to ours and then we should be it. So let's see on iterating keep adding this warning butter to each images and then displaying this warning messages to them. So let's try to save that and um Let's go back to our page to see. I'll just try to replace and then try to see if it's actually work Okay, so we can see now let's try to open our SA111. Oh this is cool. So you can actually see that okay. From the tenth item we have the yellow border. Saying no more than 20 images should be in a single gallery page.

This is coming as a warning message. Let's try to push this up. We have confirmed that our custom text is now there. Let's try to push this up and try to um extend our images uh extend our warning message to say please move image so i to a to a new page. So let's try to save that. So here we say please move the image, the current image to a new page. Try to spice things up and check what we have. So again you can see

this move image 10 to a new bit or it's now displaying nice. So let's try it Leave some spaces there. Okay. Then I sit again. Try to refresh and then What we see here now is please move image 10 to a new page, please move image 12 to a new page, move image 14 Move image 15 which is this to a new page and then we'll get to the last item please move image 28 to a new page So this is interesting. We've successfully um defined a custom text for our um SA11Y plugin and I think you could actually take the most out of it.

Thank you very much for listening to me once again, Emma Mark Park.