Hey, everybody. All right.  So this is robustness and caste. You have a version of Drupal's primary menu. And that's me. That's my daughter, Millie, and my puppy, Dexter. I work at AVB Digital, which is a company that does federal-type websites. I'm working on a small business administration's website right now. And I've been doing Drupal and websites for a very long time. So I am the primary developer on the Olivero theme. So I'll explain kind of what that is if y'all don't know. But let me talk what I want your takeaways to be from this right here, as I want you to kind of learn and evaluate your website's navigation for accessibility and understand some common navigation problems and solutions and how to fix those, and dispel the myth that websites can't be beautiful as well as highly accessible. What's not listed here, I don't think unless there's a number five, is that I want you to take away that Olivero, which has a print, like you're using it. It seems kind of straightforward. But there's a lot of thought that goes into this, like a whole bunch. And I'm going to walk you through that. And it's going to be exciting and boring at the same time. So be prepared. Everybody sit down and go through that. So if you're new to Drupal, you're probably thinking, why do we need a new theme? Why do we need a new navigation? So we're all familiar with Bartik. Bartik was developed when Internet Explorer 8 was the primary browser. Like, it served us well for a long time, but it's getting a little dated looking. And that's a problem. So this is what Olivero looks like. And Olivero, in my opinion, is beautiful. It looks good. And you can kind of see the navigation at the top and how that works. And you can see how the mobile navigation works. And this is what we're going to talk about. And like, holy cow, Drupal out of the box supporting two layers of navigation. Like, welcome to Drupal 10. But yay. I mean, welcome to 2010. But yay, you know? So when we're creating this menu system, like we have, of course, a number of goals. It needs to be usable. It needs to be highly accessible. And it needs to be robust. And when I'm talking about usable, it doesn't just need to work. It needs to work well. It needs to look pretty. It needs to be gorgeous. I want people, when they download Drupal and install Drupal, I want them to be like, holy cow, this is cool. This is modern. This is awesome. I want them to have that warm, fuzzy feeling, you know? So we have like, the submenus need to open on hover. Like, I like the idea of click to open, but I also want it on hover.  Because that's just me. But it obviously needs to work on click and touch. It needs to be very highly accessible. Drupal Core has a core accessibility gate where it needs to meet the WCAG, AA compliance. And it's not going in if it doesn't do that. But more than that, we want it to work. This theme is going to be in front of like, tens to hundreds of thousands of people. And many of those people will need accessibility technology to navigate this. It needs to work perfectly. Any other type of screen reader or assistive technology. It also needs to work in forced colors mode. Forced colors mode is like Windows High Contrast. That is a frequent something that people overlook. And that's something that this menu we take care about. And when we're talking about making it robust, it just doesn't need to be mobile friendly, of course. It needs to work on pointer, tap, and hybrid devices and any device in between. It needs to support a large number of navigation items.  Because that's what content editors do. So thank you, everybody. And of course, it needs to support multilingual. It needs to support right to left languages. So like Arabic and Hebrew, they read from the right side and then this way. We support that. It works. And we also support non-JavaScript environments. This isn't quite a core gate. But in my mind, if anyone has ever had conference Wi-Fi, I don't know if you have. It's horrible. And sometimes resources don't load. And that might be your JavaScript. And I want this to be lightweight. I want this to load quick.  That type of stuff is important for me. On top of that, Drupal 9, which is where all this development is, we support Internet Explorer 11, which has the big crying emoji there. So that adds a whole level of complexity on that we have to support going into this. So let's talk about how we got there. I'm going to tell the story. I'm going to tell how we started creating this menu system. I'm going to go through a bunch of Drupal issues at the bottom of the screen. You can even find the issue numbers if you want to look at the discussion and the copy and paste the code and all that type of stuff. It's all open source, and I encourage you to do that. And at the end, I'm going to tell you about some next steps that I'm excited that we could even hopefully expand on some of this stuff. So I initially started working on Olivero, when does this say? September 15, 2009, or 2019. And this started with just some static HTML. I wanted static HTML. I think I might have used SAS. I don't even know, and vanilla JavaScript.  So working on the menu, the first thing that we knew, I wanted it to open on hover. And then we were using focus within to navigate the submenus and click buttons for mobile. So you go into mobile button, there would be a click to expand. So this was pretty basic right here. And it works, but it wasn't quite right. So one of the first issues that we ran into within this proof of concept is that there's no indication that there's a submenu. In addition to that, if a user is navigating the menu system via a keyboard, they have to go through the whole menu if they want to go to the end. And that's an issue. So what we ended up doing is we ended up just taking that mobile plus, minus button and making it functional at desktop widths. So you could navigate. You could tab forward, tab past it.  And then we added a little bit of JavaScript to open and close that on hover. And we added a couple ARIA attributes, ARIA controls, and ARIA expanded with our accessibility ARIA attributes that will inform any type of assistive technology that, hey, this menu is open, or this button controls something that's open. This button controls something that's closed. And then we took out that whole focus within, at least for environment-sav JavaScript. And this goes into what's called a link disclosure pattern. So within Drupal, I'm sure you all have seen where you have a hyperlink. And then, but underneath the hyperlink, there is a submenu. But what if you click on the hyperlink? It will navigate you to submenu. And it's kind of like really, really a little weird. So the link disclosure pattern has the hyperlink on the left-hand side. And then the button, which is the chevron right there, will toggle the submenu. And this works pretty well if users want to have a hyperlink at the top. There's ARIA controls and ARIA expanded attributes that we already talked about that tell the assistive tech that, hey, it's open or closed. And you can also use the escape key on your keyboard to close that menu and get out of that. And so this is pretty cool. Of course, we replaced this plus with a chevron, which, of course, looks a lot better. So on mobile menus, there's an option within Olivero's settings. So if you go into the theme settings, there's a little checkbox that says, enable mobile menu at all widths. So this is really cool if you have, say, like 10,000 menu items and they won't fit across the top. At the same time, what happens is the menu kind of gets in front of everything. And we need to make sure that if something gets focused, like if you tab to something and something gets focused, it's visible on the screen. And that's a WKX success criterion. So we do this by implementing what's called a focus trap. And the focus trap means if you're in the submenu, which is in front of everything, and you're tabbing around, you cannot tab outside of that until you hit the escape button or something else. So probably about two-ish years ago, we actually moved out of the proof of concept phase, which took several months. And we moved into a regular contrib theme called Oliveiro. And so we're not yet in Drupal Core, but now we're Drupal. We're messing around with the Drupal theme system. We're writing a little bit of PHP. We're writing Twig. And we're using things like Drupal behaviors. So one of the first things that we had to do is we had to support no link and button. So I want to show hands here who here in this audience knows that when you're creating a menu item, you can type in like angle brackets button. So for the recording, there's two people in maybe a room of like 80 or so. So just so you know, you can go into a menu item, and instead of typing front page or a forward slash or a link to something, you can type in button, and it will create a button element. Outside of that, you can also type in no link, and no link will generate a span element. And that's kind of cool for accessibility reasons, right? Because in my mind, if you have a top level navigation item, and there's a sub menu under there, that top level navigation item should be a disclosure button. And you hit it, or you hover it, or whatever, and it disclosures what's underneath. So of course, Olivero needs to support that. So this is like the markup that it generates right here. You see like the link disclosure pattern at the top, and then you have more of, I guess this is no link right here, the second one. And at the bottom, we have more of a traditional button disclosure, a button disclosure pattern. The whole thing is a button. And to me, that's kind of a little bit more optimal. But that, of course, once again, is up to the site builder, the users, to create that. We can't control that. So this is very similar to the link disclosure pattern that I talked about earlier. Escaping will close the menu. And then also, if you tap outside, or you click outside, it'll close the menu. So an issue, like at this point, we're trying to get this in front of a lot of people. We're trying to get it in front of a lot of accessibility maintainers. One of the first issues that we got into is we have this hidden text in there in the link disclosure buttons that basically say toggle subnavigation. And what happens is if you have a screen reader going through, tapping through, it'll say toggle subnavigation. But we realize that could be a little confusing, because all of them say the same thing. They all say toggle subnavigation. And there's no indication of what subnavigation it's toggling. So this is pretty straightforward. We just outputted the text of the button, or the text of whatever item that is. So instead of saying toggle subnavigation, it now says webform subnavigation, or feature subnavigation, or whatever your item subnavigation is. And we even talked about calling it something different than navigation, like calling it to menu and stuff. But we figured maybe navigation would be more translatable. But I don't think it would probably matter too much, as long as it's understandable. We had an issue going back to not supporting non-JavaScript environments. Those ARIA attributes that we're adding right there, they really don't do anything unless JavaScript's enabled. So if JavaScript's disabled, ARIA attributes are kind of a lie. It says ARIA expanded false, but there's no way without JavaScript to make that true. So what we ended up doing is we ended up hiding these buttons from assistive technology unless JavaScript's enabled. So JavaScript gets it down there, and it will kind of remove the ARIA hidden, remove the tab index. And at that point, it will be fully accessible. So that kind of works pretty well. We have a ensure text spacing compliance issue right here. And what that means is end users can do have their own styles on the browser that they might use to override. They might make their text larger, or they might add some text spacing or font spacing or something in there. We need to make sure that it works with that. And so we did a lot of testing with line height and increasing text spacing and things like that. And the testing for that went pretty well. The way that we did that is there's a book marklet right there that kind of just adds a JavaScript that sets these styles. But pretty much you can copy and paste this type of stuff, throw in developer tools or something like that. But you can see it's adjusting your line height, word spacing. So what that means is our menu system does not rely on those styles. It's very robust. You can kind of throw whatever the heck you want at it, and it should still work. And if you zoom in, you command plus or control plus or whatever, it still needs to work. There should be no point where it does not work. And yeah, so force colors mode or high contrast mode. So Windows High Contrast is kind of like an implementation of force colors. Force colors will override your browser, your author styles. The styles that I write, it will override things like background colors and things like that. And when you're thinking of force colors mode, it's not just this where you have a light on dark theme. People can have dark on light themes and things like that. People might create a custom color scheme like fuchsia on red, and we need to support that. That's the type of thing that does not come to the top of mind when you're thinking of accessibility, but there's a lot of care and TLC that kind of goes into this to support it. It's not just Internet Explorer and Edge, but we also did testing with Firefox and Chrome in this. And I can talk your ear off about force colors. Not all CSS properties work in force colors. Like as I said, like background color and box shadows, they will go away. If you're using force, if you're using box shadow to set focus states, that's gonna be an issue because that's gonna go away. You need to test this so you can find stuff.  Like modern versions of Microsoft Edge do not work using current color for fills in SVGs like you would expect. There's a good resource kind of at the bottom right there that I'm linking to. And I'll send out the links to my slides and stuff afterwards if you're more interested in force colors. During this whole process, I introduced a security vulnerability while we were still in contrib, a cross-eyed scripting vulnerability, right? So this is kind of like some simplified code right here where basically I needed to wrap the title of the link in a span so we could have some cool hover effects. Everybody likes cool hover effects. And but the angle brackets and everything for the span were being outputted on the screen. Well, that's pretty easy to fix. I just went ahead and added this little raw filter in there. So the problem is is now if people type in JavaScript in there, JavaScript will execute, you know? So that is a potential security vulnerability because as soon as you allow someone to execute their JavaScript, they can do all types of funky stuff. They could navigate you into the admin panel if you have those permissions or do something like that. And that's a big deal. It was pretty straightforward to fix.  This is important stuff and it's easy to do. Everybody can introduce security vulnerabilities because I totally did. The solution is not to use the raw filter. I think with twig2 it's called verabatim.  You need to pay a little bit of special attention to that to make sure you're not doing something like I did right here. So there's ways around that. You know, like y'all know in Drupal and in twig, there's a million ways to do everything. We just did it a different way and it worked perfectly. So here is what it should look like. If I type in script alert, I actually want it to show up up there. And that's what it does now and it does not execute JavaScript. So finally, we actually moved into Drupal Core. This is like a big monumentous occasion for me because I was not really a core Drupal Core developer. And I always looked at Drupal Core developers high up on a pedestal, you know, and in their ivory towers smoking cigars and stuff. And so I'm like, all right, I did this. And now I get to go up and have those cigars. But it was like, holy cow, this is in there.  This is probably about a year and a half ago at this point and went into Drupal Core as experimental. And so what experimental means is it's in core, but it's not perfect, you know. And if you try enable it, it'll say, hey, this is experimental, you know. So that's pretty cool. So one cool thing with getting into Drupal Core is things move a lot slower. And so I say that's good because it gets like a lot of eyes on there, you know. There was a lot of issues like accessibility issues that were discovered because once we had Drupal Core accessibility maintainers looking in here, these people are like extremely, extremely impressively smart. And let me tell you, I personally learned so much about this type of stuff going through this process. And so I encourage you all to do it. But they started putting their eyes on this and they found problems, you know. And so at this point, all right, let's kind of take care of this. So this particular issue that we have right here is a focus visible issue. So there's a success criterion that says if an item has focus, you need to be able to see what it is, you know. And that's like a hard and set rule right there. So this particular issue is if something has focus and you move your mouse out, then you can't see where that focus is. And you're thinking to yourself, yeah, this is an edge case, no one's ever gonna do that. But you know they're gonna do it, you know. So like we need to take care of this, you know. So it was kind of straightforward. What we do is we check, you can see like line 128 right there, check, say, hey, if the document active element, that's the focus element, if it's active and open and stuff like that, don't close it when you do the mouse out. It's kind of straightforward, but you need to know. You know, knowing is half the battle. Does anybody ever watch G.I. Joe? That was like a thing. Thank you, Martin, for raising your hand and validating me. So we had another issue. We needed to have the sub navigation close on blur. So blur is like almost like the opposite of focus. If focus moves away, we need to close those sub navigation items because to tell you the truth, something underneath might have focus. And at that point, once again, we're gonna have a focus visible issue. So that's a little bit of work, a little bit of stuff. It also prevents from, menus from overlapping each other, you know. So this was once again like kind of, not a terrible difficult thing to do, but it's just one of those things that we had to know to do it. We set a little bit of a time out so it doesn't close immediately, but it does close just in case people go and come back and stuff like that. Yeah, so ran into this one issue that was like a little bit funky, you know. It took two, like if I had the desktop navigation loaded on a mobile device, let's call it like a large iPad or something like that, it took two taps to open up the menu. Hey, that's kind of weird, you know. So you can kind of see on the right hand side here, I'm using like Chrome developer tools to kind of emulate it. And you can see like I tap once, nothing happens, and then I tap again and it opens. And then it kind of works like you would expect. So what's going on? So did a little bit of debugging in here, and what we found is that the tap, it will trigger the mouse over event, which of course will activate that submenu, but it also triggers the click event, which will then deactivate the submenu. So that submenu gets activated and deactivate all within like, you know, a CPU cycle, so you never see it. So if you, but if you tap it again, it already has the focus, so it'll just, it already has the mouse over. So at that point it'll trigger only the click event, which will activate the menu properly. So this one was kind of interesting right here. So like the first thing, as a developer, what do you do?  So like you Google it, and I found this article that says, supporting both touch event and mouse event, and this looks really straightforward. And it basically says like, if you have a touch start event, don't do anything else and just open up the subnav. And hey, that kind of works, right? But, there's always a but. There's another success criterion called pointer cancellation. And what that means is you need to be able to kind of back up your actions, you know?  And then you kind of like, hold that mouse button down and drag it somewhere else. And then you release and you're like, please don't submit the form. That is a textbook example of pointer cancellation right there. So this is the type of thing that needs to be thought about, this needs to occur, you know? So, we need to account for that. So, and that first solution that's referenced on MDN does not account for that. So, second attempt right here. So at this point what we're doing is we're gonna listen for the touch event. And then if there is a touch event, we kind of add like a little bit of a, like a CSS class to remember. And then we basically don't do anything on the mouse over event. And then we'll just handle the click event and the click event will just go like normal. So you're not gonna have that double. And you're thinking, hey, that's a perfect solution. But it's not just touch and mouse devices. This is like, I forget what this is called. This is like a pointer tool that's included in Mac OS. And it allows, like this is going really fast right here. But what it does is it slowly kind of scans your screen in one axis. And then you hit another button, scans your screen in another axis. Then you hit another button and then it kind of zooms in and then it does it again. And it allows a, it's an assistive technology that allows a user to be able to kind of, you know, operate a website and click on something. This type of stuff is important, you know? And there's other things like hover capable styluses and stuff like that. And what we were worried about is we were worried that this solution wouldn't work with that. So the solution that we ended up kind of working with right here is a little bit more complex than you would initially think. And the reason I'm bringing this up is because like you look at Oliveira's menu and it's just a normal dropdown menu but there's all this stuff that you got to kind of think about. And it's a little overwhelming, right? Is anyone like overwhelmed? They'd be like, oh crap, I never thought of any of this. Yeah, well that's me like right now. But like, and I have plans to help out everybody too and I'll talk about that. So the solution, the solution here is to kind of go down the route that we were going and says if it's a touch event add a little CSS class and then if it's a mouse over event don't do anything if there's that class is present right there. But then we add in is active mouse over CSS class and then we open up the sub menu and then we set a timeout for a half a second and then we remove that is active mouse over and that kind of gives those point scanning tools an option to kind of like zoom in and do that because that's going to take a little bit longer. If it's a click event the click event won't do anything if the is active mouse over class is present. All this logic is a little bit confusing but if you sit back and you kind of think about it it kind of makes a little bit of sense and it works really well. Like the only thing is if you intentionally want to open and close the sub menu within a half a second it's not going to work. But if you want to do that too bad. So this is an interesting thing right here. So the focus, the focus sub menu item should always be in the viewport, right? So one thing about like Olivero is we have this fixed header at the top and what that means is if you have a very long sub menu and that fixed header is sticky at the top right there and you have like maybe like a short computer like a 13 inch MacBook or a 13 inch laptop or something like that that menu might overflow to the bottom and you can never get to those items. You can never, and if you focus those items you can't see what's focused right here. And once again that's a violation of our good old friend focus visible. So the solution for this was a little bit of a CSS solution right here and we set the max height of that container right there and we kind of set it a little bit shorter than the viewport and things like that. And then we have the overflow auto and what happens is it creates that little scroll bar right there. So no matter what even if you're on a very very short screen you can still kind of scroll down to those even if they're wide. And I think that's kind of cool. This limits us in the future if we want to have like a fly out menu coming out to decide to support tertiary navigations or something like that. We're not gonna be able to do that because of that overflow. But I don't think we're ever gonna do that because honestly like I don't like those and like it seems to work pretty well. So mobile menu obscures page after clicking the anchor link. This was a one that a user found like right here, right? So the hyperlinks, the hyperlinks or the menu system right here we built, we had to build an assumption that we didn't realize. We assumed that after you click an item the page would go somewhere else and navigate and reload the page. That's not always the case. What if you are trying to navigate to an anchor item in the current page? It will not reload the page. But the menu stays open. It will obscure that menu item. Once again, this is a violation of focus visible and things like that. This is a great example of like people like we don't control the content right here. Everybody's gonna be, have their own little things but we need to accommodate it right here. So this was kind of a, once again like once we knew about this we, it was kind of an easy solution. And what this does is it says if the link that is clicked starts with a hash that contains the current page followed by a hash at that point we close the menu. So if you have an anchor link and it links to an anchor link at that point it'll jump down to the anchor link and it'll close the menu at mobile. Everybody's happy and everything works. Like that was kind of cool. Oh, you're welcome, was that yours? Thank you. Like that's awesome. And like I wanna like really say like we would have not found that. That's like the type of thing you don't think about, you know? So this is an example of us not testing properly. So you know how I was mentioned in the focus trap you should be able to tab around and you shouldn't be able to escape that. Well, you should also be able to shift tab. You shift tab and it kind of tabs backwards. We found a bug where if you shift tab it would escape out of the focus trap like you know, like a puppy out of the backyard running a muck and like that's an issue. It's once again a violation of focus visible and once again the solution isn't like terribly complex if you know JavaScript and stuff but it's an example of someone needs to find this bug and test it and we need to thoroughly test. And if you were to ask me on the day before this discovered like, hey, did you thoroughly test I'd be like heck yeah, I thoroughly tested. No. I don't. This is a new one that, well no, this was an old one. I'm gonna kind of go into this right here. We're kind of nearing the end.  Well overflows, it can cause focus visible issues, all that. So we ended up kind of just adding a single CSS property in their flex wrap. So it wraps, you know, and it looks like that. But like this is ugly, you know. Like it doesn't look good, you know. And this is actually what it currently is right now. I'm gonna tell you about how we're fixing that. But this doesn't look good but like there are certain cases where like a user might have like a medium amount but then they're kind of narrowing the screen and it can wrap, you know. And that's kind of an issue. And so we have a cool solution that it looks all complicated but I'm gonna walk you through it in a second. But it's kind of like lightweight on the browser. So like long story short, what I want it to do is I want it to as soon as we get to the point where it's gonna like wrap, I just wanna transition to the mobile menu. You know, that's cool. Now luckily for us, we already have like the styling built in because all we need to do is just add a CSS class onto the body and it transitions into that is always mobile menu type thing. But what we need to do is we need to know when it does that. So we're using a cool thing called resize observer and this is not yet committed but it'll go in pretty quick. And resize observer like it's kind of like it doesn't like make your computer's fan turn on if that makes sense, you know. Like the last thing I wanna do is like force the browser to do relay outs and all this crap to figure out, you know or attach an event listener on every time you move it around, check stuff. So this is pretty cool and what resize observer will do is it will basically fire an event and it'll tell you when the size of something changes. So we attach that to the navigation wrapper thing and we say if the size changes and the height gets larger, hey at that point we know it's wrapping, right? So we know that and at that point we know to add that CSS class and transition it but we also need to know if we make it big again we need to kind of get out of that. So we remember the screen width at that point too and then we set like a little like media query event listener and we say like if we get larger than that then transition back to that. And this thing like it honestly like works really good and I'm super, super excited about the solution because this is one that I had been like bumming around in my head about this and I was like there's nothing good for this. I don't know how to fix this and it just kind of came to me and I was like I wonder if I do that and then that and then I gotta kind of work in and there's a couple of things. Right now I still need to write tests for it but I have an idea on how to do that. Speaking of testing, it's important to test on real devices. So here I am on my old iPhone that this iPhone is my this is my late iPhone it died in the river. But so it was just like this is like not an accessibility issue but what happens on an iPhone because you know if you're a front end developer you have this like kind of love hate and mostly hate relationship with Safari and when you reload the page it would like have that like really funky like menu slide out thing and you don't want to see that one to page reloads that's just awkward and clunky. I do not want Drupal to be awkward and clunky more than it already is. So this was an easy fix once again we just like changed around and like some translates and positioning and then Safari decided to work nicely and it kind of worked really well. The hardest part was finding the bugs. We did some testing with the National Federation of the Blind and I'm super proud about this and they gave us this like really great quote that I can throw up on slides such as this and it was so validating to have real users who use assistive technology and screen readers who know how it's supposed to work, say positive things and so I'm super, super excited about this and I'm gonna read this just for anyone that might be blind. It says, Olivero is very well done and low vision accessible. I cannot find any issues with contrast, focus scaling the forms are well done and the content is easy to find and navigate. Yay, that was awesome. Thank you. So throughout the whole process we have a demo up that you can check out anytime and I refresh it probably like once every couple of weeks and that's it right there. This is Drupal 9. If you tag on to 10 at the end it'll show you the Drupal 10 version. The Drupal 10 version of Olivero is awesome because we don't support IE. We can properly use things like CSS variables and we have like we're gonna be able to do color changing and that is like this close to getting it and it's gonna automatically build a palette. It's gonna be so, so, so cool and I'm super excited about this. So like let's talk about like what next? Like I already talked about color changing. We're gonna support dark modes at some point and I also wanna have like a cool like design for like maybe a language switcher. There's all types of cool things in there. It's gonna be the default theme for Drupal 10 come Heller High Water. Maybe for 9.4 I'm not quite sure but honestly Drupal 10 is that's what I'm excited about. We're even thinking about like supporting like secondary colors outside of like you know, in addition to the blue or something like that. Something that's not here that I'm excited about is there's something in Drupal 10 coming in called a theme generator and so if y'all know about sub theming typically with sub theming you say like I wanna have a parent theme and it's gonna inherit everything and then I'm gonna change a few things. Oliveira does not officially support sub theming and the reason is is because if we officially support sub theming we couldn't like really start changing around the markup because your CSS might rely on that markup. That markup comes like a de facto API. So Drupal 10 is getting around this by creating a what's called a theme generator and there's a theme already there called starter kit theme and you're gonna run like a command you know it's gonna say like PHP something generate theme something something and at some point it's gonna say like you can even have as you can even base it off of Oliveira or Clara or whatever theme support that but what I'm really excited about is I'm gonna take this menu work and I wanna put that into the starter kit theme because people are gonna use that people are you know so even though they're gonna style it differently like this JavaScript and this stuff that we put in there I want this to be used on like not just people's blogs like Oliveira is gonna be used for I want like large websites like tens of millions of views per day to be have hyper accessible menu systems because menu systems are extremely complicated as you can see this right here and but you would argue that they're like the most important part of a website and navigating you know so yeah so that's what I'm excited about this is me so thank you and I have no clue how much time I have left but I'm happy to take questions. Thank you and it looks like I have 11 minutes for questions. Go ahead. Well I will show you so I have no clue if my internet's gonna work and I'll try tethering really quick too. So let's go into here let's go to Drupalton just because like I said I have no all right so all right so here we are with this is kinda normal Oliveira right here you can see at mobile we have this so I have this little this will disable JavaScript right here so now JavaScript is not loaded and you can kinda see how it works so we're using regular CSS hover states to do this and then if you're tabbing through you it uses focus within you don't have an option to kinda tab around anymore but at least you can get to all the content but you're thinking well how does that work with mobile so mobile we have a special style sheet that loads in a no script tag and what it does is it does a bunch of like really weird things and it kinda just pulls the menu system right up above like that because the disclosure button isn't really gonna work well at mobile so we just have it right there and it'll work. Go ahead Susan. I know like holy cow. That's really a good question like the umami stuff is beautiful and umami umami is like if y'all don't know what umami is it's an install profile and installs default content like a bunch of recipes and stuff and it has, it's like really neat because it has pre-configured views to show these recipes it has things like cards and it has content types built out with like relationships and what that is is that enables someone like Suzanne here who's demoing it to a potential client to say hey look do you see how this works this is how it works you can kinda reverse engineer it pretty easily like honestly like umami like aloe vera is kinda meant to support like kinda everything umami is not, which is good and umami is more of almost a real a real use case but that being said like I don't know if umami has secondary menus but if not like it would be fairly straightforward to take some of this code retrofit it into there screw around with the CSS and make it look really nice I would honestly help with that I wouldn't have a problem with that obviously that being said I even with aloe vera looking like really really great in my humble opinion there's still a very big use case in need for the umami profile go ahead yeah I thought about like even like doing like a contrib module with that but to tell you the truth it just comes down like to time and effort you know like all my efforts going into this and then of course I have like life and stuff like that I don't know if it should be a core module but I like this that's the type of stuff I do want to get into that theme generator um if you if you think it should be a core module that could be an interesting conversation to have and we could have that um but after top of my head giving it a good like 10 seconds of reasoning I think that should still belong into theme layer but I could probably be convinced otherwise go ahead it was a significant part I would say like the menu was probably I would maybe call it like 20 to 30 percent I don't know about 50 though um but but there's obviously a lot that goes into this um the menu was a lot of work honestly and that's why I'm talking about it like I want to I want to shine the spotlight on this I want to I want people to like be able to look at this and be like this this kicks ass like this is awesome and and we're going to use this and we can like we can use this to shine the light on Drupal to say like Drupal is beautiful it's accessible it's wonderful and that's that story needs to be told um outside of this outside of the menu system like there's like I would say coordination with everybody is difficult too yeah go ahead yeah yeah yeah we had to open it up an issue earlier like and we kicked it over to this search API issue queue and then they kicked it back and I was like uh like like my thought process is I would love like I first of all I don't have like all the back-end expertise I can like I could write PHP but then I would want someone to review it you know before I introduce this another security vulnerability but I I would love to collaborate with them and say like hey you know it would be fairly straightforward for a module to say Olivero is the theme you know to know Olivero is a theme and say if this then load this template you know and and maybe load these styles and uh I I personally don't know the maintainer of the search API that's active or whatnot but like I would love to collaborate because I want people to use this and I want I want things to just work I want to be like my iPhone I just want to I want to turn on I don't want to have to worry about moving stuff around you know go ahead yeah so no that this is a this is a really good question because I've been involved in Drupal community for a very long time and I didn't have the nerve for a while so I'll tell that story pretty quick so part of it is like I had like kind of a personal relationship with some of the core committers I knew this I used to work at Lullabot which is a fantastic agency and I used to be a co-host of the podcast we would have these people on talking about things like that and uh so like it was actually last Drupalcon this is like Drupalcon Seattle and this is the benefit of getting in person because you can have these and we were hanging out I think with like Angie Byron and Larry Eskola and we were at a hotel and I was like is anybody working on this because if not this is bullshit and and they were like uh no but you should and I was with a co-worker and I was like yeah maybe you know that'd be cool and so my co-worker Poocher brought this up maybe maybe a month later she was like hey you know we could do this and like working at Lullabot like Lullabot has a lot of resources and a lot of smart people so and and I am very also like I will bug people till I do what I want you know so I so I reached out to our design team because for me design is the hardest part and I said like hey we all be interested in this and and it was like an emphatic yes they wanted to and and so we like all right well what would this look like what would this look like and we established this whole uh say like alright who are our stakeholders let's do a design you know and and at that point you know we did a Drupal Ideas issue queue which which which kind of like put it out to the community this is what it's gonna look like and of course the community was like heck yeah you know we definitely want this and at that point it was just a matter of kind of execution one thing that I am really proud of and I talked about this to other initiatives is the core committer that I've been working with most is Larry Eskola who works for AQUI he lives in Finland he's a wonderful person we started doing this thing cut what I like to call mini sprints where where I would like reach out to him and I would say hey man you got three hours in the next couple weeks and he'd be like yeah I could do Friday the 23rd you know I start at 8 in the morning you know and I'd be like alright we put on our calendars and so what I would do is I would like I would get I would I would bug people and I would and I would get a list of issues into our TPC and we would we would work through it through those on a zoom call and it worked out really well there was one day we got like seven things committed on most days we would maybe commit one but we would always make progress and so we were able to move a lot more rapidly than other than than a lot of other initiatives which in my opinion I still don't think we moved quick enough you know I think there's some issues and I've talked about those but I'm really proud of that idea and if you all like personally in this room say I want to do this and I have I have resources to bring to bear on this you come talk to me I will introduce you I will like you know pull someone's ear and bring them and hey come talk to this person you know this person will make it happen like talk to me about that because I want to enable there are people in this room I guarantee that that can do this but but you just need to getting started as the hardest part go marky it'd be a real pain the ass like like it's not built for it right now so like you could easily grab the JavaScript that would work pretty straightforward the the met the navigation is fairly well-component eyes I did a good job with that so you could do that I actually did this on the Florida Drupal Camp website which is for Drupal Camp by the way is the best Drupal Camp in the whole world but like so it's possible if you have particular questions maybe ask for me but I can't tell you just to do this that and the other because honestly you got to kind of look through grab stuff see what breaks grab something else and then delete some code over here and all that type of stuff how much time do I got yeah it's better anything else before last time let's call all right thank you


