diff --git a/packages/components/src/components/code-snippet/_code-snippet.scss b/packages/components/src/components/code-snippet/_code-snippet.scss index 61ab65af2b86..0a8aad352479 100644 --- a/packages/components/src/components/code-snippet/_code-snippet.scss +++ b/packages/components/src/components/code-snippet/_code-snippet.scss @@ -188,6 +188,12 @@ order: 1; overflow-y: auto; transition: max-height $duration--moderate-01 motion(standard, productive); + + &:focus { + @include focus-outline('outline'); + + outline-offset: 0; + } } // expanded snippet container diff --git a/packages/components/src/components/file-uploader/_file-uploader.scss b/packages/components/src/components/file-uploader/_file-uploader.scss index bb4b63e24c7e..e7109e8eb95d 100644 --- a/packages/components/src/components/file-uploader/_file-uploader.scss +++ b/packages/components/src/components/file-uploader/_file-uploader.scss @@ -272,7 +272,6 @@ } .#{$prefix}--file__state-container .#{$prefix}--file-complete { - cursor: pointer; fill: $interactive-04; &:focus { @@ -318,6 +317,9 @@ } .#{$prefix}--file__drop-container { + @include button-reset; + @include type-style('body-short-01'); + display: flex; overflow: hidden; height: rem(96px); diff --git a/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap b/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap index 65f5ad6452ff..c1b1e660483a 100644 --- a/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap +++ b/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap @@ -2756,7 +2756,6 @@ Map { "multiple": false, "onAddFiles": [Function], "pattern": ".[0-9a-z]+$", - "tabIndex": 0, }, "propTypes": Object { "accept": Object { @@ -2789,15 +2788,14 @@ Map { "onAddFiles": Object { "type": "func", }, - "pattern": Object { - "type": "string", + "onClick": Object { + "type": "func", }, - "role": Object { + "pattern": Object { "type": "string", }, - "tabIndex": Object { - "type": "number", - }, + "role": [Function], + "tabIndex": [Function], }, }, "FileUploaderItem" => Object { @@ -2872,6 +2870,9 @@ Map { "invalid": Object { "type": "bool", }, + "name": Object { + "type": "string", + }, "status": Object { "args": Array [ Array [ diff --git a/packages/react/src/components/CodeSnippet/CodeSnippet.js b/packages/react/src/components/CodeSnippet/CodeSnippet.js index 31b29f9023b8..f5bc7562aed7 100644 --- a/packages/react/src/components/CodeSnippet/CodeSnippet.js +++ b/packages/react/src/components/CodeSnippet/CodeSnippet.js @@ -224,10 +224,14 @@ function CodeSnippet({
{name}

{ diff --git a/packages/react/src/components/FileUploader/FileUploaderDropContainer.js b/packages/react/src/components/FileUploader/FileUploaderDropContainer.js index 442e660c34a4..ed1527722f1b 100644 --- a/packages/react/src/components/FileUploader/FileUploaderDropContainer.js +++ b/packages/react/src/components/FileUploader/FileUploaderDropContainer.js @@ -11,6 +11,8 @@ import classNames from 'classnames'; import { keys, matches } from '../../internal/keyboard'; import uniqueId from '../../tools/uniqueId'; import { usePrefix } from '../../internal/usePrefix'; +import { composeEventHandlers } from '../../tools/events'; +import deprecate from '../../prop-types/deprecate'; function FileUploaderDropContainer({ accept, @@ -21,22 +23,23 @@ function FileUploaderDropContainer({ multiple, name, onAddFiles, + onClick, pattern, - role, - tabIndex, ...rest }) { const prefix = usePrefix(); const inputRef = useRef(null); const { current: uid } = useRef(id || uniqueId()); const [isActive, setActive] = useState(false); - const labelClasses = classNames(`${prefix}--file-browse-btn`, { - [`${prefix}--file-browse-btn--disabled`]: disabled, - }); - const dropareaClasses = classNames(`${prefix}--file__drop-container`, { - [`${prefix}--file__drop-container--drag-over`]: isActive, - [className]: className, - }); + const dropareaClasses = classNames( + `${prefix}--file__drop-container`, + `${prefix}--file-browse-btn`, + { + [`${prefix}--file__drop-container--drag-over`]: isActive, + [`${prefix}--file-browse-btn--disabled`]: disabled, + [className]: className, + } + ); /** * Filters the array of added files based on file type restrictions @@ -72,6 +75,12 @@ function FileUploaderDropContainer({ return onAddFiles(event, { addedFiles }); } + const handleClick = () => { + if (!disabled) { + inputRef.current.click(); + } + }; + return (
- {/* eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions */} -