diff --git a/site/source/design-system/accordion/index.tsx b/site/source/design-system/accordion/index.tsx
index 7e58dc00a..4a57696b8 100644
--- a/site/source/design-system/accordion/index.tsx
+++ b/site/source/design-system/accordion/index.tsx
@@ -7,6 +7,7 @@ import { animated, useSpring } from 'react-spring'
 import useMeasure from 'react-use-measure'
 import styled, { css } from 'styled-components'
 
+import { FocusStyle } from '../global-style'
 import chevronImg from './chevron.svg'
 
 export const Accordion = <T extends object>(props: AriaAccordionProps<T>) => {
@@ -24,7 +25,6 @@ export const Accordion = <T extends object>(props: AriaAccordionProps<T>) => {
 }
 
 const StyledAccordionGroup = styled.div`
-	overflow: hidden;
 	max-width: 100%;
 	${({ theme }) =>
 		css`
@@ -64,7 +64,7 @@ function AccordionItem<T>(props: AccordionItemProps<T>) {
 				</StyledButton>
 			</StyledTitle>
 			{/* @ts-ignore: https://github.com/pmndrs/react-spring/issues/1515 */}
-			<StyledContent {...regionProps} style={animatedStyle}>
+			<StyledContent {...regionProps} style={animatedStyle} hidden={!isOpen}>
 				<div ref={regionRef}>{item.props.children}</div>
 			</StyledContent>
 		</StyledAccordionItem>
@@ -101,7 +101,7 @@ const StyledButton = styled.button`
 		text-decoration: underline;
 	}
 	:focus {
-		outline: none;
+		${FocusStyle}
 	}
 `
 
@@ -118,7 +118,7 @@ const ChevronRightMedium = styled.img.attrs({ src: chevronImg })<Chevron>`
 		`}
 `
 
-const StyledContent = styled(animated.div)`
+const StyledContent = styled(animated.div)<{ $isOpen: boolean }>`
 	overflow: hidden;
 	> div {
 		margin: ${({ theme }) => theme.spacings.lg};
diff --git a/site/source/design-system/field/Radio/Radio.tsx b/site/source/design-system/field/Radio/Radio.tsx
index bcdf6dac2..5386c384b 100644
--- a/site/source/design-system/field/Radio/Radio.tsx
+++ b/site/source/design-system/field/Radio/Radio.tsx
@@ -21,7 +21,7 @@ export function Radio(props: RadioProps) {
 	return (
 		<RadioSkeleton role="radio" aria-atomic {...props}>
 			{!hideRadio && <RadioPoint />}
-			<LabelBody as="span" for={id} $hideRadio={hideRadio}>
+			<LabelBody as="span" htmlFor={id} $hideRadio={hideRadio}>
 				{children}
 			</LabelBody>
 		</RadioSkeleton>
@@ -40,7 +40,7 @@ export const RadioSkeleton = (props: RadioProps) => {
 	const { inputProps } = useRadio(ariaProps, state, ref)
 
 	return (
-		<Label $hideRadio={hideRadio} for={id} className={props.className}>
+		<Label $hideRadio={hideRadio} htmlFor={id} className={props.className}>
 			<InputRadio {...inputProps} className="sr-only" ref={ref} id={id} />
 			<VisibleRadio>{children}</VisibleRadio>
 		</Label>
@@ -122,7 +122,7 @@ export const VisibleRadio = styled.span`
 	}
 `
 
-const Label = styled.label<{ $hideRadio?: boolean; for?: string }>`
+const Label = styled.label<{ $hideRadio?: boolean; htmlFor?: string }>`
 	${({ $hideRadio }) =>
 		$hideRadio &&
 		css`
@@ -133,7 +133,10 @@ const Label = styled.label<{ $hideRadio?: boolean; for?: string }>`
 	}
 `
 
-export const LabelBody = styled(Body)<{ $hideRadio?: boolean; for?: string }>`
+export const LabelBody = styled(Body)<{
+	$hideRadio?: boolean
+	htmlFor?: string
+}>`
 	margin: ${({ theme }) => theme.spacings.xs} 0px;
 	margin-left: ${({ theme }) => theme.spacings.xxs};
 	${({ $hideRadio }) =>