Added aria-describedby to EuiFilePicker

CHANGELOG.md

@@ -1,5 +1,6 @@
 ## [`master`](https://github.com/elastic/eui/tree/master)
 
+- Added `aria-describedby` to EuiFilePicker ([#2919](https://github.com/elastic/eui/pull/2919))
 - Converted `EuiComboBox`, `EuiComboBoxInput`, `EuiComboBoxPill`, `EuiComboBoxOptionsList`, `EuiComboBoxOption`, and `EuiComboBoxTitle` to TypeScript ([#2838](https://github.com/elastic/eui/pull/2838))
 - Converted `EuiCodeEditor` to TypeScript ([#2836](https://github.com/elastic/eui/pull/2836))
 - Converted `EuiCode` and `EuiCodeBlock` and to TypeScript ([#2835](https://github.com/elastic/eui/pull/2835))

src-docs/src/views/form_controls/file_picker.js

@@ -64,6 +64,7 @@ export class FilePicker extends Component {
               ]}>
               <EuiFilePicker
                 id="asdf2"
+                aUniqueId="xzst21343"
                 multiple
                 initialPromptText="Select or drag and drop multiple files"
                 onChange={files => {

src/components/form/file_picker/file_picker.tsx

@@ -9,6 +9,7 @@ import { EuiProgress } from '../../progress';
 import { EuiIcon } from '../../icon';
 import { EuiI18n } from '../../i18n';
 import { EuiLoadingSpinner } from '../../loading';
+import { htmlIdGenerator } from '../../../services/accessibility/html_id_generator';
 
 const displayToClassNameMap = {
   default: null,
@@ -47,6 +48,7 @@ export interface EuiFilePickerProps
   isInvalid?: boolean;
   isLoading?: boolean;
   disabled?: boolean;
+  aUniqueId?: string;
 }
 
 export class EuiFilePicker extends Component<EuiFilePickerProps> {
@@ -118,6 +120,7 @@ export class EuiFilePicker extends Component<EuiFilePickerProps> {
             initialPromptText,
             className,
             disabled,
+            aUniqueId,
             compressed,
             onChange,
             isInvalid,
@@ -127,6 +130,12 @@ export class EuiFilePicker extends Component<EuiFilePickerProps> {
             ...rest
           } = this.props;
 
+          let UniqueId: string = htmlIdGenerator().toString();
+
+          if (aUniqueId) {
+            UniqueId = `${aUniqueId}-filePicker__prompt`;
+          }
+
           const isOverridingInitialPrompt = this.state.promptText != null;
 
           const normalFormControl = display === 'default';
@@ -199,9 +208,10 @@ export class EuiFilePicker extends Component<EuiFilePickerProps> {
                     onDrop={this.hideDrop}
                     disabled={disabled}
                     {...rest}
+                    aria-describedby={UniqueId}
                   />
                 </EuiValidatableControl>
-                <div className="euiFilePicker__prompt">
+                <div className="euiFilePicker__prompt" id={UniqueId}>
                   <EuiIcon
                     className="euiFilePicker__icon"
                     type="importAction"