docs(accessibility): update accessibility compliance documentation stucture and content

[desig9stein]

Closes #

Checklist:

• check topic's TOC/menu and paragraph headings
• Include TOC topic labels in the topic content when it has a valuable update, is new, or is considered preview / beta
• link to other topics using ./page.mdx or ../relative/path.mdx (.mdx extension required)
• at the References section at the end of the topic add links to topics, samples, etc
• reference API documentation instead of adding a section with API

• use valid component names - [Data] Grid, IgxSelectComponent, <igx-combo>
• use spell checker tool (VS Code, Grammarly, Microsoft Editor)
• add inline code blocks for the names of classes / tags / properties
• add language descriptor for the code blocks
• check if links function by running the check-api/mdx npm commands
• check if sample is working and fully visible in the topic
• check if sample is working and fully visible in the StackBlitz
• check if code blocks match the code in StackBlitz demo
• add or update meaningful llms.description metadata and run npm run check:llms-metadata

• follow SEO guidelines to fill topic's metadata (SEO guidelines)

• do not resolve requested changes (leave that to the reviewer)

[radomirchev]

@desig9stein European Accessibility Act (EAA) - neither file mentions it. Zero hits in both angular/…/themes/accessibility.mdx and xplat/…/themes/accessibility.mdx for "European Accessibility Act", "EAA", "EN 301 549", "2019/882", "Section 508", or "directive". The only regulatory-adjacent thing on either page is WCAG 2.1 SC 1.4.4 and the 4.5:1 AA threshold.

[radomirchev]

@desig9stein xplat contradicts its own Palettes topic on the page's central mechanism
Where: xplat lines 35, 94, 185 (and the intro at 18, llms.description at line 9)
Issue: This page tells the xplat reader the contrast color "is calculated in the browser… recalculated whenever the background changes, including at runtime". xplat palettes.mdx:61 says the opposite: "Contrast colors are generated at build-time therefore overriding the CSS variables will not update the corresponding contrast colors", and line 88 calls runtime calculation an "upcoming release". The Angular set genuinely is runtime (angular palettes.mdx:54) — the claim was ported without checking that xplat had not shipped it yet.
Fix: Scope it. In the Sass path the calculation is emitted as a runtime CSS expression; the --ig--contrast variables in the prebuilt theme CSS are build-time and do not follow a --ig--500 override. Same qualification at lines 35 and 185.

[desig9stein]

@desig9stein European Accessibility Act (EAA) — neither file mentions it. Zero hits in both angular/…/themes/accessibility.mdx and xplat/…/themes/accessibility.mdx for "European Accessibility Act", "EAA", "EN 301 549", "2019/882", "Section 508", or "directive". The only regulatory-adjacent thing on either page is WCAG 2.1 SC 1.4.4 and the 4.5:1 AA threshold.

[desig9stein]

@desig9stein xplat contradicts its own Palettes topic on the page's central mechanism

Where: xplat lines 35, 94, 185 (and the intro at 18, llms.description at line 9)

Issue: This page tells the xplat reader the contrast color "is calculated in the browser… recalculated whenever the background changes, including at runtime". xplat palettes.mdx:61 says the opposite: "Contrast colors are generated at build-time therefore overriding the CSS variables will not update the corresponding contrast colors", and line 88 calls runtime calculation an "upcoming release". The Angular set genuinely is runtime (angular palettes.mdx:54) — the claim was ported without checking that xplat had not shipped it yet.

Fix: Scope it. In the Sass path the calculation is emitted as a runtime CSS expression; the --ig--contrast variables in the prebuilt theme CSS are build-time and do not follow a --ig--500 override. Same qualification at lines 35 and 185.

[desig9stein]

Re: EAA comment

Correct that neither themes/accessibility.mdx mentions the EAA — but that's intentional scoping rather than a gap.

The regulatory framing lives on the compliance page, which is in this PR:

• xplat/…/interactivity/accessibility-compliance.mdx:33 — "EN 301 549 | European Union | The harmonised standard behind the European Accessibility Act, enforceable since 28 June 2025."
• Section 508 at :32, :36, :241, :254-255; both are in keywords at :4
• :36 makes the practical point: targeting WCAG 2.1 AA addresses all three frameworks

The Angular set is covered by the same edit — that page is generated from xplat (3b0dc0fd65 "Remove xplat-generated topics from the Angular source (#410)", which added it to docs/angular/src/content/en/.gitignore:76).

themes/accessibility.mdx is deliberately the theming-layer page: :27 scopes it to color/type/palette and links out to Accessibility Compliance for standards, ARIA, and keyboard. Adding a standards table there would duplicate the compliance page and split the source of truth. Not planning a change here.

[desig9stein]

Re: contrast mechanism comment

The contradiction is real, but it's the other way round — palettes.mdx is the stale page, not this one. xplat has shipped runtime contrast.

From the shipped igniteui-webcomponents@7.2.4 prebuilt CSS (themes/light/material.css):

--ig-primary-500-contrast: hsla(from color(from var(--ig-primary-500) var(--y-contrast)) h 0 l/1)

• 108 -contrast declarations in that file, all runtime relative-color expressions
• 0 literal black/white values
• --y-contrast: xyz-d65 var(--y) var(--y) var(--y) is defined in the same shipped CSS

Upstream: igniteui-theming sass/color/_functions.scss:123 generates every shade's contrast through adaptive-contrast(), which returns a runtime CSS expression (:300). Shipped in 1a22e1a (2026-05-26).

So the claims at lines 35, 94, and 185 are accurate as written, and the suggested qualification would introduce an error — the prebuilt theme CSS does follow an --ig-primary-500 override.

What actually needs fixing is xplat/…/themes/palettes.mdx, which predates the feature:

• :61 — "generated at build-time therefore overriding the CSS variables will not update the corresponding contrast colors"
• :88 — calls runtime calculation an "upcoming release"
• :68-80 — example shows --ig-primary-500-contrast: black;

Angular's palettes.mdx:54 already describes it correctly. Fixing the xplat palettes topic in this PR.