Angular

Accessible Tabs in Angular

Published May 6, 2020

Updated Feb 14, 2023

4 min read

Make it Accessible - 4 Part Series

This article was written over 18 months ago and may contain information that is out of date. Some content may be relevant but please refer to the relevant official documentation or available resources for the latest information.

Accessible Tabs in Angular

I have written this article to guide you through the process of building a Tab interface that complies with the WAI-ARIA 1.1 Specification. I know that sounds scary, but it's much more approachable than it sounds.

The Problem

When we are working with a user interface, we often have too much content for the space available.

The Solution

We could solve the problem by dividing the big chunk of info into smaller pieces. Then, we can show a single chunk at a time, and allow users to jump between the different chunks available. Then, voila! Suddenly, we need to build a tab interface.

The Implementation

If you've been reading the Make it Accessible series, you probably know the first step. If you don't, just go to this page WAI-ARIA Practices, which is a an amazing resource for learning how to make your apps more accessible. That site is going to be your best friend from now on.

As you can see, it lists a bunch of common widgets for user interfaces. The one we're looking for is Tabs, which is under the number 3.22, or accessed directly at Tabs Section of the WAI-ARIA Practices.

The first thing to notice is that they describe the terms used:

Tabs or Tabbed Interface: A set of tab elements and their associated tab panels.
Tab List: A set of tab elements contained in a tablist element.
Tab: An element in the tab list that serves as a label for one of the tab panels and can be activated to display that panel.
Tabpanel: The element that contains the content associated with a tab.

There's also a list of Keyboard Interactions, and a few examples. Sadly, all the examples in the WAI-ARIA specification are in plain HTML + Javascript. That's why I decided to start writing an article for each of the available widgets built with Angular.

Enough talk

Let's start by generating a new application. You can do that by using the Angular CLI. For this project, I'm using the version 9.0.5. Just open your terminal of choice, and type ng new ng-tabs, and the Angular CLI will take care of creating all the files you'll need for your application.

Next, we are going to generate the first module named SharedModule. For this, we'll go back to the Angular CLI. While in your terminal of choice, go to the project's folder, and type ng g module shared. It will generate the module for you. You'll then need to import it in your src/app/app.module.ts file like this:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { SharedModule } from './shared/shared.module';

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, AppRoutingModule, SharedModule],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule {}

Thanks to the SharedModule, now we can create and export any component, and use it across the application. Let's create a component for each of the core concepts behind tabs- one for a tab (I'll call this tab trigger from now on), and one for a tabpanel.

Tab Trigger

We'll need a new component to hold each tab trigger's logic. This way, we can abstract some of the implementation details, and make it easier to use later on. To creat this component, we're going to use the Angular CLI again. Using your terminal, go to the project folder, and type ng g component shared/components/tab-trigger --style=scss --export --inlineTemplate. With that command, a new component will be generated, and will be automatically exported in the SharedModule.

Now, let's customize the new component. Open the src/app/shared/components/tab-trigger/tab-trigger.component.ts:

import { Component, Input } from '@angular/core';

@Component({
  selector: 'app-tab-trigger',
  template: `
    <button
      [id]="triggerId"
      role="tab"
      [attr.aria-controls]="panelId"
      [attr.aria-selected]="isActive"
      tabindex="-1"
    >
      <ng-content></ng-content>
    </button>
  `,
  styleUrls: ['./tab-trigger.component.scss']
})
export class TabTriggerComponent {
  @Input() isActive: boolean;
  @Input() triggerId: string;
  @Input() panelId: string;
}

And now, let's integrate the styles. Open the src/app/shared/components/tab-trigger/tab-trigger.component.scss:

button {
  position: relative;
  margin: 0;
  padding: 0.3em 0.5em 0.4em;
  border: 1px solid hsl(219, 1%, 72%);
  border-radius: 0.2em 0.2em 0 0;
  box-shadow: 0 0 0.2em hsl(219, 1%, 72%);
  overflow: visible;
  font-family: inherit;
  font-size: inherit;
  background: hsl(220, 20%, 94%);

  &:hover::before,
  &:focus::before,
  &[aria-selected='true']::before {
    position: absolute;
    bottom: 100%;
    right: -1px;
    left: -1px;
    border-radius: 0.2em 0.2em 0 0;
    border-top: 3px solid hsl(20, 96%, 48%);
    content: '';
  }

  &[aria-selected='true'] {
    border-radius: 0;
    background: hsl(220, 43%, 99%);
    outline: 0;
  }

  &[aria-selected='true']:not(:focus):not(:hover)::before {
    border-top: 5px solid hsl(218, 96%, 48%);
  }

  &[aria-selected='true']::after {
    position: absolute;
    z-index: 3;
    bottom: -1px;
    right: 0;
    left: 0;
    height: 0.3em;
    background: hsl(220, 43%, 99%);
    box-shadow: none;
    content: '';
  }

  &:hover,
  &:focus,
  &:active {
    outline: 0;
    border-radius: 0;
    color: inherit;
  }

  &:hover::before,
  &:focus::before {
    border-color: hsl(20, 96%, 48%);
  }
}

