Added aria-describedby to EuiFilePicker

CHANGELOG.md

@@ -1,5 +1,6 @@
 ## [`master`](https://github.com/elastic/eui/tree/master)
 
+- Added default prompt text to `aria-describedby` for `EuiFilePicker` ([#2919](https://github.com/elastic/eui/pull/2919))
 - Added SASS variables for text variants of the primary palette `$euiColorPrimaryText`, `$euiColorSecondaryText`, etc... Updated components to use these new variables. ([#2873](https://github.com/elastic/eui/pull/2873))
 - Updated SASS mixin `makeHighContrastColor()` to default `$background: $euiPageBackgroundColor` and `$ratio: 4.5`. Created `makeGraphicContrastColor()` for graphic specific contrast levels of 3.0. ([#2873](https://github.com/elastic/eui/pull/2873))
 

src/components/form/file_picker/__snapshots__/file_picker.test.tsx.snap

@@ -8,13 +8,15 @@ exports[`EuiFilePicker is rendered 1`] = `
     class="euiFilePicker__wrap"
   >
     <input
+      aria-describedby="htmlId"
       aria-label="aria-label"
       class="euiFilePicker__input"
       data-test-subj="test subject string"
       type="file"
     />
     <div
       class="euiFilePicker__prompt"
+      id="htmlId"
     >
       <div
         aria-hidden="true"

src/components/form/file_picker/file_picker.test.tsx

@@ -4,6 +4,11 @@ import { requiredProps } from '../../../test';
 
 import { EuiFilePicker } from './file_picker';
 
+// Mock the htmlIdGenerator to generate predictable ids for snapshot tests
+jest.mock('../../../services/accessibility/html_id_generator', () => ({
+  htmlIdGenerator: () => () => 'htmlId',
+}));
+
 describe('EuiFilePicker', () => {
   test('is rendered', () => {
     const component = render(<EuiFilePicker {...requiredProps} />);

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,
@@ -127,6 +128,12 @@ export class EuiFilePicker extends Component<EuiFilePickerProps> {
             ...rest
           } = this.props;
 
+          let promptId: string = htmlIdGenerator()();
+
+          if (id) {
+            promptId = `${id}-filePicker__prompt`;
+          }
+
           const isOverridingInitialPrompt = this.state.promptText != null;
 
           const normalFormControl = display === 'default';
@@ -198,10 +205,11 @@ export class EuiFilePicker extends Component<EuiFilePickerProps> {
                     onDragLeave={this.hideDrop}
                     onDrop={this.hideDrop}
                     disabled={disabled}
+                    aria-describedby={promptId}
                     {...rest}
                   />
                 </EuiValidatableControl>
-                <div className="euiFilePicker__prompt">
+                <div className="euiFilePicker__prompt" id={promptId}>
                   <EuiIcon
                     className="euiFilePicker__icon"
                     type="importAction"