Sarah Higley

This commit introduces an **opt-in `isAccessible` prop** to the **`ToggleButton` component** within `@fluentui/react-button`, providing a dedicated variant for **accessible checked colors**. This **new capability** enhances **accessibility** by allowing developers to ensure sufficient color contrast for the checked state, addressing potential visual impairments. The change involves updating `ToggleButtonProps` and `useToggleState` signatures, adding new conditional styles in `useToggleButtonStyles_unstable`, and includes comprehensive API documentation and Storybook examples to guide usage. This ensures a more inclusive user experience for interactive elements.

This commit significantly **enhances the accessibility documentation** within the `public-docsite-v9` by **adding a new comprehensive page** on notifications and **updating existing debugging guidance**. A new `Notifications.mdx` page now details best practices for accessible notifications, covering topics like DOM-based live regions, Fluent's `useAnnounce` hook, and common implementation mistakes. Concurrently, the `DebuggingNotifications.mdx` page is updated to include new steps for `document.ariaNotify` and clarify existing advice, providing developers with more robust tools for debugging accessibility announcements. This **documentation update** improves the clarity and completeness of resources for building accessible user interfaces.

This commit delivers a **bug fix** for the **`@fluentui/react-table`** package, resolving an issue where the radio indicator in a single-select table header was not fully hidden when intended to be invisible. The **`useTableSelectionCell_unstable`** hook within the **`TableSelectionCell`** component has been updated to prevent the radio indicator from rendering entirely when both `type` is 'radio' and `invisible` is true. This ensures that the radio button is completely removed from the DOM rather than just having zero opacity, improving the visual integrity and potential accessibility of **`Table`** components. A new test case has been added to validate this corrected behavior.

This commit introduces a **bug fix** to the **Fluent UI React Calendar compatibility package**, specifically targeting the `CalendarDay` component. It addresses an issue where **disabled calendar buttons** were not displaying with the correct disabled color styles when the application was viewed in **high contrast mode**. By adding explicit styling within `useCalendarDayStyles.styles.ts`, this change ensures that disabled `CalendarDay` elements now render with appropriate visual cues, significantly improving **accessibility** and user experience for individuals using high contrast themes.

This commit implements an **accessibility fix** by adding an `aria-label` to the dismiss button within the `MessageBar` component's storybook examples. Specifically, it targets the `packages/react-components/react-message-bar/stories/src/MessageBar/Actions.stories.tsx` file to improve the semantic naming of interactive elements. This **maintenance** update ensures that the **`MessageBar` component's** action functionality is more robustly accessible for assistive technologies during **development and testing**.

This commit **enhances and corrects documentation stories** for the **`react-combobox` component**. The **Controlled story** (`ComboboxControlled.stories.tsx`) now demonstrates clearing the input value when the combobox closes and refactors option rendering for improved clarity, representing a **story feature enhancement**. Additionally, the **Virtualizer story** (`ComboboxVirtualizer.stories.tsx`) receives **documentation fixes**, updating the `autoSize` positioning prop and correcting an outdated documentation link. These changes improve the accuracy and usability of the `Combobox` component's usage examples.

This commit introduces a **bug fix** for the **Fluent UI React Tooltip component**, addressing an issue where the tooltip's rendering logic was not correctly preventing display based on ARIA attributes. Specifically, the `useTooltip_unstable` hook is updated to ensure that the tooltip only suppresses its rendering when `aria-expanded` is true *if* `aria-haspopup` is also present. This adjustment aligns the component's behavior with accessibility best practices, preventing incorrect rendering states and improving the **overall accessibility and user experience** for interactive elements that utilize tooltips and popups.

This commit **fixes** an issue in the **`@fluentui/react-nav`** package where `NavHeader` elements were not correctly included in the arrow navigation region. It introduces a new `tabbable` property to the `NavContextValue` and related hooks, which controls whether an element participates in tab and arrow navigation. The `useArrowNavigationGroup` hook is now applied to the **`NavDrawerBody`** component, utilizing this `tabbable` context value, rather than the `NavDrawer` itself. This **bug fix** ensures that `NavHeader` and other elements within the `NavDrawerBody` are properly included in the keyboard navigation flow, significantly improving **accessibility** for users navigating with arrow keys.

This commit introduces a **new feature** to the **`@fluentui/react-table`** package, enabling **`DataGrid` header cells** to contain interactive controls. It achieves this by extending `DataGridHeaderCellProps` with a `focusMode` property, which is implemented in `useDataGridHeaderCell_unstable` to manage `tabIndex` and focusable groups for proper keyboard navigation. This enhancement significantly improves the flexibility and accessibility of `DataGrid` components by allowing richer interactions directly within column headers. Developers can now embed elements like buttons or checkboxes in headers, leading to more dynamic and user-friendly table interfaces, with updated API documentation and stories demonstrating its usage.

This commit delivers a **bug fix** for the **DetailsList** component, specifically addressing an issue within the `DetailsRow` sub-component. It updates the `focusZoneDirection` calculation in `DetailsRow.base.tsx` to ensure that the **FocusZone** correctly falls back to a horizontal direction when no explicit direction is provided. By utilizing **nullish coalescing**, this change improves the robustness of keyboard navigation within `DetailsList` rows, ensuring a more consistent and expected user experience for accessibility.