Tab Panel

We'll need a new component to hold each tab's panel, just like with the triggers. This way, we can abstract some of the implementation details, and make it easier to use later on. To create this component we're, going to use the Angular CLI again. Using your terminal, go to the project folder, and type ng g component shared/components/tab-panel --style=scss --export --inlineTemplate. With that command, a new component will be generated, and automatically exported in the SharedModule.

Now, let's customize the new component, open the src/app/shared/components/tab-panel/tab-panel.component.ts:

import { Component, Input } from '@angular/core';

@Component({
  selector: 'app-tab-panel',
  template: `
    <div
      [id]="panelId"
      role="tabpanel"
      [attr.aria-labelledby]="triggerId"
      tabindex="0"
    >
      <ng-content></ng-content>
    </div>
  `,
  styleUrls: ['./tab-panel.component.scss']
})
export class TabPanelComponent {
  @Input() panelId: string;
  @Input() triggerId: string;
}

And now, let's integrate the styles. Open the src/app/shared/components/tab-panel/tab-panel.component.scss:

[role='tabpanel'] {
  position: relative;
  z-index: 2;
  padding: 0.5em 0.5em 0.7em;
  border: 1px solid hsl(219, 1%, 72%);
  border-radius: 0 0.2em 0.2em 0.2em;
  box-shadow: 0 0 0.2em hsl(219, 1%, 72%);
  background: hsl(220, 43%, 99%);
}

[role='tabpanel']:focus {
  border-color: hsl(20, 96%, 48%);
  box-shadow: 0 0 0.2em hsl(20, 96%, 48%);
  outline: 0;
}

[role='tabpanel']:focus::after {
  position: absolute;
  bottom: 0;
  right: -1px;
  left: -1px;
  border-bottom: 3px solid hsl(20, 96%, 48%);
  border-radius: 0 0 0.2em 0.2em;
  content: '';
}

[role='tabpanel'] p {
  margin: 0;
}

[role='tabpanel'] * + p {
  margin-top: 1em;
}

Finish it

All we have left is to use our new components, since this is an example I will use it directly in the AppComponent, go to src/app/app.component.ts:

import {
  Component,
  ViewChildren,
  QueryList,
  ElementRef,
  AfterViewInit
} from '@angular/core';
import { TabTriggerComponent } from './shared/components/tab-trigger/tab-trigger.component';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent implements AfterViewInit {
  @ViewChildren(TabTriggerComponent, { read: ElementRef })
  tabElements: QueryList<ElementRef>;
  tabs: ElementRef[];
  activated = 0;
  focused = 0;

  ngAfterViewInit() {
    this.tabs = this.tabElements.toArray();
    this.tabElements.first.nativeElement.firstChild.tabIndex = '0';
  }

  activatePanel(index: number) {
    this.tabs.forEach(tab => (tab.nativeElement.firstChild.tabIndex = -1));
    this.tabs[index].nativeElement.firstChild.tabIndex = index.toString();
    this.focused = index;
    this.activated = index;
  }

  focusPanel(index: number) {
    this.focused = index;
    this.tabs[this.focused].nativeElement.firstChild.focus();
  }

  handleKeyUp(event: KeyboardEvent) {
    switch (event.key) {
      case 'ArrowLeft':
        this.focusPanel(this.focused ? this.focused - 1 : this.tabs.length - 1);
        break;
      case 'ArrowRight':
        this.focusPanel((this.focused + 1) % this.tabs.length);
        break;
    }
  }

  handleKeyDown(event: KeyboardEvent) {
    switch (event.key) {
      case 'Home':
        event.preventDefault();
        this.focusPanel(0);
        break;
      case 'End':
        event.preventDefault();
        this.focusPanel(this.tabElements.length - 1);
        break;
    }
  }
}

