Globally improve accessibility for screen reader users (#12969)

feat(a11y): Globally improve accessibility for screen reader users

react/features/base/ui/components/web/Select.tsx

@@ -28,6 +28,12 @@ interface ISelectProps {
      */
     error?: boolean;
 
+    /**
+     * Id of the <select> element.
+     * Necessary for screen reader users, to link the label and error to the select.
+     */
+    id: string;
+
     /**
      * Label to be displayed above the select.
      */
@@ -140,6 +146,7 @@ const Select = ({
     className,
     disabled,
     error,
+    id,
     label,
     onChange,
     options,
@@ -149,11 +156,17 @@ const Select = ({
 
     return (
         <div className = { classes.container }>
-            {label && <span className = { cx(classes.label, isMobile && 'is-mobile') }>{label}</span>}
+            {label && <label
+                className = { cx(classes.label, isMobile && 'is-mobile') }
+                htmlFor = { id } >
+                {label}
+            </label>}
             <div className = { classes.selectContainer }>
                 <select
+                    aria-describedby = { bottomLabel ? `${id}-description` : undefined }
                     className = { cx(classes.select, isMobile && 'is-mobile', className, error && 'error') }
                     disabled = { disabled }
+                    id = { id }
                     onChange = { onChange }
                     value = { value }>
                     {options.map(option => (<option
@@ -167,7 +180,9 @@ const Select = ({
                     src = { IconArrowDown } />
             </div>
             {bottomLabel && (
-                <span className = { cx(classes.bottomLabel, isMobile && 'is-mobile', error && 'error') }>
+                <span
+                    className = { cx(classes.bottomLabel, isMobile && 'is-mobile', error && 'error') }
+                    id = { `${id}-description` }>
                     {bottomLabel}
                 </span>
             )}