betagouv
/
mon-entreprise
mirror of https://github.com/betagouv/mon-entreprise
1
0
Fork 0
Code Releases Activity

Ajoute un style focus à accordion, correction d'un attribut `for` > `htmlFor` (#2438) 

fix: Ajoute un style focus à accordion + corrige un attribut
pull/2444/head
Benjamin Arias 2023-01-04 13:51:42 +01:00 committed by GitHub
parent 650c13872b
commit 767b8f0101
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 11 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
site/source/design-system/accordion/index.tsx
View File

@ -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};

11
site/source/design-system/field/Radio/Radio.tsx
View File

@ -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 }) =>