refactor: Add an aria-label and aria-checked

[wit03]

          _:hammer_and_wrench: Refactor suggestion_

Consider enhancing accessibility and error handling.

The overall structure of the component is well-implemented, following React and TypeScript best practices. However, there are a couple of areas where we could improve:

1. Accessibility: The component could benefit from additional ARIA attributes to enhance screen reader support.
2. Error Handling: The current implementation doesn't show how errors from the handleChangeApplicationCategory function are handled.

Here are some suggestions to address these points:

1. Enhance accessibility:

   • Add an aria-label to the Disclosure.Button:

     <Disclosure.Button
       aria-label="Toggle application category filter"
       // ... other props
     >

   • Add aria-checked attribute to the Checkbox component:

     <Checkbox
       // ... other props
       aria-checked={checkBox.applicationCategory.includes(item.name)}
     />

2. Improve error handling:

   • Consider wrapping the handleChangeApplicationCategory call in a try-catch block:

     onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
       try {
         handleChangeApplicationCategory(e.target.value);
       } catch (error) {
         console.error('Failed to update application category:', error);
         // Optionally, update some error state here
       }
     }}

These changes will improve the component's robustness and accessibility.

Originally posted by @coderabbitai[bot] in #46 (comment)