# Customizing Angular Aria Tabs Quickly with Google Antigravity CLI

DevFeed: [Customizing Angular Aria Tabs Quickly with Google Antigravity CLI](<https://devfeed.tech/articles/customizing-angular-aria-tabs-quickly-with-google-antigravity-cli-18910.md>)

Original publisher: [Read original article](<https://blog.angular.dev/customizing-angular-aria-tabs-quickly-with-google-antigravity-cli-39ff8e0271a4?source=rss----447683c3d9a3---4>)

Author: Angular

Published: 2026-09-02T01:50:59Z

Content type: tutorial

Language: en

Sources: [Angular](<https://devfeed.tech/sources/angular.md>)

Topics: [Angular](<https://devfeed.tech/topics/angular.md>), [Accessibility](<https://devfeed.tech/topics/accessibility.md>), [google-antigravity](<https://devfeed.tech/topics/google-antigravity.md>), [CSS](<https://devfeed.tech/topics/css.md>), [User interface design](<https://devfeed.tech/topics/ui-design.md>)

Tags: [accessibility](<https://devfeed.tech/tags/accessibility.md>), [angular](<https://devfeed.tech/tags/angular.md>), [antigravity](<https://devfeed.tech/tags/antigravity.md>), [css](<https://devfeed.tech/tags/css.md>), [material-design](<https://devfeed.tech/tags/material-design.md>), [ui](<https://devfeed.tech/tags/ui.md>)

## AI overview

This tutorial tests how far Angular Aria tabs can be customized while preserving accessibility. It uses Google Antigravity's coding agent and a /goal command to transform a basic tab interface into a neumorphic design, then addresses contrast problems identified by Lighthouse. After a correction, the application reaches a 100 accessibility score.

## Source excerpt

The Angular team has called Angular Aria a set of customizable, fully accessible UI patterns. This is a strong claim, but in practice, how possible is it to heavily customize the components while maintaining accessibility features such as keyboard navigation and focus management? In this post, we're going to use Google Antigravity to put that claim to the test by updating a tab UI from generic styles to a neumorphism-based design. Motivation In the angular.dev documentation, the team has examples with a set of basic, Material Design-based, and retro styles meant to show developers what's possible with these new accessibility patterns. Here's the challenge: take the tabs basic styles example further by implementing the following neumorphism-inspired design. Here's a look at the UI before any changes: Angular Aria tabs component with basic styles applied The Lighthouse accessibility report shows a 100 score before making any changes: Accessibility score for the tabs based on the original styles Neumorphic designs are typically criticized for their poor accessibility. This experiment is designed to push the coding agent with complex CSS styles while stress-testing the customizability of Angular Aria tabs. Additionally, I'll ask the agent to update any accessibility issues that come up. Making the changes The styles for this UI are well organized, but require a lot of changes to achieve something like a neumorphic design. Instead of writing them by hand, Google Antigravity's coding agent can make the changes. Here's the prompt: /goal update the tabbed UI to be neumorphic style. The example UI is @example-ui.jpeg and the styles are in @src/app/app.css A few things to note here: This example used a reference image for inspiration (@example-ui.jpeg) to inform the designs. This example also uses the /goal command in Google Antigravity instructs the agent to work a task to completion without asking the user for immediate input. The Result Here's the resulting UI based on the