Okay, welcome to Vermont House Judiciary Committee, and it is Thursday, March 11th. And I would like to start with the House Committee Corrections and Institutions Committee Bill. And what we are working on is draft 1.1. I don't have that right, Bryn will correct me, but that is what we were looking at yesterday. And this incorporates the language from a small group of folks that were working together and testified on it yesterday.  I would like to see us support this language, you know, for consideration by the Corrections and Institutions Committee. Again, they really are the policy committee. So ultimately they will need to decide whether or not this is the correct policy. However, it does, we do have joint jurisdiction to some extent, and certainly the original law that we're looking at did come through Judiciary Committee. And I think that while this bill doesn't expand our current law as far as it was originally proposed, it does expand it some, and it does also protect the, and address the concerns that we heard about from some of the witnesses where there is an existing consensual relationship at the time of sentencing. And I think it does comport, I think it is consistent with the Downs-Rackland and Martin report. So that's where I'm at. And again, we don't need a vote. We're not going to be reporting it. We don't have possession of the bill, but we happen to have to look at it. So I'll just open it up for discussion. And Tom, I see your hand. Yeah, I'm just wondering if we're going to do a walkthrough on that new language. Um, sure. So I guess also where to find it. Okay. So it should be from yesterday, right, Bryn? Or maybe it's today under under your name. Yeah, I think it was yesterday that we did a walkthrough of 1.1. I think it was yesterday. It is on today's calendar. I mean, it's on today's date as well. So it got repeated. Draft 1.1? Yep. Okay. It's under the date. Yeah, I don't, I don't see under the date under Bryn's name. I think it's today under today. Yeah, today under Bryn's name. Yep. Section eight. Okay, there it is. Yeah, section. Yeah, I don't think that as far as section eight. Thank you. Okay. So, um, so, so Bryn, yeah, if you could, if you can do a walkthrough. That'd be great. Thank you. So sure. Good afternoon committee for the record. Bryn here from legislative council. So this is draft 1.1. And again, this is just language that has sort of been plucked out of this committee bill from corrections and institutions. So it just is this one section, which is 13 BSA 3257. And the changes are that we've amended the title of this section of law. So it applies to any person who's under the supervision of the Department of Corrections. And subsection a makes a few changes. We sort of reformat the way that we phrase this prohibition. So it provides that a correctional employee contractor or another person who's providing services to offenders on behalf of the department. Shall not engage in sexual contact with either a person who the who the employee of the department knows is confined to a correctional facility. So that subdivision one applies to people who are incarcerated.  While on probation parole furlough or another community supervised sentence that the employee of the department knows or reasonably should have known was being supervised by the department. And then you've got that carve out language on lines 18 to 21 that says unless the offender and the employee were engaged in a sexual relationship at the time that the person who's being supervised was sentenced for that offense. So kind of reformatting of the statute and so broadening of the statute and also a creation of this exemption for people who were in a sexual relationship at the time that the offender was sentenced. Right. Thank you. Thank you, Bryn. And that language came from Ashley Messier who was who was with the Women's Justice and Freedom Initiative, Sarah Robinson of the Network and AJ Rubin with disability rights Vermont. And they testified in support of it yesterday. We did hear from Steve Howard, but I think he was looking at the wrong the wrong draft because some of his concerns are are addressed in this language. And I think he he recognized that at the end.  Not sure if it's actually I saw that it was up. I put it down for like 10 seconds and put it back up. OK, go for it. Probably geared toward you Maxine or Bryn also. So this the woman from the Freedom Initiative, she is the one that would have become a criminal basically with the language that we had is that right? You know, I don't want to speak on her behalf because I don't think I was here for all of her testimony. I'm not sure if she was a supervisor or a supervisor at the time. But again, this this is a criminal statute that applies to the department, the person who's employed by the department. And and so that's who it applies to. OK, so excuse me. So I guess I'll ask it another way that and I think I know the answer to it. But she's satisfied with this new language. Yes, yes, yes. And she she was part of the group that that proposed proposed the language. She did say that it didn't go as far as she would like. But she does does support it. She did testify to that that she does support it. Um, you know, in terms of wanting to to compromise, ultimately, this is a matter of prosecutorial discretion and any of these cases are. But she yes, so she does. Sure. Yeah. Yeah. And I got to believe if they, you know, did a little investigating on her relationship that they probably wouldn't prosecute. But but that was my main question that I had on this this new language. And I can certainly support it. Great. Thank you. Selena. Oh, I just had raised my hand to help answer Tom's question. So I don't know that it's really needed now. But just to clarify that in her example, her partner was under community supervision. And she, although not currently a contractor with the OC, was doing a ton of work with them and could like easily see herself becoming, you know, in in a contractual relationship with them. So that was the example that I believe that was the example she shared. Great. Thank you. All right. Thank you, Selena. Ken. All right. Madam chair, you just use, I think judicial terms. I don't know what they mean. Oh, I think I said prosecutorial discretion. Thank you. So what that means is, is that it's it's up to the prosecutor, whether or not to, to charge and to, to bring a case. And I just, I was just pointing that that out of explanatory. I should have figured that out. Thank you. It's okay. It was in response to Tom's question about whether or not the witness would have been a criminal or would have been charged. So I told you I wasn't a lawyer. Okay. Any, any other questions, you know, questions for Brent about this? Not seeing any, any hands. So thoughts on terms of whether or not to recommend this language. And again, they, this is part of a bigger bill. I'm not sure where they are with that bill, but they are looking for recommendation. I do know that this is important to Senator Sears and that they also would, would like to see something like this pass, whether it's part of a corrections bill or a standalone bill. So we could do show our hands, yes, recommend it. Okay. Great. Any opposed to recommending it? Okay. Great. All right. Wonderful. Thank you. Okay. So then, yeah, so let's do hate motivated crimes if we could move to that. And yeah, I would love Selena and Will. I don't want to hold you here for much longer, if possible, or if we're still going in, and you want to go, imagine you need to break before retention. So, okay. So in terms of hate motivated crimes. Thank you coach for asking about armed forces, whether or not that includes the National Guard and it actually, I guess it wasn't clear, but it was better to put it in there, right? Is this was so we do have a another draft 4.1, which should be posted. And I think that's the only change that correct rim armed forces or the National Guard. Yeah. Yes. 4.1. The only change that you see to that draft is the addition of or National Guard or the National Guard. Because it since it is kind of a complicated relationship there, that it makes sense to just ensure that it's included, if you want to include it. Great. Thank you. So I think I would like committee discussion at this point about it where folks are at with the with the bill. I think we've had quite a bit of testimony. I do really appreciate the reporting section of it. Thanks, Selena and others who worked on this. Certainly a step in the right direction of our data collection in this state, which hopefully we will get back to start looking at some other bills. Thoughts? Ready? Don't make much opposition to that. Okay. All right. So Okay. I make a motion that we approve this committee bill and send it to the floor. Second. Okay. Wonderful. We have a first. Second. Any discussion? I lost you. I don't even know what we're doing. Okay. So we are looking at a committee bill. It's drafting request 21-0932 draft 4.1. Today's date. And it's an act relating to hate motivated crimes and misconduct. And so the first section removes the word maliciously from current law and adds National Guard to to make sure to clarify that National Guard are in fact included and has enhanced penalty. I think that's just just for the title of that section. And then it has an annual report required. And that is the piece that we actually had talked about it. Originally it was in H128 that passed today and and is here, which so does that help, Ken? Trying to find it. I'm trying to get back to it. Okay. Let's see where it should be on our committee page. Let me know when you have it, Ken. Thunder Bryn. Yes. Which one? 3.1? 4.1. Got updated, didn't it? Yes. Got it. Thank you. Okay. I'm just thank you. I'm just reaching out to the clerk. Melissa. Okay. Great. So discussion. We have a motion to second discussion. 18. Bob looks like Bob might have a question. Just a quick question. Originally I thought I saw like a second draft or whatever it said for the National Guard or the Air National Guard. Does that include the Air National Guard also here? Bryn, I guess I would ask. Yeah. It's inclusive of the other National Guards. It was the advice of our Legislative Council, Damien Leonard, that we didn't need to include the specific titles for all the other reserve forces that if we said, if we referred to the National Guard, that would be sufficient. That's really his area of expertise. So I'm relying on his advice. Don't want to leave anybody out. Anybody else? Okay. Great. Then the clerk shall commence to call the roll. Can everybody hear me? See me? Anything? Both. Yeah. You're good. Auburn. Yes. Donnelly. Ghostland. Yep. LaLon. Yes. Lefler. Norris. Yes. Not. Yes. Barbara. Yes. Christy. Yes. Burdick. Yes. Grad. Yes. We'll hold for LaLon. I just texted her because I'd heard from her, but she may be driving again. We can wait a little bit and see if she'd have to call and yes, it's interesting. Well, I think she said she was going to be calling in. So once we got on the road, I saw we should probably give her. Okay. All right. Let's do that. Okay. Okay. So Bryn, you need to go. I see that. Okay. I'm sorry. All right. Yeah. Thanks so much. Okay. Also, anybody dying to report this or one would like to report it? And I guess we should turn it in. So it's a committee bill, right? So it's going to be, has to be unnoticed for two days. So. I didn't realize that was the case. Interesting. Yeah. Me neither. Every day. I know. Pretty sure a committee bill. Yeah. I think that's right. Yeah. Any takers? Coach, are you? I don't know if Coach is on the phone or if he's... No, no, no. I was trying to get my button here, you know. Are we pushing your buttons? Just the space bar, you know. Yeah, yeah. So do you want to report this? I wasn't sure if you were raising your hand to report or... Yes, that's that. That was the... You were asking for volunteers, so I... Wonderful. Okay. Great. Thank you. Okay. So that leaves the forfeiture bill, right? And then 183. Am I missing anything? We could take some down from the wall just for fun. Oh yeah. And 145 is... Oh yeah. I'm sorry. Thank you. That's on tomorrow. Okay. So Barbara was... Brynn was going to do a walkthrough, right? So maybe... I'm not sure if she was going to do a walkthrough, because I'm not sure of her availability. Okay. Brian came in with his amendment just as I was starting to meet with Brynn, and so Felicia met with Brynn. And Brynn redid, you got a copy of it, right? So Felicia had had a chance to go through the draft we got this morning and make some changes, which she texted me some notes from. So I'm happy to read off of the notes, but I don't think people saw the other draft. So what's... I don't know what your preference is. I'm happy to... Yeah. I think I'd like to await when she's available, because since she's working together and she took the lead, she did say that she... In terms of the hate crimes, she has a yes and she will jump back on... She said when she's through Sheldon and Regain service. So we will hear from her, at least on the bill, but why don't we wait? That's great. Yeah, I think we have Brynn. So we will add that to the list tomorrow. And any... While we're waiting for any quick questions or anything about either 183 or 145. Gavaps did here to take testimony on the council, and so they're going to get back to us. I think they're leaning towards the Attorney General's office as the appointing authority for the prosecutor on the council. Both Barbara and I have been in touch with the appropriations regarding the appropriation. I've heard some different sort of theories. I don't know what I'm tired, but anyway, in terms of the council and the needed appropriation, I've heard that Legislative Council can't staff it because it's not a legislative committee, which is why the network is in there. But I don't know, that's... Appropriations will figure that one out. But we're waiting for that. And then I think Michelle will get us a new draft with just some of the tweaks today. Martin, Michelle and I were trying to remember if you had language or did we... In terms of 183 or did we... Or disability rights, okay, going with the federal language and the language that... Yeah, it sounded to me like they... Yeah, I just was pushing as far as if we were going to go with that to make it consistent. But then I think they pushed back once they heard from Rory. It was my understanding. So no, I have no... I'm fine with where we are with it. Okay. All right. Great. So then Michelle will get us a new draft, which that should be pretty easy. So okay, there's... There you are, Felicia. Wonderful. Thank you. So Ken will ask you your vote on the committee bill to hate motivated crimes. I distracted here. Laughler? Yes. I can't go back to driving. Okay. Great. Okay. So, Max, I don't know if you... On 183 or if we're going to have more discussion tomorrow, because I did want to just... If it makes sense now to address... It's something that... The case that Rebecca Turner had mentioned, suggesting that it was a case supporting the concern regarding the should have known language. And I don't think she sent that to... I don't think she sent that to everybody. But I looked at the case. I mean, is this something we can discuss at this point, or is that going to happen tomorrow? Or... Go ahead, people. Go ahead. And you know, Selena... I don't know if Will is gone, but if you need to drop off, go ahead, Selena and Will. But go ahead, Martin. Yeah, it's just that... I think Attorney Turner was talking about the fact that we have this should have known language. And this is language that I've been questioning to make sure I understood it as well. I had some of the same concerns that when she raised it, but really in looking at it further and information that Rory has provided. And then actually looking at the case that Attorney Turner suggested supported the fact that this was strict liability and we should not proceed with it. I looked at that case and I'll just read this one quote that I kind of highlighted. And it had to do with a Washington law that had to do with drug possession. And whether somebody had knowledge or not of possessing the drugs, they would be held liable criminally. And the court rejected that and said that it was strict liability. But then I went ahead and said it's the rare Washington state statute that criminalizes innocent passive conduct or non-conduct, I should say. Most Washington laws target actual conduct and most Washington laws target people who know or should know, that being key language there, that they're engaging in that actual targeted conduct. So by the analysis of that case that was pointed to, what we have in H183 would be fine. Because it is a should know. It's not criminalizing innocent passive non-conduct. It is obviously criminalizing conduct based on the fact that somebody should really know of the non-consent of the individual. So that just further, reading that case that was supposedly going the other way further satisfied me that there's not a problem with H183. So I'm going to be in support of it. Great. Thank you. And I do think that Rory did a good job when he talked about that there's actually two steps in the analysis in terms of the mens rea when the defender general's office was saying that we've eliminated the mens rea. And the mens rea is the first step, whether or not there is the act. And then he spoke about the act. And then once there is an act, then the question is whether or not there was consent. And that's where this bill comes in. This bill is talking about that consent piece. So I thought that was helpful. So, okay. Great. Well, thank you, Martin. That's helpful. So, okay. All right. So I, so, so coach, with a committee bill, and I actually guess everybody, this is, and I was reminded by this. So with a committee bill, as chair, I need to send it to somebody totally different than the clerk's office, and get bring involved to certify that that's, in fact, the correct version, it's a little bit more complicated, but I'll copy you, coach, on it. And so why don't we adjourn? Because that way I can do this and get to the clerk in the editor's office. Now, and back to Alice Emmons, and then hopefully everybody can make it at 845. Oh, wait, so we're, I'm sorry, we're meeting at 845 tomorrow. Yes. Yeah. Yeah. Michelle, yeah, if you can, Michelle is, she's not available. Otherwise, and I'm not sure how long we'll be on the floor. So at least we can get a, that's why when you said in the morning, I kept thinking, well, you're thinking we're getting off in the morning. So, okay, sorry, that all makes more sense. Yeah, pretty much on the floor, I think we, the floor, the only thing might be in fact, each 87. And I will find out later if they're going to want me to postpone that, I'll be ready to report it. And if I do, that'll be about 20 minutes, I would say. Okay. And 133. Yeah, that's true. 133. But yeah, maybe it's always possible we could get an amendment, but it seems unlikely to me. And given the strong vote today, hopefully that'll be quick tomorrow. Right. Right. So, so we may have time to get these things done, hopefully. Right. So, okay. And then in terms of scheduling for next week, I, I really, I'm not really sure what, what we'll be doing. And so we can talk about it tomorrow. Coach and Tom and and Evan, but I think we need to be pretty flexible. Otherwise, we're going to just start peeling things off the wall. That's the, that's the fun time when you just grab all the bills on the wall and you throw them in the air and see how they go down the steps when we're in the building. All right. I mean, so many suggestions. I have so many. Okay, so anyway, okay, we'll