Jeff Smith

This commit delivers a **bug fix** for the **`MenuList` component** within **Fluent UI Web Components**, resolving an issue where programmatically added menu items were not properly handled. Specifically, it **improves role validation** and updates role access from `getAttribute('role')` to `el.role` in `menu-list.ts` to correctly process dynamically appended menu items. This ensures that menu items added at runtime maintain their expected behavior and accessibility attributes, such as `data-indent`. New tests have been introduced in `menu-list.spec.ts` to prevent regressions and verify the correct rendering of dynamic menu content.

This commit **fixes** an issue where the **Custom Elements Manifest (CEM) parser** was failing to map types correctly due to processing extraneous files. The `packages/web-components/tsconfig.json` has been updated to **exclude** the `node_modules` and `dist` directories from TypeScript compilation, preventing the CEM parser from including these irrelevant files. This **improves the accuracy of type mapping** and ensures proper generation of type definitions and documentation for the **Fluent UI web components**. The change primarily impacts the **build process and documentation generation pipeline**.

This commit implements a crucial **accessibility fix** by removing the `aria-hidden` attribute from labels within the **`Field`**, `TextInput`, and `TextArea` components of `@fluentui-web-components`. This change directly enhances **text zoom support**, ensuring that component labels remain visible and usable for all users when magnified. Concurrently, the **Storybook examples** for the `Field` component have been updated, introducing new stories for text input and form submission, and modifying existing ones to better demonstrate component usage. This work improves the overall accessibility and documentation of these core UI elements.

This commit delivers an **accessibility bug fix** for the **Fluent UI Web Components' `tablist` component**. It resolves an issue where VoiceOver in navigation mode was not announcing individual tabs as disabled when their parent `tablist` was in a disabled state. The `disabledChanged` and `setTabs` methods in `tablist.base.ts` have been updated to correctly propagate the `aria-disabled` attribute to child tabs, ensuring proper screen reader announcements. A new test case in `tablist.spec.ts` verifies this behavior, thereby improving the **VoiceOver user experience** for disabled tab lists.

This commit introduces a **bug fix** to address **Node.js version compatibility** issues with the **Custom Elements Manifest (CEM) analyzer**. The change ensures that `parsedTypes` are now correctly written, resolving a problem where component metadata was not being generated accurately. This is a critical **maintenance fix** for the **Fluent UI web components** build process, guaranteeing that component type information is properly captured and available for downstream tooling and documentation.

This commit **fixes a bug** in the **Custom Elements Manifest (CEM) analyzer tool** that prevented it from **properly writing the `name` field** for web components. The fix is implemented by updating the `custom-elements-manifest.config.js` within the **`@fluentui/web-components`** package. Specifically, the configuration now **disables automatic `package.json` updates and `customElements` field generation**, and correctly sets the output directory. This **maintenance** work ensures the generated custom elements manifest is accurate and reliable, improving the overall metadata for Fluent UI web components.

This commit primarily **fixes rendering and functionality issues** within the **Fluent UI Web Components** for **vertical tablists** and the proper handling of **start and end slots** within tabs. It introduces a new utility function `isTab` to correctly identify tab elements, which is crucial for the refactored tab handling logic in `tablist.base.ts` that now uses `slottedTabs`. These **bug fixes** and **refactorings** ensure correct styling, indentation, and accessibility for complex tablist configurations, improving the overall robustness of the **Tab** and **Tablist components**. New Storybook examples and tests have been added to validate the corrected behavior, particularly for `data-hasIndent` in vertical tablists.

This commit delivers a **bug fix** for the **Fluent UI Web Components `dropdown` component**, resolving an issue where the internal listbox would occasionally gain focus unintentionally when a user tabbed away from the dropdown. The **fix** prevents this by explicitly setting the listbox's `tabIndex` to `-1` within its `connectedCallback` method, ensuring it is not part of the natural tab order. A **new test case** has been introduced in `dropdown.spec.ts` to ensure this correct focus management. This change significantly improves the **accessibility and user experience** of the `dropdown` component by maintaining expected tab order and focus behavior.

This commit introduces a **new Storybook example** for the **`Slider` component** within the **`web-components` package**. The example, added to `slider.stories.ts`, specifically demonstrates how to effectively display the `Slider`'s current value to users. This **enhancement to developer documentation** provides a practical guide for integrating this common UI pattern, improving the clarity and usability of the `Slider` component for developers.

This commit delivers an **accessibility fix** for the **Fluent UI web components**, specifically targeting the `Dialog` and `DialogBody` components. It **improves semantic structure** by updating dialog titles within story files from generic `div` elements to semantically appropriate `h2` tags, which are better interpreted by assistive technologies. Furthermore, `aria-label` attributes are now explicitly applied to the `fluent-dialog` component, providing a clear accessible name. This enhancement ensures that dialogs are more usable and compliant for users relying on screen readers and other accessibility tools.

