build: create angular aria package

.bazelignore

@@ -18,6 +18,7 @@ integration/yarn-pnp-compat/.yarn/install-state.gz
 integration/yarn-pnp-compat/node_modules
 integration/node_modules
 
+src/aria/node_modules
 src/cdk-experimental/node_modules
 src/cdk/node_modules
 src/components-examples/node_modules

.ng-dev/commit-message.mts

@@ -9,20 +9,20 @@ export const commitMessage: CommitMessageConfig = {
   minBodyLengthTypeExcludes: ['docs'],
   scopes: [
     'multiple', // For when a commit applies to multiple components.
-    'cdk-experimental/accordion',
+    'aria/accordion',
+    'aria/combobox',
+    'aria/listbox',
+    'aria/menu',
+    'aria/radio-group',
+    'aria/tabs',
+    'aria/toolbar',
+    'aria/tree',
+    'aria/ui-patterns',
     'cdk-experimental/column-resize',
-    'cdk-experimental/combobox',
-    'cdk-experimental/listbox',
-    'cdk-experimental/menu',
     'cdk-experimental/popover-edit',
-    'cdk-experimental/radio-group',
     'cdk-experimental/scrolling',
     'cdk-experimental/selection',
     'cdk-experimental/table-scroll-container',
-    'cdk-experimental/tabs',
-    'cdk-experimental/toolbar',
-    'cdk-experimental/tree',
-    'cdk-experimental/ui-patterns',
     'cdk/a11y',
     'cdk/accordion',
     'cdk/bidi',

.ng-dev/google-sync-config.json

@@ -10,6 +10,9 @@
     "src/material-experimental/**/*.ts",
     "src/material-experimental/**/*.html",
     "src/material-experimental/**/*.scss",
+    "src/aria/**/*.ts",
+    "src/aria/**/*.html",
+    "src/aria/**/*.scss",
     "src/cdk/**/*.ts",
     "src/cdk/**/*.html",
     "src/cdk/**/*.scss",

.ng-dev/release.mts

@@ -18,6 +18,7 @@ import {assertValidNpmPackageOutput} from '../tools/release-checks/npm-package-o
  * appear in the changelog.
  */
 export const releasePackages = [
+  'aria',
   'cdk',
   'material',
   'google-maps',

BUILD.bazel

@@ -1,6 +1,7 @@
 load("@devinfra//bazel/validation:defs.bzl", "validate_ts_version_matching")
 load("@npm//:defs.bzl", "npm_link_all_packages")
 load("//:pkg-externals.bzl", "PKG_EXTERNALS")
+load("//src/aria:config.bzl", "ARIA_ENTRYPOINTS")
 load("//src/cdk:config.bzl", "CDK_ENTRYPOINTS")
 load("//src/cdk-experimental:config.bzl", "CDK_EXPERIMENTAL_ENTRYPOINTS")
 load("//src/material:config.bzl", "MATERIAL_ENTRYPOINTS", "MATERIAL_TESTING_ENTRYPOINTS")
@@ -26,7 +27,8 @@ genrule(
     cmd = "echo '%s' > $@" % PKG_EXTERNALS,
 )
 
-entryPoints = ["cdk/%s" % e for e in CDK_ENTRYPOINTS] + \
+entryPoints = ["aria/%s" % e for e in ARIA_ENTRYPOINTS] + \
+              ["cdk/%s" % e for e in CDK_ENTRYPOINTS] + \
               ["cdk-experimental/%s" % e for e in CDK_EXPERIMENTAL_ENTRYPOINTS] + \
               ["material/%s" % e for e in MATERIAL_ENTRYPOINTS + MATERIAL_TESTING_ENTRYPOINTS] + \
               ["material-experimental/%s" % e for e in MATERIAL_EXPERIMENTAL_ENTRYPOINTS + MATERIAL_EXPERIMENTAL_TESTING_ENTRYPOINTS]

MODULE.bazel

@@ -77,6 +77,7 @@ npm.npm_translate_lock(
         "//:package.json",
         "//:pnpm-workspace.yaml",
         "//integration:package.json",
+        "//src/aria:package.json",
         "//src/cdk:package.json",
         "//src/cdk-experimental:package.json",
         "//src/components-examples:package.json",
@@ -93,6 +94,10 @@ npm.npm_translate_lock(
     ],
     npmrc = "//:.npmrc",
     package_visibility = {
+        "@angular/aria": [
+            "//integration:__subpackages__",
+            "//docs:__subpackages__",
+        ],
         "@angular/cdk": [
             "//integration:__subpackages__",
             "//docs:__subpackages__",

docs/defs.bzl

@@ -19,6 +19,7 @@ COMMON_CONFIG = [
 
 # Project dependencies common across libs/tests
 DEPS = [
+    "//docs:node_modules/@angular/aria",
     "//docs:node_modules/@angular/cdk",
     "//docs:node_modules/@angular/cdk-experimental",
     "//docs:node_modules/@angular/material",

docs/package.json

@@ -28,6 +28,7 @@
     "npm": "Please use pnpm instead of NPM to install dependencies"
   },
   "dependencies": {
+    "@angular/aria": "workspace:*",
     "@angular/cdk": "workspace:*",
     "@angular/cdk-experimental": "workspace:*",
     "@angular/common": "catalog:",

packages.bzl

@@ -1,6 +1,7 @@
 # Packages which are versioned together on npm
 ANGULAR_COMPONENTS_SCOPED_PACKAGES = ["@angular/%s" % p for p in [
     "material",
+    "aria",
     "cdk",
     "cdk-experimental",
     "material-experimental",

pkg-externals.bzl

@@ -1,3 +1,4 @@
+load("//src/aria:config.bzl", "ARIA_ENTRYPOINTS")
 load("//src/cdk:config.bzl", "CDK_ENTRYPOINTS")
 load("//src/cdk-experimental:config.bzl", "CDK_EXPERIMENTAL_ENTRYPOINTS")
 load("//src/material:config.bzl", "MATERIAL_ENTRYPOINTS", "MATERIAL_TESTING_ENTRYPOINTS")
@@ -28,6 +29,7 @@ PKG_EXTERNALS = [
     "@angular/router",
 
     # Primary entry-points in the project.
+    "@angular/aria",
     "@angular/cdk",
     "@angular/cdk-experimental",
     "@angular/google-maps",
@@ -58,6 +60,7 @@ PKG_EXTERNALS = [
 def setup_entry_point_externals(packageName, entryPoints):
     PKG_EXTERNALS.extend(["@angular/%s/%s" % (packageName, ep) for ep in entryPoints])
 
+setup_entry_point_externals("aria", ARIA_ENTRYPOINTS)
 setup_entry_point_externals("cdk", CDK_ENTRYPOINTS)
 setup_entry_point_externals("cdk-experimental", CDK_EXPERIMENTAL_ENTRYPOINTS)
 setup_entry_point_externals("material", MATERIAL_ENTRYPOINTS + MATERIAL_TESTING_ENTRYPOINTS)
@@ -68,6 +71,7 @@ setup_entry_point_externals(
 
 # External module names in the examples package. Individual examples are grouped
 # by package and component, so we add configure such entry-points as external.
+setup_entry_point_externals("components-examples/aria", ARIA_ENTRYPOINTS)
 setup_entry_point_externals("components-examples/cdk", CDK_ENTRYPOINTS)
 setup_entry_point_externals("components-examples/cdk-experimental", CDK_EXPERIMENTAL_ENTRYPOINTS)
 setup_entry_point_externals(

pnpm-workspace.yaml

@@ -2,6 +2,7 @@ packages:
   - .
   - docs
   - integration
+  - src/aria
   - src/cdk
   - src/cdk-experimental
   - src/components-examples

scripts/deploy/publish-build-artifacts.sh

@@ -17,6 +17,7 @@ fi
 
 # Release packages that need to published as snapshots.
 PACKAGES=(
+  aria
   cdk
   cdk-experimental
   material

scripts/util.mts

@@ -7,7 +7,13 @@ const commonTypos = new Map([['snackbar', 'snack-bar']]);
 // List of packages where the specified component could be defined in. The script uses the
 // first package that contains the component (if no package is specified explicitly).
 // e.g. "button" will become "material/button", and "overlay" becomes "cdk/overlay".
-const orderedGuessPackages = ['material', 'cdk', 'material-experimental', 'cdk-experimental'];
+const orderedGuessPackages = [
+  'material',
+  'aria',
+  'cdk',
+  'material-experimental',
+  'cdk-experimental',
+];
 
 /**
  * Tries to guess the full name of a package, based on a shorthand name.

src/aria/BUILD.bazel

@@ -0,0 +1,30 @@
+load("@npm//:defs.bzl", "npm_link_all_packages")
+load("//src/aria:config.bzl", "ARIA_TARGETS")
+load("//tools:defaults.bzl", "ng_package", "ts_project")
+
+package(default_visibility = ["//visibility:public"])
+
+npm_link_all_packages()
+
+ts_project(
+    name = "aria",
+    srcs = glob(
+        ["*.ts"],
+        exclude = ["**/*.spec.ts"],
+    ),
+    deps = ["//:node_modules/@angular/core"],
+)
+
+ng_package(
+    name = "npm_package",
+    package_name = "@angular/aria",
+    srcs = ["package.json"],
+    tags = ["release-package"],
+    visibility = [
+        "//:__pkg__",
+        "//goldens:__pkg__",
+        "//integration:__subpackages__",
+        "//src/material-experimental:__subpackages__",
+    ],
+    deps = ARIA_TARGETS,
+)

src/cdk-experimental/accordion/BUILD.bazel → src/aria/accordion/BUILD.bazel

@@ -7,12 +7,11 @@ ng_project(
     srcs = [
         "accordion.ts",
         "index.ts",
-        "public-api.ts",
     ],
     deps = [
         "//:node_modules/@angular/core",
-        "//src/cdk-experimental/deferred-content",
-        "//src/cdk-experimental/ui-patterns",
+        "//src/aria/deferred-content",
+        "//src/aria/ui-patterns",
         "//src/cdk/a11y",
         "//src/cdk/bidi",
     ],

src/cdk-experimental/accordion/accordion.spec.ts → src/aria/accordion/accordion.spec.ts

@@ -3,19 +3,14 @@ import {ComponentFixture, TestBed} from '@angular/core/testing';
 import {By} from '@angular/platform-browser';
 import {provideFakeDirectionality, runAccessibilityChecks} from '@angular/cdk/testing/private';
 import {_IdGenerator} from '@angular/cdk/a11y';
-import {
-  CdkAccordionGroup,
-  CdkAccordionTrigger,
-  CdkAccordionPanel,
-  CdkAccordionContent,
-} from './accordion';
-
-describe('CdkAccordionGroup', () => {
+import {AccordionGroup, AccordionTrigger, AccordionPanel, AccordionContent} from './accordion';
+
+describe('AccordionGroup', () => {
   let fixture: ComponentFixture<AccordionGroupExample>;
   let groupDebugElement: DebugElement;
   let triggerDebugElements: DebugElement[];
   let panelDebugElements: DebugElement[];
-  let groupInstance: CdkAccordionGroup;
+  let groupInstance: AccordionGroup;
   let triggerElements: HTMLElement[];
   let panelElements: HTMLElement[];
 
@@ -72,17 +67,17 @@ describe('CdkAccordionGroup', () => {
   }
 
   function defineTestVariables(currentFixture: ComponentFixture<AccordionGroupExample>) {
-    groupDebugElement = currentFixture.debugElement.query(By.directive(CdkAccordionGroup));
-    triggerDebugElements = currentFixture.debugElement.queryAll(By.directive(CdkAccordionTrigger));
-    panelDebugElements = currentFixture.debugElement.queryAll(By.directive(CdkAccordionPanel));
+    groupDebugElement = currentFixture.debugElement.query(By.directive(AccordionGroup));
+    triggerDebugElements = currentFixture.debugElement.queryAll(By.directive(AccordionTrigger));
+    panelDebugElements = currentFixture.debugElement.queryAll(By.directive(AccordionPanel));
 
-    groupInstance = groupDebugElement.injector.get<CdkAccordionGroup>(CdkAccordionGroup);
+    groupInstance = groupDebugElement.injector.get<AccordionGroup>(AccordionGroup);
     triggerElements = triggerDebugElements.map(el => el.nativeElement);
     panelElements = panelDebugElements.map(el => el.nativeElement);
   }
 
   function isTriggerActive(target: HTMLElement): boolean {
-    return target.classList.contains('cdk-active');
+    return target.getAttribute('data-active') === 'true';
   }
 
   function isTriggerExpanded(target: HTMLElement): boolean {
@@ -102,7 +97,7 @@ describe('CdkAccordionGroup', () => {
   });
 
   describe('ARIA attributes and roles', () => {
-    describe('CdkAccordionTrigger', () => {
+    describe('AccordionTrigger', () => {
       beforeEach(() => {
         configureAccordionComponent();
       });
@@ -141,7 +136,7 @@ describe('CdkAccordionGroup', () => {
       });
     });
 
-    describe('CdkAccordionPanel', () => {
+    describe('AccordionPanel', () => {
       beforeEach(() => {
         configureAccordionComponent();
       });
@@ -386,7 +381,7 @@ describe('CdkAccordionGroup', () => {
 @Component({
   template: `
     <div
-      cdkAccordionGroup
+      ngAccordionGroup
       [(value)]="value"
       [multiExpandable]="multiExpandable()"
       [disabled]="disabledGroup()"
@@ -396,23 +391,23 @@ describe('CdkAccordionGroup', () => {
       @for (item of items(); track item.value) {
         <div class="item-container">
           <button
-            cdkAccordionTrigger
+            ngAccordionTrigger
             [value]="item.value"
             [disabled]="item.disabled"
           >{{ item.header }}</button>
           <div
-            cdkAccordionPanel
+            ngAccordionPanel
             [value]="item.value"
           >
-            <ng-template cdkAccordionContent>
+            <ng-template ngAccordionContent>
               {{ item.content }}
             </ng-template>
           </div>
         </div>
       }
     </div>
   `,
-  imports: [CdkAccordionGroup, CdkAccordionTrigger, CdkAccordionPanel, CdkAccordionContent],
+  imports: [AccordionGroup, AccordionTrigger, AccordionPanel, AccordionContent],
 })
 class AccordionGroupExample {
   items = signal([