Merge pull request #35 from jeffreylauwers/fix/timeinput-dateinput-button-accessible

fix(TimeInput,DateInput): klok- en kalenderknop volledig toegankelijk maken

Author: jeffreylauwers

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

@@ -96,29 +96,24 @@ describe('DateInput', () => {
       expect(button).toHaveClass('dsn-button--icon-only');
     });
 
-    it('calendar button has tabIndex -1', () => {
-      const { container } = render(<DateInput />);
-      const button = container.querySelector('.dsn-date-input__button');
-      expect(button).toHaveAttribute('tabindex', '-1');
-    });
-
     it('calendar button has type button', () => {
       const { container } = render(<DateInput />);
       const button = container.querySelector('.dsn-date-input__button');
       expect(button).toHaveAttribute('type', 'button');
     });
 
-    it('calendar button has aria-hidden', () => {
+    it('calendar button is keyboard accessible (no tabIndex, no aria-hidden)', () => {
       const { container } = render(<DateInput />);
       const button = container.querySelector('.dsn-date-input__button');
-      expect(button).toHaveAttribute('aria-hidden', 'true');
+      expect(button).not.toHaveAttribute('tabindex');
+      expect(button).not.toHaveAttribute('aria-hidden');
     });
 
-    it('calendar button has visually hidden label text', () => {
+    it('calendar button has accessible label via dsn-button__label', () => {
       const { container } = render(<DateInput />);
-      const hiddenLabel = container.querySelector('.dsn-button__label');
-      expect(hiddenLabel).toBeInTheDocument();
-      expect(hiddenLabel).toHaveTextContent('Datumkiezer openen');
+      const label = container.querySelector('.dsn-button__label');
+      expect(label).toBeInTheDocument();
+      expect(label).toHaveTextContent('Datumkiezer openen');
     });
 
     it('does not render calendar button when disabled', () => {

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

@@ -92,8 +92,6 @@ export const DateInput = React.forwardRef<HTMLInputElement, DateInputProps>(
             iconStart={<Icon name="calendar-event" aria-hidden />}
             className="dsn-date-input__button"
             onClick={handleButtonClick}
-            tabIndex={-1}
-            aria-hidden="true"
           >
             Datumkiezer openen
           </Button>

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

@@ -95,29 +95,24 @@ describe('TimeInput', () => {
       expect(button).toHaveClass('dsn-button--icon-only');
     });
 
-    it('clock button has tabIndex -1', () => {
-      const { container } = render(<TimeInput />);
-      const button = container.querySelector('.dsn-time-input__button');
-      expect(button).toHaveAttribute('tabindex', '-1');
-    });
-
     it('clock button has type button', () => {
       const { container } = render(<TimeInput />);
       const button = container.querySelector('.dsn-time-input__button');
       expect(button).toHaveAttribute('type', 'button');
     });
 
-    it('clock button has aria-hidden', () => {
+    it('clock button is keyboard accessible (no tabIndex, no aria-hidden)', () => {
       const { container } = render(<TimeInput />);
       const button = container.querySelector('.dsn-time-input__button');
-      expect(button).toHaveAttribute('aria-hidden', 'true');
+      expect(button).not.toHaveAttribute('tabindex');
+      expect(button).not.toHaveAttribute('aria-hidden');
     });
 
-    it('clock button has visually hidden label text', () => {
+    it('clock button has accessible label via dsn-button__label', () => {
       const { container } = render(<TimeInput />);
-      const hiddenLabel = container.querySelector('.dsn-button__label');
-      expect(hiddenLabel).toBeInTheDocument();
-      expect(hiddenLabel).toHaveTextContent('Tijdkiezer openen');
+      const label = container.querySelector('.dsn-button__label');
+      expect(label).toBeInTheDocument();
+      expect(label).toHaveTextContent('Tijdkiezer openen');
     });
 
     it('does not render clock button when disabled', () => {

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

@@ -92,8 +92,6 @@ export const TimeInput = React.forwardRef<HTMLInputElement, TimeInputProps>(
             iconStart={<Icon name="clock" aria-hidden />}
             className="dsn-time-input__button"
             onClick={handleButtonClick}
-            tabIndex={-1}
-            aria-hidden="true"
           >
             Tijdkiezer openen
           </Button>

packages/storybook/src/DateInput.docs.md

@@ -28,8 +28,7 @@ De DateInput component is een gespecialiseerd invoerveld voor het invoeren van e
 
 ## Accessibility
 
-- 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).
-- De knop bevat een visueel verborgen tekst "Datumkiezer openen" voor het geval de `aria-hidden` in de toekomst wordt aangepast.
+- De kalenderknop is volledig toetsenbord- en schermlezertoegankelijk. De tekst "Datumkiezer openen" is visueel verborgen via het `dsn-button__label` patroon, maar leesbaar voor screenreaders.
 - De extra `padding-inline-end` zorgt ervoor dat ingevoerde tekst nooit over de knop heen loopt.
 - In `disabled` en `read-only` staat wordt de kalenderknop niet getoond.
 

packages/storybook/src/DateInput.stories.tsx

@@ -23,7 +23,7 @@ const meta: Meta<typeof DateInput> = {
           .join(' ');
         const button =
           !args.disabled && !args.readOnly
-            ? '\n  <!-- calendar button (niet-focusbaar, voor muisgebruikers) -->'
+            ? '\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>'
             : '';
         return `<div class="dsn-date-input-wrapper">\n  <input type="date" class="dsn-text-input dsn-date-input"${attrs ? ' ' + attrs : ''} />${button}\n</div>`;
       },

packages/storybook/src/TimeInput.docs.md

@@ -27,8 +27,7 @@ De TimeInput component is een gespecialiseerd invoerveld voor het invoeren van e
 
 ## Accessibility
 
-- 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).
-- De knop bevat een visueel verborgen tekst "Tijdkiezer openen" voor het geval de `aria-hidden` in de toekomst wordt aangepast.
+- De klokknop is volledig toetsenbord- en schermlezertoegankelijk. De tekst "Tijdkiezer openen" is visueel verborgen via het `dsn-button__label` patroon, maar leesbaar voor screenreaders.
 - De extra `padding-inline-end` zorgt ervoor dat ingevoerde tekst nooit over de knop heen loopt.
 - In `disabled` en `read-only` staat wordt de klokknop niet getoond.
 

packages/storybook/src/TimeInput.stories.tsx

@@ -23,7 +23,7 @@ const meta: Meta<typeof TimeInput> = {
           .join(' ');
         const button =
           !args.disabled && !args.readOnly
-            ? '\n  <!-- clock button (niet-focusbaar, voor muisgebruikers) -->'
+            ? '\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>'
             : '';
         return `<div class="dsn-time-input-wrapper">\n  <input type="time" class="dsn-text-input dsn-time-input"${attrs ? ' ' + attrs : ''} />${button}\n</div>`;
       },