chore: fixes the accessibility issue related to 'focus' (#1050)

ItshMoh · AceTheCreator · web-flow · commit fd34526120df · 2025-09-18T13:20:44.000+01:00
* Fixes the collapseButton focus.

* fixed the lint issue

---------

Co-authored-by: Cody's Dad &lt;40604284+AceTheCreator@users.noreply.github.com&gt;
diff --git a/library/src/components/CollapseButton.tsx b/library/src/components/CollapseButton.tsx
@@ -33,7 +33,7 @@ export const CollapseButton: React.FunctionComponent<Props> = ({
 }) => (
   <button
     {...rest}
-    className={`focus:outline-none ${rest.className}`}
+    className={`focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 ${rest.className ?? ''}`}
     type="button"
   >
     <div className="inline-block">{children}</div>

Original file line number	Diff line number	Diff line change
`@@ -33,7 +33,7 @@ export const CollapseButton: React.FunctionComponent<Props> = ({`
`33`	`33`	`}) => (`
`34`	`34`	`<button`
`35`	`35`	`{...rest}`
`36`		- className={`focus:outline-none ${rest.className}`}
	`36`	+ className={`focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 ${rest.className ?? ''}`}
`37`	`37`	`type="button"`
`38`	`38`	`>`
`39`	`39`	`<div className="inline-block">{children}</div>`