Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix(RadioGroup): omit rendering label when not given #2928

Merged
merged 1 commit into from
Nov 22, 2023
Merged

fix(RadioGroup): omit rendering label when not given #2928

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
22 changes: 13 additions & 9 deletions packages/dnb-eufemia/src/components/radio/RadioGroup.js
View file
Open in desktop
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
Open in desktop
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
Loading