 Hey, everybody. All right. So just so you know, if you want to do karaoke later, some Drupal stuff, you might be able to talk me into it. 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 honestly, clicking, sometimes I get lazy, and I don't want to click, you know? 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 you know your content editors are going to intentionally just try to screw up your design. 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. I want if your JavaScript, if you're browsing through some anonymous proxies, because you're in some country that doesn't allow to send or something, I want you to be able to use this menu if you don't have JavaScript enabled. 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. And my goal is just to do a proof of concept, validate this, get it in front of people, and have them poke holes in it before I even have to screw around with Drupal's theme layer. 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. You hit Enter when you're there, and then you can tab down. 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. SVGs and background images are a little problematic depending on the browser. 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. And the reason I bring this up is because I want you all to be aware of this. 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. So if you ever see raw or verabatim, like a little warning flag should go off. 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 a big deal, you know, and I was so happy. 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? You just Google crap, right? 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? So like an example of this is, you all like ever go to like, you're about to hit, you're on maybe an e-commerce forum, and you're about to hit that submit button, and you press down in your mouse, and then you're like, oh crap, I forgot this one thing. 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. So like what if you wanna be in a desktop but there's like someone once again content editors kind of try to screw you over and then they input a whole bunch of stuff. 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