This commit **improves accessibility** for the **`progress-bar` web component** by adding accessible labels to its Storybook stories. It introduces new HTML templates within `packages/web-components/src/progress-bar/progress-bar.stories.ts` to provide proper `aria-describedby` attributes for **validation progress bars**. This **bug fix** ensures that users relying on assistive technologies can correctly interpret the state and purpose of these progress indicators, enhancing the overall user experience for the **`progress-bar` component's documentation**.

This commit introduces a **new capability** and **bug fix** for the **`Drawer` component** within **Fluent UI Web Components**, enabling it to automatically close when an element slotted into its `close` slot is clicked. A `clickHandler` is implemented in `drawer-body.ts` and an event listener is added to the `close` slot in `drawer-body.template.ts` to trigger the drawer's dismissal. Additionally, a **refactoring** updates the `clickHandler` event type from `MouseEvent` to `PointerEvent` for both `DrawerBody` and `DialogBody` for improved consistency, with corresponding updates to the API documentation. This change simplifies the usage of the `Drawer` component by removing the need for consumers to manually attach close handlers, and is verified with new tests.

This commit implements a **breaking change** and **refactoring** within the **Fluent UI Web Components** library, specifically for the `DialogBody` and `Dialog` components. It **removes the default title actions** and the `noTitleAction` property, instead introducing a new `close` slot for explicitly placing a close button, which significantly improves **accessibility** and **customization** of dialog close mechanisms. Extensive updates to documentation, storybook examples, and component templates reflect this new slot-based approach, ensuring consumers adapt their implementations. Additionally, a new `isDialog` utility function is added to programmatically identify dialog elements, enhancing developer tooling.

This commit **introduces new Tree components** and their associated types within the **`@fluentui/web-components`** package. It **adds exports** for `BaseTree`, `Tree`, `TreeDefinition`, `TreeStyles`, and `TreeTemplate` to the main `packages/web-components/src/index.ts` file, making these new UI elements available for consumption. Concurrently, the **API documentation** in `packages/web-components/docs/web-components.api.md` is updated to reflect these additions, providing comprehensive details for developers. This work represents a **new capability**, enabling consumers to utilize the new **Tree component** and its related structures.

This commit delivers a **bug fix** to enhance the visual consistency and accessibility of **Fluent UI web components**. It specifically addresses issues where the `:focus-visible` state was not correctly applied or combined with other interactive states for **primary buttons** and **primary toggle buttons**. Modifications in `button.styles.ts` and `toggle-button.styles.ts` ensure that hover, active, and pressed styles correctly interact with the `:focus-visible` pseudo-class, preventing visual glitches. This improves the user experience for keyboard navigation and overall robustness of interactive UI elements within the web components library.

This commit provides a **bug fix** for the **Spinner component's Storybook documentation** within the `web-components` package. It addresses an issue where the `InvertedAppearance` story in `spinner.stories.ts` was not displaying correctly due to unintended theme application. The fix updates the story to use hardcoded background and foreground colors instead of CSS variables, ensuring the inverted spinner's appearance is accurately represented. This improves the reliability of the **component's visual documentation** and prevents misinterpretation during development and review.

This commit **fixes a styling bug** within **Storybook** that prevented dialog text from correctly applying themes. Previously, specific Storybook styles were overriding the intended theming for **dialog components**, leading to inconsistent visual presentation. This **bug fix** ensures that **dialog text** now properly respects and displays the configured themes when viewed in Storybook, improving the accuracy of component previews.

This commit introduces a **bug fix** to resolve a visual clipping issue within the **`dialog` component's Storybook stories**. Previously, the close button of the `NonModalWithNoTitleOrActions` story was getting cut off due to insufficient content height. A `render` function has been added to the `dialog.stories.ts` file, ensuring the story's content maintains a minimum height. This **maintenance** effort guarantees the correct and complete rendering of the non-modal dialog variant in its documentation, improving the clarity of the **`web-components` library**.

This commit introduces a **bug fix** for the **Fluent UI web components** library, specifically addressing the behavior of **alert dialogs**. Previously, these dialogs would not close when the escape key was pressed, leading to an inconsistent user experience. The change modifies `packages/web-components/src/dialog/dialog.template.ts` to remove the `preventDefault` call on the `cancel` event, thereby enabling **alert dialogs** to properly respond to the escape key. This **improves usability and accessibility** for users interacting with **alert dialogs** across applications utilizing the Fluent UI web components.

This commit **fixes** a theming inconsistency within the **Fluent UI web components Drawer** by **refactoring its Storybook stories**. It removes non-theming text by simplifying the HTML structure and consistently using `h2` tags for titles within `drawer.stories.ts`. Associated **styling adjustments** are applied in `drawer-body.styles.ts` to reset font, padding, and margin for slotted title elements, alongside minor CSS updates in `docs-root.css` for `h2` elements in Storybook documentation. This ensures the **Drawer component's examples** are properly themed and styled, improving consistency within Storybook.