|
I'm building a Web Component UI library for people who love HTML. Framework agnostic. Easily customizable. Use with pre-built styles or go "naked" and roll-your-own. Today, I wanted to talk about what that looks like, and why I think it's a better approach than other options. Let's dig in! Toggle TabsTo help make this click, we're going to look at a common-but-complex UI component: toggle tabs. With this pattern, you have a nav menu that toggles the visibility of some content. Only one piece of content is visible at a time. Here's a demo from the W3C Web Accessibility Initiative. Let's look at two different but common approaches libraries use to handle this kind of pattern, and talk about why they're both… lacking. Approach 1: Hard-coding all-the-thingsIn a library like Bootstrap, you need to hard-code all of the roles and ARIA directly into your HTML, like this… That's kind of a lot! If you have more than one of these, you'll probably want to rely on some sort of templating system to generate a lot of this for you (server side, JavaScript based, whatever). And because of how the CSS is structured, only the first tab is visible until JavaScript is downloaded and activated. You've got these buttons that are visible but do nothing. If the JS fails for some reason… the user is stuck. Approach 2: React-like Web ComponentsThe Web Awesome project uses Web Components for pretty much everything. Their tabs look like this… As you can see, this is a lot easier to read and write. And until the Web Component JS loads, all of the content areas are visible. But the tab controls are these blocks of text that do nothing. They're not interactive. They're not links or a list or labels. They're just text snippets ( It's an improvement over the Bootstrap code, but still lacking, in my opinion. A better approach: HTML Web ComponentsImagine if your toggle tabs started off their life as functional HTML—a list of anchor links, and corresponding content—wrapped in a Web Component. You have HTML that's much easier to write than the Bootstrap version. Once the Web Component instantiates, it adds all of the required ARIA attributes, roles, and so on, just like the Web Awesome version. But unlike Web Awesome, the HTML is perfectly functional even if your JS never loads. HTML is awesomeA lot of libraries approach Web Components with a React mindset, and treat them more like an implementation detail than a feature. Instead of leaning on HTML to provide a baseline experience, styling it with CSS, and then enhancing it with JS when supported, they use JavaScript for everything. That works, but it misses out on what makes Web Components so awesome. I want to build a UI library for people who love HTML. Like this? A Go Make Things membership is the best way to support my work and help me create more free content. Cheers, Want to share this with others or read it later? View it in a browser. |
0 Komentar untuk "[Go Make Things] A Web Component UI library for people who love HTML"