[issue-4] - Fix accesibility issues AutoSuggest address component

app.amsterdam.json

@@ -19,6 +19,7 @@
     "reporterMailHandledNegativeContactEnabled": true,
     "showMainCategories": true,
     "showStandardTextAdminV2": true,
+    "showStandardTextAdminV1": false,
     "showThorButton": true,
     "showVulaanControls": true,
     "useProjectenSignalType": false,

src/components/Accordion/Accordion.test.tsx

@@ -0,0 +1,51 @@
+// SPDX-License-Identifier: MPL-2.0
+// Copyright (C) 2023 Gemeente Amsterdam
+import { render, screen } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+
+import { Accordion } from './Accordion'
+
+describe('Accordion', () => {
+  const mockOnToggle = jest.fn()
+  const props = {
+    id: 'testId',
+    title: 'Test Title',
+    count: 5,
+    onToggle: mockOnToggle,
+    children: <div>Test Content</div>,
+  }
+
+  afterEach(() => {
+    jest.resetAllMocks()
+  })
+
+  it('should render title and count', () => {
+    render(<Accordion {...props} />)
+
+    expect(screen.getByText(/Test Title/)).toBeInTheDocument()
+    expect(screen.getByText(/(5)/)).toBeInTheDocument()
+  })
+
+  it('should not render count', () => {
+    render(<Accordion {...props} count="" />)
+    expect(screen.getByText(/Test Title/)).toBeInTheDocument()
+    expect(screen.queryByText(/(5)/)).not.toBeInTheDocument()
+  })
+
+  it('should call onToggle and render children when button is clicked', () => {
+    render(<Accordion {...props} />)
+
+    userEvent.click(screen.getByText(/Test Title/))
+    expect(mockOnToggle).toHaveBeenCalledWith(true)
+    expect(screen.getByText(/Test Content/)).toBeInTheDocument()
+  })
+
+  it('should toggle open state when button is clicked twice', () => {
+    render(<Accordion {...props} />)
+
+    const button = screen.getByText(/Test Title/)
+    userEvent.click(button)
+    userEvent.click(button)
+    expect(mockOnToggle).toHaveBeenCalledWith(false)
+  })
+})

src/components/Accordion/Accordion.tsx

@@ -0,0 +1,50 @@
+/* SPDX-License-Identifier: MPL-2.0 */
+/* Copyright (C) 2023 Gemeente Amsterdam */
+import { useCallback, useState } from 'react'
+
+import { ChevronDown } from '@amsterdam/asc-assets'
+
+import { Button, ButtonContent, Content, Wrapper, Border } from './styled'
+
+type Props = {
+  id: string
+  title: string
+  count: number | string
+  onToggle?: (open: boolean) => void
+  children: React.ReactNode
+}
+
+export const Accordion = ({ children, count, title, id, onToggle }: Props) => {
+  const [open, setOpen] = useState(false)
+
+  const handleClick = useCallback(() => {
+    if (onToggle) {
+      onToggle(!open)
+    }
+    setOpen(!open)
+  }, [open, onToggle])
+
+  return (
+    <Wrapper isOpen={open}>
+      <Border isOpen={open}>
+        <Button
+          aria-controls={id}
+          aria-expanded={open}
+          type="button"
+          variant="textButton"
+          isOpen={open}
+          onClick={handleClick}
+        >
+          <ButtonContent>
+            {title}
+            {count ? ` (${count})` : ''}
+            <ChevronDown width={20} height={20} />
+          </ButtonContent>
+        </Button>
+        <Content isOpen={open} aria-labelledby={`label-${id}`} id={id}>
+          {children}
+        </Content>
+      </Border>
+    </Wrapper>
+  )
+}

src/components/Accordion/index.ts

@@ -0,0 +1 @@
+export { Accordion } from './Accordion'

src/components/Accordion/styled.ts

@@ -0,0 +1,64 @@
+/* SPDX-License-Identifier: MPL-2.0 */
+/* Copyright (C) 2023 Gemeente Amsterdam */
+import { Button as AscButton, themeSpacing } from '@amsterdam/asc-ui'
+import styled from 'styled-components'
+
+const darkBlue = '#102e62'
+export interface Props {
+  isOpen?: boolean
+}
+
+export const Wrapper = styled.div<Props>`
+  border: ${({ isOpen }) =>
+    isOpen ? `1px solid ${darkBlue}` : '1px solid transparent'};
+  margin-bottom: 4px;
+
+  &:hover {
+    border: 1px solid ${darkBlue};
+  }
+`
+
+export const Border = styled.div<Props>`
+  border: 1px solid transparent;
+
+  &:hover {
+    border: 1px solid ${darkBlue};
+  }
+`
+
+export const Button = styled(AscButton)<Props>`
+  width: 100%;
+  box-sizing: border-box;
+  font-size: 1.125rem;
+  font-family: 'Amsterdam Sans', sans-serif;
+  svg {
+    transform: rotate(${({ isOpen }) => (isOpen ? '180deg' : '0deg')});
+    transition: transform 0.3s ease;
+  }
+
+  &:hover {
+    color: ${darkBlue};
+  }
+`
+
+export const ButtonContent = styled.div`
+  box-sizing: border-box;
+  display: flex;
+  justify-content: space-between;
+  padding: ${themeSpacing(3, 4)};
+  text-align: left;
+  white-space: normal;
+  width: 100%;
+
+  &:hover {
+    svg path {
+      fill: ${darkBlue};
+    }
+  }
+`
+
+export const Content = styled.div<Props>`
+  transition: border-color 0.1s ease-in-out;
+  padding: ${themeSpacing(0, 4)};
+  display: ${({ isOpen }) => !isOpen && 'none'};
+`