Let walk through this component:

We're using @ViewChildren to get all the TabTriggerComponent instances.
Using the AfterViewInit life cycle, I get a clone of the component instances, and set tabindex=0 to the first one.
A method activatePanel, used when any of the triggers is clicked.
A method focusPanel, triggering the focus in the Button Element.
A method handleKeyUp and handleKeyDown. We separate them because Home and End keys have a default behavior that needs to be prevented.

Now, open the template in src/app/app.component.html:

<main>
  <div class="tabs">
    <div
      role="tablist"
      aria-label="options"
      (keyup)="handleKeyUp($event)"
      (keydown)="handleKeyDown($event)"
    >
      <app-tab-trigger
        triggerId="trigger-a"
        panelId="panel-a"
        [isActive]="activated === 0"
        (click)="activatePanel(0)"
      >
        Panel A
      </app-tab-trigger>
      <app-tab-trigger
        triggerId="trigger-b"
        panelId="panel-b"
        [isActive]="activated === 1"
        (click)="activatePanel(1)"
      >
        Panel B
      </app-tab-trigger>
      <app-tab-trigger
        triggerId="trigger-c"
        panelId="panel-c"
        [isActive]="activated === 2"
        (click)="activatePanel(2)"
      >
        Panel C
      </app-tab-trigger>
    </div>

    <app-tab-panel
      *ngIf="activated === 0"
      panelId="panel-a"
      triggerId="trigger-a"
    >
      <p>Panel A</p>
    </app-tab-panel>
    <app-tab-panel
      *ngIf="activated === 1"
      panelId="panel-b"
      triggerId="trigger-b"
    >
      <p>Panel B</p>
    </app-tab-panel>
    <app-tab-panel
      *ngIf="activated === 2"
      panelId="panel-c"
      triggerId="trigger-c"
    >
      <p>Panel C</p>
    </app-tab-panel>
  </div>
</main>

And now, the final styles to the AppComponent! Open src/app/app.component.scss:

.tabs {
  width: 20em;
}

[role='tablist'] {
  margin: 0 0 -0.1em;
  overflow: visible;
}

Conclusion

After a few quick steps, we were able to replicate the WAI-ARIA spec for Tabs, using a component oriented approach with Angular's help. I heavily based my implementation on the one found in the spec. My goal was primarily to show how easy it is to use Angular concepts to build such a feature. If you encounter any issues while trying to do this, drop a comment below.

This Dot is a consultancy dedicated to guiding companies through their modernization and digital transformation journeys. Specializing in replatforming, modernizing, and launching new initiatives, we stand out by taking true ownership of your engineering projects.

We love helping teams with projects that have missed their deadlines or helping keep your strategic digital initiatives on course. Check out our case studies and our clients that trust us with their engineering.

The HTML Dialog Element: Enhancing Accessibility and Ease of Use

