Add closeButtonLabel to flyout (#1031)

* Add closeButtonLabel to flyout * Add CHANGELOG entry * Add feedback * Rename test
elastic · Jul 26, 2018 · 7f34483 · 7f34483
1 parent 77fbc8c
commit 7f34483
Show file tree

Hide file tree

Showing 4 changed files with 47 additions and 4 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,5 +1,6 @@
 ## [`master`](https://github.com/elastic/eui/tree/master)
 
+- Added `closeButtonAriaLabel` property to `EuiFlyout` ([#1031](https://github.com/elastic/eui/pull/1031))
 - Added types for `EuiToast`, `EuiGlobalToastList`, and `EuiGlobalToastListItem` ([#1045](https://github.com/elastic/eui/pull/1045))
 - Added a handful of third-party logos to `EuiIcon` ([#1033](https://github.com/elastic/eui/pull/1033))
 

diff --git a/src/components/flyout/flyout.js b/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,
+      closeButtonAriaLabel,
+      ...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={closeButtonAriaLabel}
           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
+   */
+  closeButtonAriaLabel: PropTypes.string,
 };
 
 EuiFlyout.defaultProps = {
   size: 'm',
   hideCloseButton: false,
   ownFocus: false,
+  closeButtonAriaLabel: 'Closes this dialog',
 };
diff --git a/src/components/flyout/flyout.test.js b/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('sets a custom label for the close button', () => {
+        const component = render(
+          <EuiFlyout
+            onClose={() => {}}
+            closeButtonAriaLabel="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`, () => {

diff --git a/src/components/flyout/index.d.ts b/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.
+     */
+    closeButtonAriaLabel?: 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>;
-}
+}