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 */}
-