Updating a11y for badge / button group

docs/xplat/src/content/en/components/inputs/badge.mdx

@@ -887,19 +887,49 @@ The exclamation mark (`!`) gives the Tailwind utility precedence over the Badge'
 
 ## Accessibility
 
-The {Platform} Badge communicates a visual status and must have meaningful text or surrounding accessible context when that status is important.
+The {Platform} Badge is a non-interactive status visual that communicates a short count, state, or notification.
 
 ### Keyboard Interaction
 
-The Badge is a visual status indicator and does not provide an interactive keyboard action. It is reached according to the focus behavior of the element it decorates.
+The Badge does not receive focus, handle keyboard input, or expose component interaction events.
+
+| Key | Action |
+| -- | -- |
+| n/a | The Badge is not keyboard interactive. |
 
 ### Screen Readers / ARIA
 
-Provide meaningful visible content or an accessible label in the surrounding component when the Badge conveys information that is not otherwise available to assistive technology. Verify the resulting announcement for the specific surrounding control.
+The Badge host uses `role="status"` to expose its content as status information.
+
+<PlatformBlock for="WebComponents, React, Blazor">
+
+- The component sets `aria-roledescription` to identify the Badge and its current `variant`.
+- Add an `aria-label` when a Badge without text, including a `dot` Badge, communicates status that is not otherwise available to assistive technology.
+- Keep the Badge content or accessible label specific to the decorated item, such as `3 unread messages` rather than only `3`.
+
+</PlatformBlock>
+
+<PlatformBlock for="Angular">
+
+- The component initializes with `role="status"` and `aria-label="badge"`.
+- Angular derives `aria-roledescription` from the Badge type and its icon or value. Set the `label` input when `badge` is not a meaningful accessible name.
+- Add a meaningful `label` for a Badge without text or a `dot` Badge when its status is not otherwise available to assistive technology.
+
+</PlatformBlock>
 
 ### Accessibility Compliance
 
