Skip to content

Commit

Permalink
fix(RadioGroup): omit rendering label when not given
Browse files Browse the repository at this point in the history
  • Loading branch information
@tujoworker
tujoworker committed Nov 21, 2023
1 parent a4c1fb0 commit ee813bc
Show file tree
Hide file tree
Showing 3 changed files with 251 additions and 202 deletions.
22 changes: 13 additions & 9 deletions packages/dnb-eufemia/src/components/radio/RadioGroup.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -232,11 +232,13 @@ export default class RadioGroup extends React.PureComponent {
onChange: this.onChangeHandler,
}

const Fieldset = label ? 'fieldset' : 'div'

return (
<RadioGroupContext.Provider value={context}>
<div className={classes}>
<AlignmentHelper />
<fieldset>
<Fieldset>
<Flex.Container
align="baseline"
direction={
Expand All @@ -246,13 +248,15 @@ export default class RadioGroup extends React.PureComponent {
}
spacing={vertical ? 'x-small' : undefined}
>
<FormLabel
element="legend"
id={id + '-label'}
srOnly={label_sr_only}
>
{label}
</FormLabel>
{label && (
<FormLabel
element="legend"
id={id + '-label'}
srOnly={label_sr_only}
>
{label}
</FormLabel>
)}

<span
id={id}
Expand Down Expand Up @@ -287,7 +291,7 @@ export default class RadioGroup extends React.PureComponent {
/>
</span>
</Flex.Container>
</fieldset>
</Fieldset>
</div>
</RadioGroupContext.Provider>
)
Expand Down
194 changes: 1 addition & 193 deletions packages/dnb-eufemia/src/components/radio/__tests__/Radio.test.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
*
*/

import { fireEvent, render, cleanup } from '@testing-library/react'
import { fireEvent, render } from '@testing-library/react'
import React from 'react'
import { axeComponent, loadScss } from '../../../core/jest/jestSetup'
import Radio, { RadioProps } from '../Radio'
Expand Down Expand Up @@ -104,8 +104,6 @@ describe('Radio component', () => {
// re-render + still false
fireEvent.click(document.querySelector('button#rerender'))
expect(document.querySelector('input').checked).toBe(false)

cleanup()
}

TestStates(<ControlledVsUncontrolled />)
Expand Down Expand Up @@ -173,173 +171,6 @@ describe('Radio component', () => {
})
})

describe('Radio group component', () => {
it('has to set correct value using keys', () => {
const my_event = jest.fn()
render(
<Radio.Group
label="Label"
name="group"
id="group"
on_change={my_event}
>
<Radio id="radio-1" label="Radio 1" value="first" />
<Radio id="radio-2" label="Radio 2" value="second" checked />
</Radio.Group>
)
fireEvent.click(document.querySelectorAll('input')[0])
expect(my_event.mock.calls.length).toBe(1)
expect(my_event.mock.calls[0][0].value).toBe('first')

fireEvent.click(document.querySelectorAll('input')[1])
expect(my_event.mock.calls.length).toBe(2)
expect(my_event.mock.calls[1][0].value).toBe('second')
})

it('will disable a single button within a group', () => {
render(
<Radio.Group>
<Radio disabled />
</Radio.Group>
)

expect(document.querySelector('input[disabled]')).toBeInTheDocument()
})

it('will disable a single button, defined in the group', () => {
render(
<Radio.Group disabled>
<Radio />
</Radio.Group>
)

expect(document.querySelector('input[disabled]')).toBeInTheDocument()
})

it('will overwrite "disable" state, defined in the group', () => {
render(
<Radio.Group disabled>
<Radio disabled={false} />
<Radio disabled />
</Radio.Group>
)

expect(document.querySelectorAll('input')[0]).not.toHaveAttribute(
'disabled'
)
expect(document.querySelectorAll('input')[1]).toHaveAttribute(
'disabled'
)
})

it('should support spacing props', () => {
render(
<Radio.Group top="2rem">
<Radio id="radio-1" label="Radio 1" value="first" />
<Radio id="radio-2" label="Radio 2" value="second" checked />
</Radio.Group>
)

const element = document.querySelector('.dnb-radio-group')

expect(Array.from(element.classList)).toEqual([
'dnb-radio-group',
'dnb-radio-group--row',
'dnb-form-component',
'dnb-space__top--large',
])
})

it('should inherit formElement vertical label', () => {
render(
<Provider formElement={{ label_direction: 'vertical' }}>
<Radio.Group label="Label" name="group" id="group">
<Radio id="radio-1" label="Radio 1" value="first" />
<Radio id="radio-2" label="Radio 2" value="second" checked />
</Radio.Group>
</Provider>
)

const element = document.querySelector('.dnb-radio-group')
const attributes = Array.from(element.attributes).map(
(attr) => attr.name
)

expect(attributes).toEqual(['class'])
expect(Array.from(element.classList)).toEqual([
'dnb-radio-group',
'dnb-radio-group--row',
'dnb-form-component',
])
expect(
Array.from(
document.querySelector('.dnb-radio-group .dnb-flex-container')
.classList
)
).toEqual([
'dnb-space',
'dnb-flex-container',
'dnb-flex-container--direction-vertical',
'dnb-flex-container--justify-flex-start',
'dnb-flex-container--align-baseline',
'dnb-flex-container--spacing-small',
'dnb-flex-container--wrap',
'dnb-flex-container--divider-space',
])
expect(
Array.from(document.querySelector('.dnb-flex-container').classList)
).toEqual([
'dnb-space',
'dnb-flex-container',
'dnb-flex-container--direction-vertical',
'dnb-flex-container--justify-flex-start',
'dnb-flex-container--align-baseline',
'dnb-flex-container--spacing-small',
'dnb-flex-container--wrap',
'dnb-flex-container--divider-space',
])
})

it('should support vertical label', () => {
const { rerender } = render(
<Radio.Group label="Label" vertical>
<Radio />
</Radio.Group>
)

const element = document.querySelector('.dnb-radio-group')
const flexElement = element.querySelector('.dnb-flex-container')

expect(Array.from(flexElement.classList)).toEqual([
'dnb-space',
'dnb-flex-container',
'dnb-flex-container--direction-vertical',
'dnb-flex-container--justify-flex-start',
'dnb-flex-container--align-baseline',
'dnb-flex-container--spacing-x-small',
'dnb-flex-container--wrap',
'dnb-flex-container--divider-space',
])

rerender(
<Radio.Group label="Label" label_direction="vertical">
<Radio />
</Radio.Group>
)

expect(Array.from(flexElement.classList)).toEqual([
'dnb-space',
'dnb-flex-container',
'dnb-flex-container--direction-vertical',
'dnb-flex-container--justify-flex-start',
'dnb-flex-container--align-baseline',
'dnb-flex-container--spacing-small',
'dnb-flex-container--wrap',
'dnb-flex-container--divider-space',
])
})
})

describe('Radio ARIA', () => {
it('should validate with ARIA rules for Radio', async () => {
const Comp = render(<Radio {...props} />)
Expand All @@ -354,29 +185,6 @@ describe('Radio ARIA', () => {
).toHaveNoViolations()
})

it('should validate with ARIA rules for Radio.Group', async () => {
const Comp = render(
<Radio.Group
label="Label"
name="group"
id="group"
on_change={jest.fn()}
>
<Radio id="radio-1" label="Radio 1" value="first" />
<Radio id="radio-2" label="Radio 2" value="second" checked />
</Radio.Group>
)
expect(
await axeComponent(Comp, {
rules: {
// NVDA fix
// because of the role="radio", we have to allow this
'aria-allowed-role': { enabled: false },
},
})
).toHaveNoViolations()
})

it('gets valid ref element', () => {
let ref: React.RefObject<HTMLInputElement>

Expand Down
Loading

0 comments on commit ee813bc

Please sign in to comment.