This commit introduces the **new `useTypingAnnounce` hook** within the **`@fluentui/react-aria`** package, providing a dedicated solution for managing live region announcements triggered by user input. This **new capability** significantly enhances **accessibility** by allowing developers to easily announce dynamic content changes, such as character counts or filtering results, as users type. It includes robust debouncing logic and mutation observer integration, alongside an **enhancement** to `useDomAnnounce_unstable` for improved batching of announcements. Comprehensive documentation, Storybook examples, and API exports are included, making this feature readily available for use in **`@fluentui/react-components`**. This provides a robust and accessible way to communicate real-time feedback to users of assistive technologies.

This commit **adds comprehensive documentation** to guide developers on **debugging screen reader notifications and live regions**. A new page, `DebuggingNotifications.stories.mdx`, provides detailed steps and considerations for ensuring accessibility announcements function correctly. This **enhances the developer experience** by offering a centralized resource, with relevant links added to the existing documentation for the `AriaLiveAnnouncer` component, `UseAnnounce` hook, and `Toast` component to improve discoverability. This **documentation update** aims to help developers troubleshoot common issues with accessibility announcements.

This commit introduces a **bug fix** for the **`DataGrid` component** within the **`react-table` package**, specifically addressing an issue with its **single-selection mode**. Previously, the radio input in the header of a `DataGrid` configured for single-select was merely disabled or incorrectly rendered; now, it is **fully hidden** to provide a cleaner and more accurate UI. The **`useDataGridSelectionCell_unstable` hook** was modified to prevent rendering this indicator, improving the visual consistency for users. A new test case has been added to `DataGridSelectionCell.test.tsx` to ensure this behavior is maintained, preventing regressions in the **`DataGridSelectionCell`** module.

This commit **enhances the accessibility and semantic structure** of the **`react-card` component's Storybook examples and documentation**. It updates multiple story files, including `CardAction.stories.tsx` and `CardAppearance.stories.tsx`, to render card header text using `h5` elements for improved semantic hierarchy. Concurrently, the `CardBestPractices.md` file is augmented with new guidelines focusing on proper use of heading tags and ARIA attributes for better accessibility. This **documentation and example improvement** provides clearer guidance for developers on building semantically correct and accessible `Card` components.

This commit provides an **accessibility fix** for the **`react-card` component's Storybook stories**. It enhances the `CardSelectableIndicator` story (`CardSelectableIndicator.stories.tsx`) by adding `aria-labelledby` and `id` attributes to checkboxes and card titles, improving their semantic labeling. Additionally, the `CardTemplates` story (`CardTemplates.stories.tsx`) now includes `aria-label` attributes for icon buttons. These changes ensure that the component's examples are more accessible, aiding developers in understanding and implementing accessible UI patterns within the **`Card` component**.

This commit delivers a **bug fix** for the **v8 Dropdown** component, resolving an **accessibility** issue where VoiceOver on iOS Safari was unable to reach dropdown options. It modifies the `Dropdown.base.tsx` file to adjust the `aria-owns` and `aria-controls` attributes, specifically when the component is in responsive mode. This change significantly improves the user experience and **VoiceOver accessibility** for **iOS Safari users** interacting with dropdowns.

This commit provides a **bug fix** for **Fluent UI v8 picker components**, specifically addressing an issue where **suggestion items** exhibited incorrect color rendering on hover within **Windows High Contrast Mode (WHCM)**. The fix involves adjusting the width of the button flex container within `SuggestionsItem.styles.ts` to ensure proper layout and visual consistency. This improves the accessibility and user experience of **picker suggestion items** for users utilizing high contrast themes. A corresponding test snapshot in `Suggestions.test.tsx` was updated to reflect these styling changes.

This commit implements an **accessibility fix** within the **Fluent UI React Tags library**, specifically for the `Tag` and `TagGroup` components. It refines the `useTag_unstable` hook to dynamically apply the correct ARIA semantics, using either `aria-selected` or `aria-pressed` attributes based on the tag's selection state and its context within a `TagGroup`. This change also removes a previously default `aria-pressed` attribute from `InteractionTag` where it was not semantically appropriate, ensuring that selectable tags accurately communicate their state to assistive technologies and significantly improving the overall **accessibility** of interactive tag elements.

This commit introduces a **bug fix** for the **ContextualMenu** component, resolving an issue where the `onClick` handler for the **ContextualMenuSplitButton** was inadvertently firing twice. The change specifically modifies the `render` method within `packages/react/src/components/ContextualMenu/ContextualMenuItemWrapper/ContextualMenuSplitButton.tsx` to correctly pass the `onClick` handler, ensuring it is invoked only once per click. This **fix** prevents unintended double actions for users interacting with split buttons in contextual menus, and a new test case has been added to validate the corrected behavior and prevent regressions.

This commit delivers an **accessibility fix** to the **Fluent UI React Tags** package, specifically addressing visibility issues for selected components in high contrast mode. It introduces dedicated styling for `Tag`, `InteractionTagPrimary`, and `InteractionTagSecondary` components when they are in a selected state. By modifying `useTagStyles.styles.ts`, `useInteractionTagPrimaryStyles.styles.ts`, and `useInteractionTagSecondaryStyles.styles.ts`, this change ensures that selected tags are clearly distinguishable. This significantly enhances the **usability and accessibility** of these UI elements for users who rely on high contrast themes.