Dave Rupert

This commit introduces an `ariaLabel` property to the **Fluent UI Web Components `Dialog` component**, allowing developers to explicitly set the `aria-label` attribute for improved accessibility. This **accessibility enhancement** ensures that dialogs are properly labeled for assistive technologies, making them more usable for all users. The change includes updating the **public API documentation** for the `Dialog` component and adding a **new test case** to verify the correct reflection of the `aria-label` attribute. This **fix** improves the semantic understanding of dialogs within applications utilizing these web components.

This commit **fixes** an accessibility issue and **enhances** the **Fluent UI web components** by making the `setTheme` function and `Theme` type **publicly available**. It **exports** `setTheme` from the main rollup entry point (`index-rollup.ts`) and updates its JSDoc annotation from `@internal` to `@public` in `set-theme.ts`, enabling external programmatic theme control. The **API documentation** (`web-components.api.md`) has been updated to reflect this new public interface, ensuring consumers are aware of the change. Additionally, other **developer documentation** (`polyfilling.mdx`, `quick-start.mdx`) received minor updates for clarity and accuracy.

This commit **updates the Storybook environment for Fluent UI web-components** to align its appearance and functionality with the React version. It involves **refactoring theme and direction management** using global types and decorators, alongside significant **styling updates** for documentation pages, including typography, images, and tables. Additionally, the commit enhances the Storybook manager with SEO meta tags and updated sidebar styling, and improves the introductory documentation with new content and accessibility information. This **maintenance and alignment** work ensures a more consistent and robust **developer experience** across Fluent UI components.

This commit provides a **bug fix** for the **Fluent UI web components**, specifically addressing rendering issues in **forced-colors mode**. It updates the styling for the `dropdown`, `listbox`, and `option` components to ensure their **disabled states** are correctly displayed and visually consistent. The changes include adjusting default borders for `dropdown` and `listbox` and removing an unnecessary border from `option` elements. This significantly improves the **accessibility** and visual integrity of these interactive elements for users who rely on high-contrast themes.

This commit delivers a **bug fix** for the **Fluent UI web components `Switch` component**, specifically addressing a **missing focus state** in certain scenarios. It **improves accessibility** by ensuring the focus indicator is always visible, particularly for users operating in **forced color modes** (e.g., high contrast themes). The fix involves adding an `outline-offset` to the `focus-visible` pseudo-class within `switch.styles.ts`, making the interactive state of a checked switch clear and compliant.

This commit introduces a crucial **accessibility fix** for the **Fluent UI Web Components** library, specifically targeting the **Dropdown component**. It adds necessary CSS styles within `dropdown.styles.ts` to render a visible focus ring around the dropdown when it receives keyboard focus. This enhancement significantly improves the user experience for keyboard navigators and users with visual impairments by clearly indicating the active interactive element. The change ensures better adherence to accessibility standards by providing a clear visual cue for focused states.

This commit introduces an **accessibility fix** for **Fluent UI web components** dialogs, specifically addressing issues encountered at **400% zoom levels**. It **removes problematic vertical margins** and updates the `dialog`'s `max-height` to `100vh` (and `100dvh`) to prevent content clipping and ensure the entire dialog fits within the viewport. Furthermore, the `dialog-body` styles are adjusted to conditionally apply sticky positioning for titles and actions, improving content visibility and overall usability. This ensures a more robust and accessible user experience for all users, especially those relying on high zoom.

This commit introduces a **new feature** to the **Fluent UI web-components** package by **adding an endpoint for F2 design token exports**. This enhancement allows external systems or tools to programmatically retrieve and utilize the F2 design tokens defined within the web-components ecosystem. The change facilitates better integration and consumption of design system tokens, improving consistency across different platforms.

This commit **adds comprehensive migration documentation** for **Fluent Web Components**, guiding developers through the transition from version 2 to version 3. The new document, located at `packages/web-components/src/_docs/developer/migration.stories.mdx`, details significant **API changes** and provides updates on **component status** between the two major versions. This **documentation update** is a critical **maintenance effort** to support users upgrading their projects, ensuring a smoother and more informed migration process for the **Fluent Web Components** library.

This commit introduces a **critical bug fix** for the **Fluent UI Web Components Spinner component**, specifically addressing its rendering in right-to-left (RTL) layouts. Previously, the spinner exhibited visual glitches due to the use of logical CSS properties. The fix involves **replacing logical CSS properties** like `inset-inline-end` and `border-inline-end-color` with their **physical equivalents** such as `right`, `left`, and `border-right-color` in `spinner.styles.ts`. This ensures the **Spinner component displays correctly** for all users, regardless of their language direction settings, improving the overall user experience within applications utilizing the **Fluent UI Web Components library**.

This commit delivers a **bug fix** for the **Fluent UI Web Components** library, specifically addressing a visual issue within the **`switch` component**. The update resolves an accessibility problem where the checked indicator for a disabled switch was not rendering correctly in high-contrast mode. By modifying `switch.styles.ts`, the disabled state's checked indicator now correctly utilizes `GrayText` in high-contrast themes, ensuring proper visual representation and improving **accessibility** for users.