Allow custom messages on DismissButton (#2868)

* Allow custom messages on DismissButton

* Update packages/@react-aria/overlays/test/DismissButton.test.tsx

Co-authored-by: Daniel Lu <[email protected]>

Co-authored-by: Daniel Lu <[email protected]>

Author: snowystinger

packages/@react-aria/overlays/package.json

@@ -25,6 +25,7 @@
     "@react-stately/overlays": "^3.1.5",
     "@react-types/button": "^3.4.3",
     "@react-types/overlays": "^3.5.3",
+    "@react-types/shared": "^3.11.1",
     "dom-helpers": "^3.3.1"
   },
   "peerDependencies": {

packages/@react-aria/overlays/src/DismissButton.tsx

@@ -10,13 +10,15 @@
  * governing permissions and limitations under the License.
  */
 
+import {AriaLabelingProps, DOMProps} from '@react-types/shared';
 // @ts-ignore
 import intlMessages from '../intl/*.json';
 import React from 'react';
+import {useLabels} from '@react-aria/utils';
 import {useMessageFormatter} from '@react-aria/i18n';
 import {VisuallyHidden} from '@react-aria/visually-hidden';
 
-interface DismissButtonProps {
+interface DismissButtonProps extends AriaLabelingProps, DOMProps {
   /** Called when the dismiss button is activated. */
   onDismiss?: () => void
 }
@@ -27,8 +29,11 @@ interface DismissButtonProps {
  * affordance to do so.
  */
 export function DismissButton(props: DismissButtonProps) {
-  let {onDismiss} = props;
+  let {onDismiss, ...otherProps} = props;
   let formatMessage = useMessageFormatter(intlMessages);
+
+  let labels = useLabels(otherProps, formatMessage('dismiss'));
+
   let onClick = () => {
     if (onDismiss) {
       onDismiss();
@@ -38,8 +43,8 @@ export function DismissButton(props: DismissButtonProps) {
   return (
     <VisuallyHidden>
       <button
+        {...labels}
         tabIndex={-1}
-        aria-label={formatMessage('dismiss')}
         onClick={onClick} />
     </VisuallyHidden>
   );

packages/@react-aria/overlays/test/DismissButton.test.tsx

@@ -0,0 +1,51 @@
+/*
+ * Copyright 2020 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+import {DismissButton} from '..';
+import React from 'react';
+import {render} from '@testing-library/react';
+
+
+describe('DismissButton', function () {
+  it('should have a default aria-label', function () {
+    let {getByRole} = render(<DismissButton />);
+    expect(getByRole('button', {hidden: true})).toHaveAttribute('aria-label', 'Dismiss');
+  });
+
+  it('should accept an aria-label', function () {
+    let {getByRole} = render(<DismissButton aria-label="foo" />);
+    expect(getByRole('button', {hidden: true})).toHaveAttribute('aria-label', 'foo');
+  });
+
+  it('should accept an aria-labelledby', function () {
+    let {getByRole} = render(
+      <>
+        <span id="span-id">bar</span>
+        <DismissButton aria-labelledby="span-id" />
+      </>
+    );
+    expect(getByRole('button', {hidden: true})).toHaveAttribute('aria-labelledby', 'span-id');
+    expect(getByRole('button', {hidden: true})).not.toHaveAttribute('aria-label');
+  });
+
+  it('should accept an aria-labelledby and aria-label', function () {
+    let {getByRole} = render(
+      <>
+        <span id="span-id">bar</span>
+        <DismissButton aria-labelledby="span-id" aria-label="foo" id="self" />
+      </>
+    );
+    expect(getByRole('button', {hidden: true})).toHaveAttribute('aria-labelledby', 'span-id self');
+    expect(getByRole('button', {hidden: true})).toHaveAttribute('aria-label', 'foo');
+  });
+
+});