The HTML Dialog Element: Enhancing Accessibility and Ease of Use Dialogs are a common component added to applications, whether on the web or in native applications. Traditionally there has not been a standard way of implementing these on the web, resulting in many ad-hoc implementations that don’t act consistently across different web applications. Often, commonly expected features are missing from dialogs due to the complexity of implementing them. However, web browsers now offer a standard dialog element. Why use the dialog element? The native dialog element streamlines the implementation of dialogs, modals, and other kinds of non-modal dialogs. It does this by implementing many of the features needed by dialogs for you that are already baked into the browser. This is helpful as it reduces the burden on the developer when making their applications accessible by ensuring that user expectations concerning interaction are met, and it can also potentially simplify the implementation of dialogs in general. Basic usage Adding a dialog using the new tag can be achieved with just a few lines of code. ` However, adding the dialog alone won’t do anything to the page. It will show up only once you call the .showModal() method against it. ` Then if you want to close it you can call the .close() method on the dialog, or press the escape key to close it, just like most other modals work. Also, note how a backdrop appears that darkens the rest of the page and prevents you from interacting with it. Neat! Accessibility and focus management Correctly handling focus is important when making your web applications accessible to all users. Typically you have to move the current focus to the active dialog when showing them, but with the dialog element that’s done for you. By default, the focus will be set on the first focusable element in the dialog. You can optionally change which element receives focus first by setting the autofocus attribute on the element you want the focus to start on, as seen in the previous example where that attribute was added to the close element. Using the .showModal() method to open the dialog also implicitly adds the dialog ARIA role to the dialog element. This helps screen readers understand that a modal has appeared and the screen so it can act accordingly. Adding forms to dialogs Forms can also be added to dialogs, and there’s even a special method value for them. If you add a element with the method set to dialog then the form will have some different behaviors that differ from the standard get and post form methods. First off, no external HTTP request will be made with this new method. What will happen instead is that when the form gets submitted, the returnValue property on the form element will be set to the value of the submit button in the form. So given this example form: ` The form element with the example-form id will have its returnValue set to Submit. In addition to that, the dialog will close immediately after the submit event is done being handled, though not before automatic form validation is done. If this fails then the invalid event will be emitted. You may have already noticed one caveat to all of this. You might not want the form to close automatically when the submit handler is done running. If you perform an asynchronous request with an API or server you may want to wait for a response and show any errors that occur before dismissing the dialog. In this case, you can call event.preventDefault() in the submit event listener like so: ` Once your desired response comes back from the server, you can close it manually by using the .close() method on the dialog. Enhancing the backdrop The backdrop behind the dialog is a mostly translucent gray background by default. However, that backdrop is fully customizable using the ::backdrop pseudo-element. With it, you can set a background-color to any value you want, including gradients, images, etc. You may also want to make clicking the backdrop dismiss the modal, as this is a commonly implemented feature of them. By default, the <dialog> element doesn’t do this for us. There are a couple of changes that we can make to the dialog to get this working. First, an event listener is needed so that we know when the user clicks away from the dialog. ` Alone this event listener looks strange. It appears to dismiss the dialog whenever the dialog is clicked, not the backdrop. That’s the opposite of what we want to do. Unfortunately, you cannot listen for a click event on the backdrop as it is considered to be part of the dialog itself. Adding this event listener by itself will effectively make clicking anywhere on the page dismiss the dialog. To correct for this we need to wrap the contents of the dialog content with another element that will effectively mask the dialog and receive the click instead. A simple element can do! ` Even this isn’t perfect though as the contents of the div may have elements with margins in them that will push the div down, resulting in clicks close to the edges of the dialog to dismiss it. This can be resolved by adding a couple of styles the the wrapping div that will make the margin stay contained within the wrapper element. The dialog element itself also has some default padding that will exacerbate this issue. ` The wrapping div can be made into an inline-block element to contain the margin, and by moving the padding from the parent dialog to the wrapper, clicks made in the padded portions of the dialog will now interact with the wrapper element instead ensuring it won’t be dismissed. Conclusion Using the dialog element offers significant advantages for creating dialogs and modals by simplifying implementation with reasonable default behavior, enhancing accessibility for users that need assistive technologies such as screen readers by using automatic ARIA role assignment, tailored support for form elements, and flexible styling options....

Oct 25, 2024

4 mins

HTMLJavaScript

Angular Signals for Simpler State Management and DOM Performance

In this episode of the Modern Web Podcast, host Rob Ocel is joined by Adam Rackis, Danny Thompson, and guest Braydon Coyer, Senior Front-End Developer at LogicGate to talk about using Angular Signals for improved state management and DOM performance. Braydon explains how Signals simplify Angular development and offer better readability and efficiency compared to traditional methods like RxJS. The conversation also touches on hiring in the AI era, discussing challenges around take-home tests and live coding, and how AI tools like ChatGPT are changing the interview process. Chapters 00:00 - Introduction 00:57 - The Angular Renaissance 02:24 - Signals in Angular 03:27 - Transitioning to Signals 04:19 - Signals in Utility Development 05:09 - RxJS and Signals 07:52 - Signals vs Other State Management Solutions 09:34 - Testing Signals 10:29 - Control Flow and Standalone Components in Angular 12:02 - Angular's Evolution and Accessibility 13:28 - Angular’s Framework Governance 17:10 - Hiring in the Age of AI 19:15 - Pair Programming and Real-Time Problem Solving 22:24 - The Role of AI in Interviews 27:58 - Wrapping Up Follow Braydon Coyer Twitter: https://x.com/BraydonCoyer Linkedin: https://www.linkedin.com/in/braydon-coyer/ Github: https://github.com/braydoncoyer...

Oct 30, 2024

1 min

Angular

Lessons from Building Netlify with Matt Biilmann, CEO at Netlify

Matt Biilmann, CEO and co-founder of Netlify, for an in-depth discussion about the company's incredible growth journey—from a bootstrapped two-person startup to a global platform serving over 5 million developers and powering sites for major companies like Unilever and Asana. Matt reflects on the key lessons he’s learned while scaling Netlify, including raising $212 million in venture capital and growing the team to 200 employees. He shares valuable insights on balancing day-to-day operations with long-term vision, navigating the challenges of hiring experienced leaders, and fostering a culture of clarity and focus. Matt also highlights the importance of reducing friction for web development teams and ensuring fast time-to-market for web projects. Chapters 00:00 - Introduction 01:00 - The Origins of Netlify 02:30 - Netlify’s Growth Journey 04:00 - Impact of Netlify on the Web Ecosystem 05:30 - Building the Right Team 07:45 - From Developer to CEO: Evolving as a Leader 10:00 - The Balance Between Vision and Operations 12:00 - Delegating vs. Staying Hands-On 15:30 - Hiring Experienced Leaders 18:00 - Building Diverse Teams 20:00 - Intuition in Leadership 22:30 - Simplifying Goals and Objectives 25:00 - The Shift in Tech Leadership 28:00 - Changing Expectations for Engineers 30:00 - Advice for Startup Founders 32:00 - Where to Find Matt Online 33:00 - Conclusion Follow Matt Biilmann on Social Media Twitter: https://x.com/biilmann Linkedin: https://www.linkedin.com/in/mathias-biilmann-christensen-a5a3805/ Github: https://github.com/biilmann Sponsored by This Dot: thisdot.co...

Oct 22, 2024

2 mins

Netlify

Java’s AI Evolution: Semantic Caching JVM, and GenAI Architectures with Theresa Mamarella & Brian Sam-Bodden

In this episode of the Modern Web Podcast, Danny Thompson, Director of Technology at This Dot Labs, hosts a conversation with Theresa Mammarella, JVM Engineer at IBM, and Brian Sam-Bodden, Applied AI Engineer at Redis. They explore their talks at JCONF in Dallas, Texas, covering topics like GenAI architectures in the Java community and OpenJDK's Project Valhalla. Their conversation covers Java’s evolution, AI applications, semantic caching, and how these technologies are impacting development workflows and performance optimization. Chapters 00:00 - Introduction 01:00 - Brian on GenAI in the Java Community 01:47 - Java’s Safe Evolution Path 02:17 - Teresa on Project Valhalla 03:54 - Value Classes and Performance 04:33 - Brian on Semantic Caching 06:54 - Challenges of Rewording Prompts 09:15 - What is RAG Architecture? 11:34 - Java’s Role in AI 13:57 - Cost of LLMs and Caching Strategies 15:57 - Teresa on Java’s Future 18:22 - Learning Resources for Java Developers 20:44 - Addressing Misconceptions About Java 22:39 - Final Thoughts Follow Theresa Mammarella & Brian Sam on Social Media Theresa Mammarella Twitter: https://x.com/t_mammarella Brian Sam-Bodden Twitter: https://x.com/bsbodden Theresa Mammarella Linkedin: https://www.linkedin.com/in/tmammarella/ Brian Sam-Bodden Linkedin: https://www.linkedin.com/in/sambodden/...

Oct 29, 2024

1 min

Artificial Intelligence

Let's innovate together!

We're ready to be your trusted technical partners in your digital innovation journey.

Whether it's modernization or custom software solutions, our team of experts can guide you through best practices and how to build scalable, performant software that lasts.

Accessible Tabs in Angular

Make it Accessible - 4 Part Series

Accessible Tabs in Angular

The Problem

The Solution

The Implementation

Tab Trigger

Tab Panel

Finish it

Conclusion

You might also like

The HTML Dialog Element: Enhancing Accessibility and Ease of Use

Angular Signals for Simpler State Management and DOM Performance

Lessons from Building Netlify with Matt Biilmann, CEO at Netlify

Java’s AI Evolution: Semantic Caching JVM, and GenAI Architectures with Theresa Mamarella & Brian Sam-Bodden

Let's innovate together!

You might also like

The HTML Dialog Element: Enhancing Accessibility and Ease of Use

Angular Signals for Simpler State Management and DOM Performance

Lessons from Building Netlify with Matt Biilmann, CEO at Netlify

Java’s AI Evolution: Semantic Caching JVM, and GenAI Architectures with Theresa Mamarella & Brian Sam-Bodden