From 3d27f22453fccc14bc7babc0b7cac21b5b60da5f Mon Sep 17 00:00:00 2001
From: Meriemu <me.achemlal@gmail.com>
Date: Mon, 12 Aug 2024 11:16:01 +0200
Subject: [PATCH] feat(redmine 1306629): accessibility correction focusable
 element (#212)

---
 .changeset/proud-clocks-try.md                               | 5 +++++
 .../src/Components/DropdownButton/DropdownButton.tsx         | 1 +
 .../__snapshots__/DropdownButton.test.tsx.snap               | 5 ++---
 3 files changed, 8 insertions(+), 3 deletions(-)
 create mode 100644 .changeset/proud-clocks-try.md

diff --git a/.changeset/proud-clocks-try.md b/.changeset/proud-clocks-try.md
new file mode 100644
index 00000000..2be3133e
--- /dev/null
+++ b/.changeset/proud-clocks-try.md
@@ -0,0 +1,5 @@
+---
+'@smile/haring-react': minor
+---
+
+correction to accessibility error dropdownMenu (focusable element)
diff --git a/packages/haring-react/src/Components/DropdownButton/DropdownButton.tsx b/packages/haring-react/src/Components/DropdownButton/DropdownButton.tsx
index d3e29e36..11f95ae4 100644
--- a/packages/haring-react/src/Components/DropdownButton/DropdownButton.tsx
+++ b/packages/haring-react/src/Components/DropdownButton/DropdownButton.tsx
@@ -38,6 +38,7 @@ export function DropdownButton(props: IDropdownButtonProps): ReactElement {
       <Menu.Target>
         {buttonComponent ?? (
           <Button
+            component="span"
             data-testid="button"
             rightSection={opened ? <CaretUp /> : <CaretDown />}
           >
diff --git a/packages/haring-react/src/Components/DropdownButton/__snapshots__/DropdownButton.test.tsx.snap b/packages/haring-react/src/Components/DropdownButton/__snapshots__/DropdownButton.test.tsx.snap
index a712f194..f24a64af 100644
--- a/packages/haring-react/src/Components/DropdownButton/__snapshots__/DropdownButton.test.tsx.snap
+++ b/packages/haring-react/src/Components/DropdownButton/__snapshots__/DropdownButton.test.tsx.snap
@@ -12,7 +12,7 @@ exports[`DropdownButton matches snapshot 1`] = `
   >
     @media (max-width: 35.99375em) {.mantine-visible-from-xs {display: none !important;}}@media (min-width: 36em) {.mantine-hidden-from-xs {display: none !important;}}@media (max-width: 47.99375em) {.mantine-visible-from-sm {display: none !important;}}@media (min-width: 48em) {.mantine-hidden-from-sm {display: none !important;}}@media (max-width: 61.99375em) {.mantine-visible-from-md {display: none !important;}}@media (min-width: 62em) {.mantine-hidden-from-md {display: none !important;}}@media (max-width: 74.99375em) {.mantine-visible-from-lg {display: none !important;}}@media (min-width: 75em) {.mantine-hidden-from-lg {display: none !important;}}@media (max-width: 87.99375em) {.mantine-visible-from-xl {display: none !important;}}@media (min-width: 88em) {.mantine-hidden-from-xl {display: none !important;}}
   </style>
-  <button
+  <span
     aria-controls=":r0:-dropdown"
     aria-expanded="false"
     aria-haspopup="menu"
@@ -21,7 +21,6 @@ exports[`DropdownButton matches snapshot 1`] = `
     data-with-right-section="true"
     id=":r0:-target"
     style="--button-color: var(--mantine-color-white);"
-    type="button"
   >
     <span
       class="m_80f1301b mantine-Button-inner"
@@ -48,6 +47,6 @@ exports[`DropdownButton matches snapshot 1`] = `
         </svg>
       </span>
     </span>
-  </button>
+  </span>
 </div>
 `;