src/components/AutoSuggest/AutoSuggest.test.tsx

@@ -25,7 +25,7 @@ const mockResponse = JSON.stringify(JSONResponse)
 const numOptionsDeterminer: AutoSuggestProps['numOptionsDeterminer'] = (data) =>
   data?.response?.docs?.length || 0
 const formatResponse: AutoSuggestProps['formatResponse'] = (requestData) =>
-  requestData?.response?.docs.map((result) => {
+  requestData?.response?.docs.map((result: any) => {
     const { id, weergavenaam } = result
     return {
       id,
@@ -73,7 +73,7 @@ describe('src/components/AutoSuggest', () => {
 
     expect(screen.getByRole('combobox')).toBeInTheDocument()
 
-    const input = screen.getByRole('textbox')
+    const input = screen.getByRole('combobox')
     expect(input).toBeInTheDocument()
     expect(input.getAttribute('aria-autocomplete')).toEqual('list')
     expect(input.getAttribute('id')).toBe('')
@@ -91,29 +91,29 @@ describe('src/components/AutoSuggest', () => {
 
     userEvent.click(searchInput)
 
-    expect(screen.getByRole('textbox')).toHaveFocus()
+    expect(screen.getByRole('combobox')).toHaveFocus()
   })
 
   it('should set an id on the input field', () => {
     const id = 'id'
     render(withAppContext(<AutoSuggest {...{ ...props, id }} />))
 
-    const input = screen.getByRole('textbox')
+    const input = screen.getByRole('combobox')
     expect(input).toBeInTheDocument()
     expect(input.getAttribute('id')).toEqual(id)
   })
 
   it('should disable the input field', () => {
     render(withAppContext(<AutoSuggest {...{ ...props, disabled: true }} />))
 
-    const input = screen.getByRole('textbox')
+    const input = screen.getByRole('combobox')
     expect(input).toBeInTheDocument()
     expect(input.hasAttribute('disabled')).toBe(true)
   })
 
   it('should request external service', async () => {
     render(withAppContext(<AutoSuggest {...props} />))
-    const input = screen.getByRole('textbox')
+    const input = screen.getByRole('combobox')
 
     userEvent.type(input, 'A')
 
@@ -160,7 +160,7 @@ describe('src/components/AutoSuggest', () => {
 
   it('should request external service with auth when configured', async () => {
     render(withAppContext(<AutoSuggest {...props} includeAuthHeaders={true} />))
-    const input = screen.getByRole('textbox')
+    const input = screen.getByRole('combobox')
     userEvent.type(input, 'Ams')
 
     act(() => {
@@ -183,7 +183,7 @@ describe('src/components/AutoSuggest', () => {
 
   it('should show a value without sending a request to the external service', async () => {
     const { rerender } = render(withAppContext(<AutoSuggest {...props} />))
-    const input = screen.getByRole('textbox') as HTMLInputElement
+    const input = screen.getByRole('combobox') as HTMLInputElement
 
     await screen.findByTestId('auto-suggest')
 
@@ -206,7 +206,7 @@ describe('src/components/AutoSuggest', () => {
 
   it('should render a list of suggestions', async () => {
     render(withAppContext(<AutoSuggest {...props} />))
-    const input = screen.getByRole('textbox')
+    const input = screen.getByRole('combobox')
 
     expect(screen.queryByTestId('suggest-list')).not.toBeInTheDocument()
 
@@ -221,7 +221,7 @@ describe('src/components/AutoSuggest', () => {
   describe('keyboard navigation', () => {
     it('ArrowUp key', async () => {
       render(withAppContext(<AutoSuggest {...props} />))
-      const input = screen.getByRole('textbox')
+      const input = screen.getByRole('combobox')
 
       userEvent.type(input, '{ArrowUp}')
 
@@ -250,7 +250,7 @@ describe('src/components/AutoSuggest', () => {
 
     it('ArrowDown key', async () => {
       render(withAppContext(<AutoSuggest {...props} />))
-      const input = screen.getByRole('textbox') as HTMLInputElement
+      const input = screen.getByRole('combobox') as HTMLInputElement
 
       await waitFor(() => {
         expect(input.getAttribute('aria-activedescendant')).toBeFalsy()
@@ -282,7 +282,7 @@ describe('src/components/AutoSuggest', () => {
 
     it('ArrowUp and ArrowDown cycle', async () => {
       render(withAppContext(<AutoSuggest {...props} />))
-      const input = screen.getByRole('textbox')
+      const input = screen.getByRole('combobox')
 
       expect(input.getAttribute('aria-activedescendant')).toBeFalsy()
 
@@ -328,7 +328,7 @@ describe('src/components/AutoSuggest', () => {
     it('Esc', async () => {
       const onClear = jest.fn()
       render(withAppContext(<AutoSuggest {...props} onClear={onClear} />))
-      const input = screen.getByRole('textbox') as HTMLInputElement
+      const input = screen.getByRole('combobox') as HTMLInputElement
 
       await waitFor(() => {
         userEvent.type(input, 'Boom')
@@ -373,7 +373,7 @@ describe('src/components/AutoSuggest', () => {
         withAppContext(<AutoSuggest {...props} />)
       )
 
-      const input = screen.getByRole('textbox') as HTMLInputElement
+      const input = screen.getByRole('combobox') as HTMLInputElement
 
       await waitFor(() => {
         userEvent.type(input, 'Boom')
@@ -413,7 +413,7 @@ describe('src/components/AutoSuggest', () => {
 
     it('Home', async () => {
       render(withAppContext(<AutoSuggest {...props} />))
-      const input = screen.getByRole('textbox')
+      const input = screen.getByRole('combobox')
 
       await waitFor(() => {
         userEvent.type(input, 'Niezel')
@@ -447,7 +447,7 @@ describe('src/components/AutoSuggest', () => {
 
     it('End', async () => {
       render(withAppContext(<AutoSuggest {...props} />))
-      const input = screen.getByRole('textbox')
+      const input = screen.getByRole('combobox')
       const value = 'Midden'
 
       await waitFor(() => {
@@ -541,7 +541,7 @@ describe('src/components/AutoSuggest', () => {
 
     it('Any key (yes, such a key exists)', async () => {
       render(withAppContext(<AutoSuggest {...props} />))
-      const input = screen.getByRole('textbox')
+      const input = screen.getByRole('combobox')
 
       await waitFor(() => {
         userEvent.type(input, 'Meeuwenlaan')
@@ -567,7 +567,7 @@ describe('src/components/AutoSuggest', () => {
 
   it('should call onSelect on item click', async () => {
     render(withAppContext(<AutoSuggest {...props} />))
-    const input = screen.getByRole('textbox') as HTMLInputElement
+    const input = screen.getByRole('combobox') as HTMLInputElement
 
     await waitFor(() => {
       userEvent.type(input, 'Rembrandt')
@@ -600,7 +600,7 @@ describe('src/components/AutoSuggest', () => {
 
     expect(screen.queryByTestId('clear-input')).not.toBeInTheDocument()
 
-    const input = screen.getByRole('textbox')
+    const input = screen.getByRole('combobox')
 
     await waitFor(() => {
       userEvent.type(input, 'Rembrandt')
@@ -625,7 +625,7 @@ describe('src/components/AutoSuggest', () => {
   it('calls onClear', async () => {
     const onClear = jest.fn()
     render(withAppContext(<AutoSuggest {...props} onClear={onClear} />))
-    const input = screen.getByRole('textbox')
+    const input = screen.getByRole('combobox')
 
     await waitFor(() => {
       userEvent.type(input, 'Rembrandt')
@@ -666,7 +666,7 @@ describe('src/components/AutoSuggest', () => {
 
     expect(onClear).toHaveBeenCalled()
 
-    expect(screen.getByRole('textbox')).toHaveFocus()
+    expect(screen.getByRole('combobox')).toHaveFocus()
   })
 
   it('focuses the input on clear', async () => {
@@ -686,14 +686,14 @@ describe('src/components/AutoSuggest', () => {
 
     userEvent.click(screen.getByTestId('clear-input'))
 
-    expect(screen.getByRole('textbox')).toHaveFocus()
+    expect(screen.getByRole('combobox')).toHaveFocus()
   })
 
   it('calls onData', async () => {
     const onData = jest.fn()
 
     render(withAppContext(<AutoSuggest {...props} onData={onData} />))
-    const input = screen.getByRole('textbox')
+    const input = screen.getByRole('combobox')
 
     userEvent.type(input, 'Rembrandt')
 
@@ -710,7 +710,7 @@ describe('src/components/AutoSuggest', () => {
 
   it('should work without onClear defined', async () => {
     render(withAppContext(<AutoSuggest {...props} />))
-    const input = screen.getByRole('textbox')
+    const input = screen.getByRole('combobox')
 
     userEvent.type(input, 'Rembrandt')
 
@@ -738,7 +738,7 @@ describe('src/components/AutoSuggest', () => {
 
     expect(onFocus).not.toHaveBeenCalled()
 
-    fireEvent.focus(screen.getByRole('textbox'))
+    fireEvent.focus(screen.getByRole('combobox'))
 
     expect(onFocus).toHaveBeenCalled()
   })