Tabs Component Overview

[00:00 - 00:14] In this module, you'll learn how to build a tabs component in alignment with the ARIA Authoring Practices Guide Tabs pattern. That is a mouthful, so we're going to simplify this and refer to it as the tab specifications or tab specs or some variation of that.

[00:15 - 00:27] And we're going to go step by step learning how to parse through the specs and implement the component while adhering to the guidelines. We're also going to be using React for this component, similar to the Text Input component.

[00:28 - 00:38] So again, if you have familiarity with another front end framework, you should be fine. But if you want to learn more, you can always reference the official documentation.

[00:39 - 00:52] And as far as the concepts we're going to learn, we're going to cover things like ARIA Attributes, Focus Management, Keyboard Interactions, things of that nature. And the starter code for the project can be found in the code sandbox environment that's provided in the lesson manuscript.

[00:53 - 01:04] And so feel free to fork the sandbox and follow along with the corresponding lessons if you want. All righty, so I want to pause and take a minute to look through the Tabs pattern documentation because we'll be referencing this a lot.

[01:05 - 01:14] And so I just want to give a quick overview of how the document is organized. As you can see at the top of the page here, it has an About This Pattern section.

[01:15 - 01:23] And this is where you'll get like a brief overview of what the Tabs pattern is about. It also includes like terms used to describe the design pattern.

[01:24 - 01:37] So like Tabs or Tabs Interface, the Tab List, Tab, Tab Panel, all those terms are referenced throughout the documentation. And that section gives you a quick, just like one liner about what each thing represents.

[01:38 - 01:49] And then the next section is kind of the keyboard interactions. And this is where it outlines how you need to implement certain keyboard functionalities for this component pattern.

[01:50 - 02:00] So as you see, we have Tab here, we have Left Arrow, Right Arrow, it's giving us description of how we need to implement that. And we'll see how to do that in the third lesson in this module.

[02:01 - 02:18] And then last but not least, we have the RER role states and properties. And this kind of gives you, yeah, the RE attributes and things that you need to wire up to properly set things up so that assistive technologies can properly identify the component pattern that we're building.

[02:19 - 02:32] So just wanted to take some time to go through this and we'll dive deeper as we implement and go. So now I just want to go through the files that we'll be using to implement the component.

[02:33 - 02:39] And so the first we'll take a look at is app.jsx. And this file just serves as the entry point for the project.

[02:40 - 02:46] And this will be the location where we render the Tabs component and pass the props at the component except. So you won't really do anything in this file.

[02:47 - 02:53] It's set everything up for you, but good to know what it does. So next is tabs.jsx.

[02:54 - 03:02] And this file provides a boilerplate for what a potential implementation of a T abs component might look like. And we're going to be working solely in this file really.

[03:03 - 03:10] And all the props that the component accepts, which are outlined in the tabs. prop types definition at the top, will need to be wired up accordingly.

[03:11 - 03:17] So like I said, we'll be spending majority of our time here. The last file we'll take a look at is tabs.css.

[03:18 - 03:31] And again, to help you concentrate exclusively on the essential aspects of implementing the Tabs component, the CSS has already been supplied. However, you know, this file can be a valuable resource for exploring additional styling techniques with RE attributes.

[03:32 - 03:51] So even though we won't add anything to this file, feel free to check it out to see how I'm applying different styles using the different selectors. And again, like in a real world application, you wouldn't really target CSS selectors exactly like how we're doing here.

[03:52 - 03:56] It's just for simplicity's sake. But yeah, I just wanted to make that known.

[03:57 - 04:02] So yeah, and as far as dependencies go, there's actually only one in this one. And that's the prop types package which is used for runtime type checking.

[04:03 - 04:05] So we've got a good lay of the land. Let's dive in.