From 9d8b3c410cce929f254a6a3030e0af48be4cd709 Mon Sep 17 00:00:00 2001 From: "renovate[bot]" <29139614+renovate[bot]@users.noreply.github.com> Date: Tue, 3 Sep 2024 08:35:56 -0500 Subject: [PATCH 01/10] chore(deps): update slackapi/slack-github-action action to v1.27.0 (#17296) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com> --- .github/workflows/slack-announcement.yml | 2 +- .github/workflows/slack-build-notifications.yml | 4 ++-- .github/workflows/slack-office-hours-design.yml | 2 +- .github/workflows/slack-office-hours-dev.yml | 4 ++-- 4 files changed, 6 insertions(+), 6 deletions(-) diff --git a/.github/workflows/slack-announcement.yml b/.github/workflows/slack-announcement.yml index 7ca5f3f956dc..530d4861d357 100644 --- a/.github/workflows/slack-announcement.yml +++ b/.github/workflows/slack-announcement.yml @@ -37,7 +37,7 @@ jobs: steps: - name: Send slack announcement id: slack - uses: slackapi/slack-github-action@70cd7be8e40a46e8b0eced40b0de447bdb42f68e #v1.26.0 + uses: slackapi/slack-github-action@37ebaef184d7626c5f204ab8d3baff4262dd30f0 # v1.27.0 with: payload: | { diff --git a/.github/workflows/slack-build-notifications.yml b/.github/workflows/slack-build-notifications.yml index 6e770a08cb8f..d6e25bfa768a 100644 --- a/.github/workflows/slack-build-notifications.yml +++ b/.github/workflows/slack-build-notifications.yml @@ -24,7 +24,7 @@ jobs: steps: - name: Send custom JSON data to Slack id: slack-success - uses: slackapi/slack-github-action@70cd7be8e40a46e8b0eced40b0de447bdb42f68e #v1.26.0 + uses: slackapi/slack-github-action@37ebaef184d7626c5f204ab8d3baff4262dd30f0 # v1.27.0 with: payload: | { @@ -42,7 +42,7 @@ jobs: steps: - name: Send custom JSON data to Slack id: slack-failure - uses: slackapi/slack-github-action@70cd7be8e40a46e8b0eced40b0de447bdb42f68e #v1.26.0 + uses: slackapi/slack-github-action@37ebaef184d7626c5f204ab8d3baff4262dd30f0 # v1.27.0 with: payload: | { diff --git a/.github/workflows/slack-office-hours-design.yml b/.github/workflows/slack-office-hours-design.yml index 35ceb1a9ee07..14e25baac96c 100644 --- a/.github/workflows/slack-office-hours-design.yml +++ b/.github/workflows/slack-office-hours-design.yml @@ -13,7 +13,7 @@ jobs: steps: - name: Send custom JSON data to Slack workflow id: slack - uses: slackapi/slack-github-action@70cd7be8e40a46e8b0eced40b0de447bdb42f68e #v1.26.0 + uses: slackapi/slack-github-action@37ebaef184d7626c5f204ab8d3baff4262dd30f0 # v1.27.0 with: payload: | { diff --git a/.github/workflows/slack-office-hours-dev.yml b/.github/workflows/slack-office-hours-dev.yml index 82d23f9463e9..8ccb137db02a 100644 --- a/.github/workflows/slack-office-hours-dev.yml +++ b/.github/workflows/slack-office-hours-dev.yml @@ -12,7 +12,7 @@ jobs: steps: - name: Send custom JSON data to Slack workflow id: slack - uses: slackapi/slack-github-action@70cd7be8e40a46e8b0eced40b0de447bdb42f68e #v1.26.0 + uses: slackapi/slack-github-action@37ebaef184d7626c5f204ab8d3baff4262dd30f0 # v1.27.0 with: payload: | { @@ -105,7 +105,7 @@ jobs: steps: - name: Send custom JSON data to Slack workflow id: slack - uses: slackapi/slack-github-action@70cd7be8e40a46e8b0eced40b0de447bdb42f68e #v1.26.0 + uses: slackapi/slack-github-action@37ebaef184d7626c5f204ab8d3baff4262dd30f0 # v1.27.0 with: payload: | { From 3f338ce065633cc405199edd095d22e0369eb4f0 Mon Sep 17 00:00:00 2001 From: kennylam <909118+kennylam@users.noreply.github.com> Date: Tue, 3 Sep 2024 11:39:09 -0400 Subject: [PATCH 02/10] chore(actions): update image path in dev office hours slack block (#17306) --- .github/workflows/slack-office-hours-dev.yml | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/.github/workflows/slack-office-hours-dev.yml b/.github/workflows/slack-office-hours-dev.yml index 8ccb137db02a..e58ff9fbf766 100644 --- a/.github/workflows/slack-office-hours-dev.yml +++ b/.github/workflows/slack-office-hours-dev.yml @@ -34,7 +34,7 @@ jobs: }, { "type": "image", - "image_url": "https://carbondesignsystem.com/static/406b7e7bf6865c094dd9a7a0bcb8bd41/3cbba/light-getting-started-developers.png", + "image_url": "https://github.com/user-attachments/assets/e12fb5b9-9657-4e7b-b1a1-e1149cca8956", "alt_text": "A terminal prompt symbol" }, { @@ -127,7 +127,7 @@ jobs: }, { "type": "image", - "image_url": "https://carbondesignsystem.com/static/406b7e7bf6865c094dd9a7a0bcb8bd41/3cbba/light-getting-started-developers.png", + "image_url": "https://github.com/user-attachments/assets/e12fb5b9-9657-4e7b-b1a1-e1149cca8956", "alt_text": "A terminal prompt symbol" }, { @@ -191,4 +191,3 @@ jobs: env: SLACK_WEBHOOK_URL: ${{ secrets.SLACK_WEBHOOK_URL }} SLACK_WEBHOOK_TYPE: INCOMING_WEBHOOK - From 87eeed18ea32be4bbc6226a8f29ac51cbe7185e7 Mon Sep 17 00:00:00 2001 From: Nikhil Tomar <63502271+2nikhiltom@users.noreply.github.com> Date: Tue, 3 Sep 2024 22:58:28 +0530 Subject: [PATCH 03/10] fix(typescript): adds TypeScript types to ChatButton & Skeleton (#17316) * fix(17291): rename .js to .tsx for preserve file history * fix(typescript): adds TypeScript types to ChatButto & Skeleton --- ...on.Skeleton.js => ChatButton.Skeleton.tsx} | 19 ++- .../src/components/ChatButton/ChatButton.js | 109 ------------ .../src/components/ChatButton/ChatButton.tsx | 157 ++++++++++++++++++ .../ChatButton/{index.js => index.tsx} | 6 +- 4 files changed, 177 insertions(+), 114 deletions(-) rename packages/react/src/components/ChatButton/{ChatButton.Skeleton.js => ChatButton.Skeleton.tsx} (69%) delete mode 100644 packages/react/src/components/ChatButton/ChatButton.js create mode 100644 packages/react/src/components/ChatButton/ChatButton.tsx rename packages/react/src/components/ChatButton/{index.js => index.tsx} (55%) diff --git a/packages/react/src/components/ChatButton/ChatButton.Skeleton.js b/packages/react/src/components/ChatButton/ChatButton.Skeleton.tsx similarity index 69% rename from packages/react/src/components/ChatButton/ChatButton.Skeleton.js rename to packages/react/src/components/ChatButton/ChatButton.Skeleton.tsx index 8056365c7f4d..5e7a09d63da0 100644 --- a/packages/react/src/components/ChatButton/ChatButton.Skeleton.js +++ b/packages/react/src/components/ChatButton/ChatButton.Skeleton.tsx @@ -1,5 +1,5 @@ /** - * Copyright IBM Corp. 2022 + * Copyright IBM Corp. 2024 * * This source code is licensed under the Apache-2.0 license found in the * LICENSE file in the root directory of this source tree. @@ -9,8 +9,21 @@ import PropTypes from 'prop-types'; import React from 'react'; import cx from 'classnames'; import { usePrefix } from '../../internal/usePrefix'; - -const ChatButtonSkeleton = ({ className, size, ...rest }) => { +export interface ChatButtonSkeletonProps { + /** + * Specify an optional className to add. + */ + className?: string; + /** + * Specify the size of the `ChatButtonSkeleton`, from the following list of sizes: + */ + size?: 'sm' | 'md' | 'lg'; +} +const ChatButtonSkeleton = ({ + className, + size, + ...rest +}: ChatButtonSkeletonProps) => { const prefix = usePrefix(); const skeletonClasses = cx( className, diff --git a/packages/react/src/components/ChatButton/ChatButton.js b/packages/react/src/components/ChatButton/ChatButton.js deleted file mode 100644 index 6448fd2fa67d..000000000000 --- a/packages/react/src/components/ChatButton/ChatButton.js +++ /dev/null @@ -1,109 +0,0 @@ -/** - * Copyright IBM Corp. 2022 - * - * This source code is licensed under the Apache-2.0 license found in the - * LICENSE file in the root directory of this source tree. - */ - -import PropTypes from 'prop-types'; -import React from 'react'; -import classnames from 'classnames'; -import Button from '../Button'; -import { usePrefix } from '../../internal/usePrefix'; - -const ChatButton = React.forwardRef(function ChatButton( - { - className, - children, - disabled, - isQuickAction, - isSelected, - kind, - renderIcon, - size, - ...other - }, - ref -) { - const prefix = usePrefix(); - const classNames = classnames(className, { - [`${prefix}--chat-btn`]: true, - [`${prefix}--chat-btn--with-icon`]: renderIcon, - [`${prefix}--chat-btn--quick-action`]: isQuickAction, - [`${prefix}--chat-btn--quick-action--selected`]: isSelected, - }); - - const allowedSizes = ['sm', 'md', 'lg']; - - if (isQuickAction) { - kind = 'ghost'; - size = 'sm'; - } else { - // Do not allow size larger than `lg` - size = allowedSizes.includes(size) ? size : 'lg'; - } - - return ( - - ); -}); - -ChatButton.propTypes = { - /** - * Provide the contents of your Select - */ - children: PropTypes.node, - - /** - * Specify an optional className to be applied to the node containing the label and the select box - */ - className: PropTypes.string, - - /** - * Specify whether the `ChatButton` should be disabled - */ - disabled: PropTypes.bool, - - /** - * Specify whether the `ChatButton` should be rendered as a quick action button - */ - isQuickAction: PropTypes.bool, - - /** - * Specify whether the quick action `ChatButton` should be rendered as selected. This disables the input - */ - isSelected: PropTypes.bool, - - /** - * Specify the kind of `ChatButton` you want to create - */ - kind: PropTypes.oneOf([ - 'primary', - 'secondary', - 'danger', - 'ghost', - 'tertiary', - ]), - - /** - * Optional prop to specify an icon to be rendered. - * Can be a React component class - */ - renderIcon: PropTypes.oneOfType([PropTypes.func, PropTypes.object]), - - /** - * Specify the size of the `ChatButton`, from the following list of sizes: - */ - size: PropTypes.oneOf(['sm', 'md', 'lg']), -}; - -export default ChatButton; diff --git a/packages/react/src/components/ChatButton/ChatButton.tsx b/packages/react/src/components/ChatButton/ChatButton.tsx new file mode 100644 index 000000000000..304ff322365c --- /dev/null +++ b/packages/react/src/components/ChatButton/ChatButton.tsx @@ -0,0 +1,157 @@ +/** + * Copyright IBM Corp. 2024 + * + * This source code is licensed under the Apache-2.0 license found in the + * LICENSE file in the root directory of this source tree. + */ + +import React, { type ComponentType, type FunctionComponent } from 'react'; +import PropTypes from 'prop-types'; +import classnames from 'classnames'; +import Button from '../Button'; +import { usePrefix } from '../../internal/usePrefix'; + +export type ChatButtonKind = + | 'primary' + | 'secondary' + | 'danger' + | 'ghost' + | 'tertiary'; +export type ChatButtonSize = 'sm' | 'md' | 'lg'; + +export interface ChatButtonProps + extends React.ButtonHTMLAttributes { + /** + * Provide the contents of your Select + */ + children?: React.ReactNode; + /** + * Specify an optional className to be applied to the node containing the label and the select box + */ + className?: string; + /** + * Specify whether the `ChatButton` should be disabled + */ + disabled?: boolean; + /** + * Specify whether the `ChatButton` should be rendered as a quick action button + */ + isQuickAction?: boolean; + /** + * Specify whether the quick action `ChatButton` should be rendered as selected. This disables the input + */ + isSelected?: boolean; + /** + * Specify the kind of `ChatButton` you want to create + */ + kind?: ChatButtonKind; + /** + * Optional prop to specify an icon to be rendered. + * Can be a React component class + */ + renderIcon?: ComponentType | FunctionComponent; + /** + * Specify the size of the `ChatButton`, from the following list of sizes: + */ + size?: ChatButtonSize; +} + +const ChatButton = React.forwardRef( + function ChatButton( + { + className, + children, + disabled, + isQuickAction, + isSelected, + kind, + renderIcon, + size, + ...other + }: ChatButtonProps, + ref + ) { + const prefix = usePrefix(); + const classNames = classnames(className, { + [`${prefix}--chat-btn`]: true, + [`${prefix}--chat-btn--with-icon`]: renderIcon, + [`${prefix}--chat-btn--quick-action`]: isQuickAction, + [`${prefix}--chat-btn--quick-action--selected`]: isSelected, + }); + + const allowedSizes: ChatButtonSize[] = ['sm', 'md', 'lg']; + + if (isQuickAction) { + kind = 'ghost'; + size = 'sm'; + } else { + // Do not allow size larger than `lg` + size = allowedSizes.includes(size as ChatButtonSize) ? size : 'lg'; + } + + return ( + + ); + } +); + +ChatButton.propTypes = { + /** + * Provide the contents of your Select + */ + children: PropTypes.node, + + /** + * Specify an optional className to be applied to the node containing the label and the select box + */ + className: PropTypes.string, + + /** + * Specify whether the `ChatButton` should be disabled + */ + disabled: PropTypes.bool, + + /** + * Specify whether the `ChatButton` should be rendered as a quick action button + */ + isQuickAction: PropTypes.bool, + + /** + * Specify whether the quick action `ChatButton` should be rendered as selected. This disables the input + */ + isSelected: PropTypes.bool, + + /** + * Specify the kind of `ChatButton` you want to create + */ + kind: PropTypes.oneOf([ + 'primary', + 'secondary', + 'danger', + 'ghost', + 'tertiary', + ]), + + /** + * Optional prop to specify an icon to be rendered. + * Can be a React component class + */ + // @ts-expect-error: PropTypes are not expressive enough to cover this case + renderIcon: PropTypes.oneOfType([PropTypes.func, PropTypes.object]), + + /** + * Specify the size of the `ChatButton`, from the following list of sizes: + */ + size: PropTypes.oneOf(['sm', 'md', 'lg']), +}; + +export default ChatButton; diff --git a/packages/react/src/components/ChatButton/index.js b/packages/react/src/components/ChatButton/index.tsx similarity index 55% rename from packages/react/src/components/ChatButton/index.js rename to packages/react/src/components/ChatButton/index.tsx index 9dfac91ff41b..4fab393a8433 100644 --- a/packages/react/src/components/ChatButton/index.js +++ b/packages/react/src/components/ChatButton/index.tsx @@ -1,12 +1,14 @@ /** - * Copyright IBM Corp. 2022 + * Copyright IBM Corp. 2024 * * This source code is licensed under the Apache-2.0 license found in the * LICENSE file in the root directory of this source tree. */ import ChatButton from './ChatButton'; +import { type ChatButtonProps } from './ChatButton'; +import { type ChatButtonSkeletonProps } from './ChatButton.Skeleton'; export default ChatButton; -export { ChatButton }; +export { ChatButton, type ChatButtonProps, type ChatButtonSkeletonProps }; export { default as ChatButtonSkeleton } from './ChatButton.Skeleton'; From a67a647a49a3315479e454c5c1df23c3bceea536 Mon Sep 17 00:00:00 2001 From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com> Date: Tue, 3 Sep 2024 13:17:37 -0500 Subject: [PATCH 04/10] chore(deps): bump github/codeql-action from 3.26.5 to 3.26.6 (#17313) Bumps [github/codeql-action](https://github.com/github/codeql-action) from 3.26.5 to 3.26.6. - [Release notes](https://github.com/github/codeql-action/releases) - [Changelog](https://github.com/github/codeql-action/blob/main/CHANGELOG.md) - [Commits](https://github.com/github/codeql-action/compare/2c779ab0d087cd7fe7b826087247c2c81f27bfa6...4dd16135b69a43b6c8efb853346f8437d92d3c93) --- updated-dependencies: - dependency-name: github/codeql-action dependency-type: direct:production update-type: version-update:semver-patch ... Signed-off-by: dependabot[bot] Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> --- .github/workflows/codeql-analysis.yml | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/.github/workflows/codeql-analysis.yml b/.github/workflows/codeql-analysis.yml index 3486dd59f21c..24f8ee8811c8 100644 --- a/.github/workflows/codeql-analysis.yml +++ b/.github/workflows/codeql-analysis.yml @@ -24,9 +24,9 @@ jobs: # Initializes the CodeQL tools for scanning. - name: Initialize CodeQL - uses: github/codeql-action/init@2c779ab0d087cd7fe7b826087247c2c81f27bfa6 # v3.26.5 + uses: github/codeql-action/init@4dd16135b69a43b6c8efb853346f8437d92d3c93 # v3.26.6 with: languages: javascript - name: Perform CodeQL Analysis - uses: github/codeql-action/analyze@2c779ab0d087cd7fe7b826087247c2c81f27bfa6 # v3.26.5 + uses: github/codeql-action/analyze@4dd16135b69a43b6c8efb853346f8437d92d3c93 # v3.26.6 From ef5aa5712b9c0157a75b7b0eae8a4971e487a8ac Mon Sep 17 00:00:00 2001 From: "renovate[bot]" <29139614+renovate[bot]@users.noreply.github.com> Date: Tue, 3 Sep 2024 14:32:05 -0400 Subject: [PATCH 05/10] chore(deps): update github/codeql-action action to v3.26.6 (#17302) Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com> Co-authored-by: kennylam <909118+kennylam@users.noreply.github.com> From 3fcf7393910ef305aa53526e4acdf919184acbc3 Mon Sep 17 00:00:00 2001 From: Lee Chase Date: Tue, 3 Sep 2024 19:39:49 +0100 Subject: [PATCH 06/10] feat: allow grid offset and start reset (#16479) * feat: allow grid offset and start reset * chore(storybook): remove unneeded example stories --------- Co-authored-by: kennylam <909118+kennylam@users.noreply.github.com> Co-authored-by: Alison Joseph --- packages/react/src/components/Grid/Column.tsx | 10 +++++++--- 1 file changed, 7 insertions(+), 3 deletions(-) diff --git a/packages/react/src/components/Grid/Column.tsx b/packages/react/src/components/Grid/Column.tsx index b4219696ab0b..cb635977585b 100644 --- a/packages/react/src/components/Grid/Column.tsx +++ b/packages/react/src/components/Grid/Column.tsx @@ -385,12 +385,16 @@ function getClassNameForBreakpoints( if (typeof breakpoint === 'object') { const { span, offset, start, end } = breakpoint; - if (typeof offset === 'number' && offset > 0) { - classNames.push(`${prefix}--${name}:col-start-${offset + 1}`); + if (typeof offset === 'number') { + classNames.push( + `${prefix}--${name}:col-start-${offset > 0 ? offset + 1 : 'auto'}` + ); } if (typeof start === 'number') { - classNames.push(`${prefix}--${name}:col-start-${start}`); + classNames.push( + `${prefix}--${name}:col-start-${start ? start : 'auto'}` + ); } if (typeof end === 'number') { From 13fe26e4f9b7945083327fe481271c3162896a57 Mon Sep 17 00:00:00 2001 From: Gururaj J <89023023+Gururajj77@users.noreply.github.com> Date: Thu, 5 Sep 2024 00:52:52 +0530 Subject: [PATCH 07/10] fix: fixed focus flow issue on right arrow press (#17317) * fix: fixed focus flow issue on right arrow press * fix: reverted to check lastChild instead of querying * fix: added deleted comments * test: added tests for child focus --- .../src/components/TreeView/TreeNode.tsx | 35 +++++++--- .../src/components/TreeView/TreeView-test.js | 68 +++++++++++++++++++ 2 files changed, 93 insertions(+), 10 deletions(-) diff --git a/packages/react/src/components/TreeView/TreeNode.tsx b/packages/react/src/components/TreeView/TreeNode.tsx index a7135cbbd7ee..a2ba25a8d627 100644 --- a/packages/react/src/components/TreeView/TreeNode.tsx +++ b/packages/react/src/components/TreeView/TreeNode.tsx @@ -14,6 +14,7 @@ import React, { useEffect, useRef, useState, + MutableRefObject, } from 'react'; import { keys, match, matches } from '../../internal/keyboard'; import { useControllableState } from '../../internal/useControllableState'; @@ -114,7 +115,7 @@ const TreeNode = React.forwardRef( value, ...rest }, - ref + forwardedRef ) => { // These are provided by the parent TreeView component const depth = propDepth as number; @@ -136,9 +137,20 @@ const TreeNode = React.forwardRef( ? controllableExpandedState : uncontrollableExpandedState; - const currentNode = useRef(null); + const currentNode = useRef(null); const currentNodeLabel = useRef(null); const prefix = usePrefix(); + + const setRefs = (element: HTMLLIElement | null) => { + currentNode.current = element; + if (typeof forwardedRef === 'function') { + forwardedRef(element); + } else if (forwardedRef) { + (forwardedRef as MutableRefObject).current = + element; + } + }; + const nodesWithProps = React.Children.map(children, (node) => { if (React.isValidElement(node)) { return React.cloneElement(node, { @@ -196,14 +208,15 @@ const TreeNode = React.forwardRef( event.stopPropagation(); } if (match(event, keys.ArrowLeft)) { - const findParentTreeNode = (node) => { + const findParentTreeNode = (node: Element | null): Element | null => { + if (!node) return null; if (node.classList.contains(`${prefix}--tree-parent-node`)) { return node; } if (node.classList.contains(`${prefix}--tree`)) { return null; } - return findParentTreeNode(node.parentNode); + return findParentTreeNode(node.parentElement); }; if (children && expanded) { if (!enableTreeviewControllable) { @@ -215,7 +228,12 @@ const TreeNode = React.forwardRef( * When focus is on a leaf node or a closed parent node, move focus to * its parent node (unless its depth is level 1) */ - findParentTreeNode(currentNode.current?.parentNode)?.focus(); + const parentNode = findParentTreeNode( + currentNode.current?.parentElement || null + ); + if (parentNode instanceof HTMLElement) { + parentNode.focus(); + } } } if (children && match(event, keys.ArrowRight)) { @@ -307,13 +325,11 @@ const TreeNode = React.forwardRef( onFocus: handleFocusEvent, onKeyDown: handleKeyDown, role: 'treeitem', - // @ts-ignore - ref: currentNode, }; if (!children) { return ( -
  • +
  • {/* @ts-ignore - TS cannot be sure `className` exists on Icon props */} {Icon && } @@ -323,8 +339,7 @@ const TreeNode = React.forwardRef( ); } return ( - // eslint-disable-next-line jsx-a11y/role-supports-aria-props -
  • +
  • {/* https://github.com/carbon-design-system/carbon/pull/6008#issuecomment-675738670 */} {/* eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions */} diff --git a/packages/react/src/components/TreeView/TreeView-test.js b/packages/react/src/components/TreeView/TreeView-test.js index 9ab5e46aad14..1f246c1c4289 100644 --- a/packages/react/src/components/TreeView/TreeView-test.js +++ b/packages/react/src/components/TreeView/TreeView-test.js @@ -228,4 +228,72 @@ describe('TreeView', () => { ); }); }); + + describe('keyboard navigation', () => { + it('should focus on the first child node when right arrow is pressed on an expanded parent node', async () => { + const user = userEvent.setup(); + + render( + + + + + + + ); + + const parentNode = screen.getByTestId('parent-node'); + const childNode1 = screen.getByTestId('child-node-1'); + + // Focus on the parent node + parentNode.focus(); + expect(parentNode).toHaveFocus(); + + // Press the right arrow key + await user.keyboard('[ArrowRight]'); + + // Check if the first child node is now focused + expect(childNode1).toHaveFocus(); + }); + + it('should expand a collapsed parent node when right arrow is pressed', async () => { + const user = userEvent.setup(); + + render( + + + + + + ); + + const parentNode = screen.getByTestId('parent-node'); + + // Initially, the parent node should not be expanded + expect(parentNode).not.toHaveAttribute('aria-expanded', 'true'); + + // Focus on the parent node + parentNode.focus(); + expect(parentNode).toHaveFocus(); + + // Press the right arrow key + await user.keyboard('[ArrowRight]'); + + // The parent node should now be expanded + expect(parentNode).toHaveAttribute('aria-expanded', 'true'); + + // Now that the parent is expanded, we can check for the child node + const childNode = screen.getByTestId('child-node'); + expect(childNode).toBeInTheDocument(); + + // The parent node should still have focus + expect(parentNode).toHaveFocus(); + }); + }); }); From 813e69e3d0f70248d41b8c4f48ff22e79aa6647f Mon Sep 17 00:00:00 2001 From: Guilherme Datilio Ribeiro Date: Wed, 4 Sep 2024 16:54:58 -0300 Subject: [PATCH 08/10] fix: fixed labels (#17315) --- .../src/components/Toggle/Toggle.stories.js | 17 ++++++++++++----- 1 file changed, 12 insertions(+), 5 deletions(-) diff --git a/packages/react/src/components/Toggle/Toggle.stories.js b/packages/react/src/components/Toggle/Toggle.stories.js index 6ed8692fdfd1..f1bc3b3bcbb0 100644 --- a/packages/react/src/components/Toggle/Toggle.stories.js +++ b/packages/react/src/components/Toggle/Toggle.stories.js @@ -17,7 +17,7 @@ export default { export const Default = () => ( ( export const SmallToggle = () => ( ( ); export const Playground = (args) => ( - + ); Playground.argTypes = { @@ -85,9 +92,9 @@ Playground.argTypes = { export const WithAccessibleLabels = () => ( - + - +
    From 6dd3d88812f65311335e5b3933b74f11ef744a23 Mon Sep 17 00:00:00 2001 From: Taylor Jones Date: Wed, 4 Sep 2024 15:19:03 -0500 Subject: [PATCH 09/10] fix(storybook): use plex in manager ui even when not installed (#17308) Co-authored-by: kennylam <909118+kennylam@users.noreply.github.com> --- packages/react/.storybook/manager-head.html | 10 ++++++++++ 1 file changed, 10 insertions(+) diff --git a/packages/react/.storybook/manager-head.html b/packages/react/.storybook/manager-head.html index fbf0af6d7d50..46fe3d3be92d 100644 --- a/packages/react/.storybook/manager-head.html +++ b/packages/react/.storybook/manager-head.html @@ -74,6 +74,16 @@ type="text/javascript" async="async"> + + +