Add closeButtonLabel to flyout

CHANGELOG.md

@@ -1,6 +1,6 @@
 ## [`master`](https://github.com/elastic/eui/tree/master)
 
-No public interface changes since `3.1.0`.
+- Added `closeButtonLabel` property to `EuiFlyout` ([#1031](https://github.com/elastic/eui/pull/1031))
 
 ## [`3.1.0`](https://github.com/elastic/eui/tree/v3.1.0)
 

src/components/flyout/flyout.js

@@ -26,7 +26,16 @@ export class EuiFlyout extends Component {
   };
 
   render() {
-    const { className, children, hideCloseButton, onClose, ownFocus, size, ...rest } = this.props;
+    const {
+      className,
+      children,
+      hideCloseButton,
+      onClose,
+      ownFocus,
+      size,
+      closeButtonLabel,
+      ...rest
+    } = this.props;
 
     const classes = classnames('euiFlyout', sizeToClassNameMap[size], className);
 
@@ -37,7 +46,7 @@ export class EuiFlyout extends Component {
           className="euiFlyout__closeButton"
           iconType="cross"
           color="text"
-          aria-label="Closes this dialog"
+          aria-label={closeButtonLabel}
           onClick={onClose}
           data-test-subj="euiFlyoutCloseButton"
         />
@@ -71,7 +80,7 @@ export class EuiFlyout extends Component {
       <span>
         {optionalOverlay}
         {/* Trap focus even when ownFocus={false}, otherwise closing the flyout won't return focus
-            to the originating button */}
+        to the originating button */}
         <FocusTrap
           focusTrapOptions={{
             fallbackFocus: () => this.flyout,
@@ -98,10 +107,15 @@ EuiFlyout.propTypes = {
    * Locks the mouse / keyboard focus to within the flyout
    */
   ownFocus: PropTypes.bool,
+  /**
+   * Specify an aria-label for the close button of the flyout.
+   */
+  closeButtonLabel: PropTypes.string,
 };
 
 EuiFlyout.defaultProps = {
   size: 'm',
   hideCloseButton: false,
   ownFocus: false,
+  closeButtonLabel: 'Closes this dialog',
 };

src/components/flyout/flyout.test.js

@@ -32,8 +32,32 @@ describe('EuiFlyout', () => {
       expect(component)
         .toMatchSnapshot();
     });
+
+    describe('closeButtonLabel', () => {
+      test('has a default label for the close button', () => {
+        const component = render(
+          <EuiFlyout
+            onClose={() => {}}
+          />
+        );
+        const label = component.find('[data-test-subj="euiFlyoutCloseButton"]').prop('aria-label');
+        expect(label).toBe('Closes this dialog');
+      });
+
+      test('has a default label for the close button', () => {
+        const component = render(
+          <EuiFlyout
+            onClose={() => {}}
+            closeButtonLabel="Closes specific flyout"
+          />
+        );
+        const label = component.find('[data-test-subj="euiFlyoutCloseButton"]').prop('aria-label');
+        expect(label).toBe('Closes specific flyout');
+      });
+    });
   });
 
+
   describe('size', () => {
     SIZES.forEach(size => {
       it(`${size} is rendered`, () => {

src/components/flyout/index.d.ts

@@ -10,6 +10,10 @@ declare module '@elastic/eui' {
      * Locks the mouse / keyboard focus to within the flyout
      */
     ownFocus?: boolean;
+    /**
+     * Specify an aria-label for the close button of the flyout.
+     */
+    closeButtonLabel?: string;
   }
 
   export const EuiFlyout: React.SFC<
@@ -25,4 +29,4 @@ declare module '@elastic/eui' {
   export const EuiFlyoutHeader: React.SFC<CommonProps & EuiFlyoutHeaderProps>;
 
   export const EuiFlyoutFooter: React.SFC<CommonProps>;
-}
+}