-Accessibility conformance for this component must be verified against the official product accessibility statement and the rendered usage context.
+Infragistics documents {ProductName} accessibility support for Section 508 and WCAG 2.1 guideline areas in the [Accessibility Compliance](../interactivity/accessibility-compliance.mdx) topic.
+
+| Criterion | How the component complies |
+| -- | -- |
+| [4.1.2 Name, Role, Value](https://www.w3.org/WAI/WCAG21/Understanding/name-role-value.html) | The Badge exposes the semantic `status` role. The xplat implementation also exposes a role description based on the current variant; Angular exposes an accessible label and a role description based on its type and content. |
+
+Your responsibilities:
+
+- Provide an accessible name that explains the status when the Badge has no meaningful text, especially for `dot` Badges.
+- Do not use Badge color as the only indication of status; pair it with text, an icon, or another accessible cue.
+- Keep sufficient contrast between the Badge foreground and background when overriding theme styles.
 
 ## Troubleshooting
 
@@ -961,4 +991,4 @@ These frequently asked questions cover common {Platform} Badge content, indicato
     Use `igniteui-angular` for Angular, `igniteui-react` for React, `igniteui-webcomponents` for Web Components, and `IgniteUI.Blazor` for Blazor. Keep related Ignite UI packages on the same release version.
   </FaqItem>
 
-</Faq>
+</Faq>

docs/xplat/src/content/en/components/inputs/button-group.mdx

@@ -950,24 +950,55 @@ The exclamation mark (`!`) gives the Tailwind utility precedence over the Button
 
 ## Accessibility
 
-The Button Group groups related Toggle Buttons while preserving the interaction and accessible state of each button. Provide meaningful content for every button and choose a selection mode that matches the intended interaction.
+The {Platform} Button Group organizes related Toggle Buttons while exposing each button's selected and disabled state.
 
 ### Keyboard Interaction
 
-The {Platform} Button Group follows the keyboard behavior of its Toggle Buttons. Use the keyboard interaction provided by the contained buttons and verify the focus order and selection behavior for the configured selection mode.
+The Button Group delegates keyboard interaction to its contained Toggle Buttons. Each Toggle Button renders a native button, so standard button keyboard behavior activates the focused item and updates its selection according to the configured selection mode.
 
-| Interaction | Expected behavior |
+| Key | Action |
 | --- | --- |
-| Keyboard focus | The user can reach the contained Toggle Buttons according to their focus behavior. |
-| Toggle Button interaction | The focused button changes its selected state according to the configured selection mode. |
+| Tab / Shift+Tab | Moves focus to the next or previous enabled Toggle Button in the group. |
+| Enter / Space | Activates the focused Toggle Button and selects or deselects it according to the configured selection mode. |
+
+When the Button Group is disabled, it disables its contained Toggle Buttons so they are not keyboard interactive.
 
 ### Screen Readers / ARIA
 
-Use clear labels for every {Platform} Toggle Button so assistive technology users can identify each option and its selected state. When an icon does not provide an accessible name, provide an appropriate text label or accessible name for the button.
+The Button Group exposes a group relationship and each Toggle Button exposes its state through native button semantics.
+
+<PlatformBlock for="WebComponents, React, Blazor">
+
+- The group container uses `role="group"` and reflects the group disabled state through `aria-disabled`.
+- Each Toggle Button renders a native `button` with `aria-pressed` for selection state and `aria-disabled` for disabled state.
+- The group emits `igcSelect` and `igcDeselect` after user interaction changes a Toggle Button selection. The event detail is the Toggle Button `value`.
+- Provide visible text or an `aria-label` for every Toggle Button, especially for icon-only controls.
+
+</PlatformBlock>
+
+<PlatformBlock for="Angular">
+
+- The group container uses `role="group"`.
+- Angular updates each contained button's `aria-pressed` value when its selection changes and disables child buttons when the group is disabled.
+- The group emits `selected` and `deselected` when a user changes selection. Each event provides the selected Toggle Button and its index.
+- Provide visible text, an `igxLabel`, or another accessible name for every icon-only button.
+
+</PlatformBlock>
 
 ### Accessibility Compliance
 
-Verify the rendered {Platform} Button Group against the accessibility requirements of the application. Check the button names, focus order, selected state announcements, and behavior for the configured selection mode in the target framework.
+Infragistics documents {ProductName} accessibility support for Section 508 and WCAG 2.1 guideline areas in the [Accessibility Compliance](../interactivity/accessibility-compliance.mdx) topic.
+
+| Criterion | How the component complies |
+| -- | -- |
+| [2.1.1 Keyboard](https://www.w3.org/WAI/WCAG21/Understanding/keyboard) | Each Toggle Button uses a native button, so the group selection behavior is available through standard button keyboard activation. |
+| [4.1.2 Name, Role, Value](https://www.w3.org/WAI/WCAG21/Understanding/name-role-value) | The group exposes `role="group"`. Toggle Buttons expose native button semantics and update `aria-pressed` when selection changes; xplat Toggle Buttons also expose `aria-disabled`. |
+
+Your responsibilities:
+
+- Give each Toggle Button a clear visible label or accessible name, especially when it contains only an icon.
+- Keep the group selection mode aligned with the control purpose, so users can understand whether one or multiple options may be selected.
+- Preserve the logical button order and sufficient color contrast when customizing the group or its selected state.
 
 ## Troubleshooting
 

docs/xplat/src/content/en/components/layouts/avatar.mdx

@@ -568,17 +568,17 @@ Infragistics documents {ProductName} accessibility support for Section 508 and W
 
 | Criterion | How the component complies |
 | -- | -- |
-| [1.1.1 Non-text Content](https://www.w3.org/WAI/WCAG22/Understanding/non-text-content) | The avatar has an accessible label, and image avatars can receive specific alternative text through `alt`. |
-| [4.1.2 Name, Role, Value](https://www.w3.org/WAI/WCAG22/Understanding/name-role-value) | The component initializes with image semantics and exposes content-related ARIA information. |
+| [1.1.1 Non-text Content](https://www.w3.org/WAI/WCAG21/Understanding/non-text-content) | The avatar has an accessible label, and image avatars can receive specific alternative text through `alt`. |
+| [4.1.2 Name, Role, Value](https://www.w3.org/WAI/WCAG21/Understanding/name-role-value) | The component initializes with image semantics and exposes content-related ARIA information. |
 
 </PlatformBlock>
 
 <PlatformBlock for="Angular">
 
 | Criterion | How the component complies |
 | -- | -- |
-| [1.1.1 Non-text Content](https://www.w3.org/WAI/WCAG22/Understanding/non-text-content) | The avatar has an accessible label and can be paired with surrounding text that identifies the represented entity. |
-| [4.1.2 Name, Role, Value](https://www.w3.org/WAI/WCAG22/Understanding/name-role-value) | The component initializes with `role="img"` and a default accessible label. |
+| [1.1.1 Non-text Content](https://www.w3.org/WAI/WCAG21/Understanding/non-text-content) | The avatar has an accessible label and can be paired with surrounding text that identifies the represented entity. |
+| [4.1.2 Name, Role, Value](https://www.w3.org/WAI/WCAG21/Understanding/name-role-value) | The component initializes with `role="img"` and a default accessible label. |
 
 </PlatformBlock>