Making aria-label required for select component (#611)

* made aria-label required for select component

* omiting aria-label from the HTMLAttributes inheritance

packages/libs/react-ui/src/components/Select/Select.stories.tsx

@@ -46,6 +46,7 @@ export const Dynamic: Story = {
     const [value, setValue] = useState<string>('1');
     return (
       <Select
+        ariaLabel={'select'}
         icon={SystemIcon[icon]}
         onChange={(e) => {
           console.log('clicked on', e.target.value);

packages/libs/react-ui/src/components/Select/Select.test.tsx

@@ -6,7 +6,7 @@ import React from 'react';
 describe('Select', () => {
   it('renders without errors', () => {
     const { getByTestId } = render(
-      <Select value="1" onChange={() => {}}>
+      <Select value="1" onChange={() => {}} ariaLabel="select">
         <Option value="1">Option 1</Option>
         <Option value="2">Option 2</Option>
       </Select>,
@@ -18,7 +18,7 @@ describe('Select', () => {
 
   it('renders the provided children options', () => {
     const { getByTestId } = render(
-      <Select value="1" onChange={() => {}}>
+      <Select value="1" onChange={() => {}} ariaLabel="select">
         <Option value="1">Option 1</Option>
         <Option value="2">Option 2</Option>
       </Select>,
@@ -37,7 +37,7 @@ describe('Select', () => {
   it('invokes the onChange event handler when an option is selected', () => {
     const handleChange = jest.fn();
     const { getByTestId } = render(
-      <Select value="1" onChange={handleChange}>
+      <Select value="1" onChange={handleChange} ariaLabel="select">
         <Option value="1">Option 1</Option>
         <Option value="2">Option 2</Option>
       </Select>,
@@ -54,7 +54,7 @@ describe('Select', () => {
 
   it('disables the select element when disabled prop is true', () => {
     const { getByTestId } = render(
-      <Select value="1" onChange={() => {}} disabled>
+      <Select value="1" onChange={() => {}} disabled ariaLabel="select">
         <Option value="1">Option 1</Option>
         <Option value="2">Option 2</Option>
       </Select>,
@@ -71,7 +71,7 @@ describe('Select', () => {
   it('renders an icon when the "icon" prop is provided', () => {
     const IconMock = jest.fn(() => <span className="icon">User</span>);
     const { getByTestId, getByText } = render(
-      <Select value="1" onChange={() => {}} icon={IconMock}>
+      <Select value="1" onChange={() => {}} icon={IconMock} ariaLabel="select">
         <Option value="1">Option 1</Option>
         <Option value="2">Option 2</Option>
       </Select>,

packages/libs/react-ui/src/components/Select/Select.tsx

@@ -12,13 +12,17 @@ import classNames from 'classnames';
 import React, { FC, forwardRef } from 'react';
 
 export interface ISelectProps
-  extends Omit<React.HTMLAttributes<HTMLSelectElement>, 'as' | 'className'> {
+  extends Omit<
+    React.HTMLAttributes<HTMLSelectElement>,
+    'aria-label' | 'as' | 'className'
+  > {
   children: React.ReactNode;
   icon?: (typeof SystemIcon)[keyof typeof SystemIcon];
   disabled?: boolean;
   value: string[] | string | number;
   onChange: React.ChangeEventHandler<HTMLSelectElement>;
   ref?: React.ForwardedRef<HTMLSelectElement>;
+  ariaLabel: string;
 }
 
 export const Select: FC<ISelectProps> = forwardRef<
@@ -30,6 +34,7 @@ export const Select: FC<ISelectProps> = forwardRef<
     icon: Icon,
     disabled = false,
     children,
+    ariaLabel,
     ...rest
   },
   ref,
@@ -49,6 +54,7 @@ export const Select: FC<ISelectProps> = forwardRef<
           </span>
         )}
         <select
+          aria-label={ariaLabel}
           ref={ref}
           className={selectClass}
           disabled={Boolean(disabled)}