Skip to content

Commit 62e7c76

Browse files
Merge pull request #35 from jeffreylauwers/fix/timeinput-dateinput-button-accessible
fix(TimeInput,DateInput): klok- en kalenderknop volledig toegankelijk maken
2 parents 99f3619 + 3fa083e commit 62e7c76

8 files changed

Lines changed: 18 additions & 34 deletions

File tree

packages/components-react/src/DateInput/DateInput.test.tsx

Lines changed: 7 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -96,29 +96,24 @@ describe('DateInput', () => {
9696
expect(button).toHaveClass('dsn-button--icon-only');
9797
});
9898

99-
it('calendar button has tabIndex -1', () => {
100-
const { container } = render(<DateInput />);
101-
const button = container.querySelector('.dsn-date-input__button');
102-
expect(button).toHaveAttribute('tabindex', '-1');
103-
});
104-
10599
it('calendar button has type button', () => {
106100
const { container } = render(<DateInput />);
107101
const button = container.querySelector('.dsn-date-input__button');
108102
expect(button).toHaveAttribute('type', 'button');
109103
});
110104

111-
it('calendar button has aria-hidden', () => {
105+
it('calendar button is keyboard accessible (no tabIndex, no aria-hidden)', () => {
112106
const { container } = render(<DateInput />);
113107
const button = container.querySelector('.dsn-date-input__button');
114-
expect(button).toHaveAttribute('aria-hidden', 'true');
108+
expect(button).not.toHaveAttribute('tabindex');
109+
expect(button).not.toHaveAttribute('aria-hidden');
115110
});
116111

117-
it('calendar button has visually hidden label text', () => {
112+
it('calendar button has accessible label via dsn-button__label', () => {
118113
const { container } = render(<DateInput />);
119-
const hiddenLabel = container.querySelector('.dsn-button__label');
120-
expect(hiddenLabel).toBeInTheDocument();
121-
expect(hiddenLabel).toHaveTextContent('Datumkiezer openen');
114+
const label = container.querySelector('.dsn-button__label');
115+
expect(label).toBeInTheDocument();
116+
expect(label).toHaveTextContent('Datumkiezer openen');
122117
});
123118

124119
it('does not render calendar button when disabled', () => {

packages/components-react/src/DateInput/DateInput.tsx

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -92,8 +92,6 @@ export const DateInput = React.forwardRef<HTMLInputElement, DateInputProps>(
9292
iconStart={<Icon name="calendar-event" aria-hidden />}
9393
className="dsn-date-input__button"
9494
onClick={handleButtonClick}
95-
tabIndex={-1}
96-
aria-hidden="true"
9795
>
9896
Datumkiezer openen
9997
</Button>

packages/components-react/src/TimeInput/TimeInput.test.tsx

Lines changed: 7 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -95,29 +95,24 @@ describe('TimeInput', () => {
9595
expect(button).toHaveClass('dsn-button--icon-only');
9696
});
9797

98-
it('clock button has tabIndex -1', () => {
99-
const { container } = render(<TimeInput />);
100-
const button = container.querySelector('.dsn-time-input__button');
101-
expect(button).toHaveAttribute('tabindex', '-1');
102-
});
103-
10498
it('clock button has type button', () => {
10599
const { container } = render(<TimeInput />);
106100
const button = container.querySelector('.dsn-time-input__button');
107101
expect(button).toHaveAttribute('type', 'button');
108102
});
109103

110-
it('clock button has aria-hidden', () => {
104+
it('clock button is keyboard accessible (no tabIndex, no aria-hidden)', () => {
111105
const { container } = render(<TimeInput />);
112106
const button = container.querySelector('.dsn-time-input__button');
113-
expect(button).toHaveAttribute('aria-hidden', 'true');
107+
expect(button).not.toHaveAttribute('tabindex');
108+
expect(button).not.toHaveAttribute('aria-hidden');
114109
});
115110

116-
it('clock button has visually hidden label text', () => {
111+
it('clock button has accessible label via dsn-button__label', () => {
117112
const { container } = render(<TimeInput />);
118-
const hiddenLabel = container.querySelector('.dsn-button__label');
119-
expect(hiddenLabel).toBeInTheDocument();
120-
expect(hiddenLabel).toHaveTextContent('Tijdkiezer openen');
113+
const label = container.querySelector('.dsn-button__label');
114+
expect(label).toBeInTheDocument();
115+
expect(label).toHaveTextContent('Tijdkiezer openen');
121116
});
122117

123118
it('does not render clock button when disabled', () => {

packages/components-react/src/TimeInput/TimeInput.tsx

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -92,8 +92,6 @@ export const TimeInput = React.forwardRef<HTMLInputElement, TimeInputProps>(
9292
iconStart={<Icon name="clock" aria-hidden />}
9393
className="dsn-time-input__button"
9494
onClick={handleButtonClick}
95-
tabIndex={-1}
96-
aria-hidden="true"
9795
>
9896
Tijdkiezer openen
9997
</Button>

packages/storybook/src/DateInput.docs.md

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -28,8 +28,7 @@ De DateInput component is een gespecialiseerd invoerveld voor het invoeren van e
2828

2929
## Accessibility
3030

31-
- De kalenderknop heeft `aria-hidden="true"` en `tabIndex={-1}` — hij is niet bereikbaar via toetsenbord. Toetsenbordgebruikers kunnen de datumkiezer openen via de input zelf (spatiebalk of Enter in sommige browsers).
32-
- De knop bevat een visueel verborgen tekst "Datumkiezer openen" voor het geval de `aria-hidden` in de toekomst wordt aangepast.
31+
- De kalenderknop is volledig toetsenbord- en schermlezertoegankelijk. De tekst "Datumkiezer openen" is visueel verborgen via het `dsn-button__label` patroon, maar leesbaar voor screenreaders.
3332
- De extra `padding-inline-end` zorgt ervoor dat ingevoerde tekst nooit over de knop heen loopt.
3433
- In `disabled` en `read-only` staat wordt de kalenderknop niet getoond.
3534

packages/storybook/src/DateInput.stories.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,7 @@ const meta: Meta<typeof DateInput> = {
2323
.join(' ');
2424
const button =
2525
!args.disabled && !args.readOnly
26-
? '\n <!-- calendar button (niet-focusbaar, voor muisgebruikers) -->'
26+
? '\n <button type="button" class="dsn-button dsn-button--subtle dsn-button--size-small dsn-button--icon-only dsn-date-input__button">\n <svg class="dsn-icon" aria-hidden="true"><!-- icon --></svg>\n <span class="dsn-button__label">Datumkiezer openen</span>\n </button>'
2727
: '';
2828
return `<div class="dsn-date-input-wrapper">\n <input type="date" class="dsn-text-input dsn-date-input"${attrs ? ' ' + attrs : ''} />${button}\n</div>`;
2929
},

packages/storybook/src/TimeInput.docs.md

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -27,8 +27,7 @@ De TimeInput component is een gespecialiseerd invoerveld voor het invoeren van e
2727

2828
## Accessibility
2929

30-
- De klokknop heeft `aria-hidden="true"` en `tabIndex={-1}` — hij is niet bereikbaar via toetsenbord. Toetsenbordgebruikers kunnen de tijdkiezer openen via de input zelf (spatiebalk of Enter in sommige browsers).
31-
- De knop bevat een visueel verborgen tekst "Tijdkiezer openen" voor het geval de `aria-hidden` in de toekomst wordt aangepast.
30+
- De klokknop is volledig toetsenbord- en schermlezertoegankelijk. De tekst "Tijdkiezer openen" is visueel verborgen via het `dsn-button__label` patroon, maar leesbaar voor screenreaders.
3231
- De extra `padding-inline-end` zorgt ervoor dat ingevoerde tekst nooit over de knop heen loopt.
3332
- In `disabled` en `read-only` staat wordt de klokknop niet getoond.
3433

packages/storybook/src/TimeInput.stories.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,7 @@ const meta: Meta<typeof TimeInput> = {
2323
.join(' ');
2424
const button =
2525
!args.disabled && !args.readOnly
26-
? '\n <!-- clock button (niet-focusbaar, voor muisgebruikers) -->'
26+
? '\n <button type="button" class="dsn-button dsn-button--subtle dsn-button--size-small dsn-button--icon-only dsn-time-input__button">\n <svg class="dsn-icon" aria-hidden="true"><!-- icon --></svg>\n <span class="dsn-button__label">Tijdkiezer openen</span>\n </button>'
2727
: '';
2828
return `<div class="dsn-time-input-wrapper">\n <input type="time" class="dsn-text-input dsn-time-input"${attrs ? ' ' + attrs : ''} />${button}\n</div>`;
2929
},

0 commit comments

Comments
 (0)