Alert - labelling dismiss action, to prevent narrate "unlabeled" butt…

…on (#16092)

* labelling dismiss action, in order prevent
to narrate unlabelled button

* adding recommendation into `do` section

* amending changelog

Co-authored-by: Milan Turon <mituron@microsoft.com>

packages/fluentui/CHANGELOG.md

@@ -120,6 +120,7 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm
 - Added support to serve different docsite versions @ling1726 ([#15692](https://github.com/microsoft/fluentui/pull/15692))
 - Added support to silently fail the version dropdown @ling1726 ([#16002](https://github.com/microsoft/fluentui/pull/16002))
 - Adding JAWS bug for radiogroup @kolaps33 ([#16076](https://github.com/microsoft/fluentui/pull/16076))
+- `Alert` - labelling dismiss action, to prevent narrate "unlabeled" button @kolaps33 ([#16092](https://github.com/microsoft/fluentui/pull/16092))
 
 <!--------------------------------[ v0.51.2 ]------------------------------- -->
 ## [v0.51.2](https://github.com/microsoft/fluentui/tree/'@fluentui/react-northstar_v'0.51.2) (2020-09-25)

packages/fluentui/docs/src/examples/components/Alert/BestPractices/AlertBestPractices.tsx

@@ -6,6 +6,7 @@ const doList = [
   'Use warning and danger variants to announce the alert by the screen reader.',
   'Use other libraries (for example `react-aria-live`) if the content of default or success variant needs to be announced.',
   'Add textual representation to action slot if they only contain an icon (using `title`, `aria-label` or `aria-labelledby` props on the slot).',
+  'Add textual representation to `dismissAction` slot if it contains only an icon.',
 ];
 
 const PopupBestPractices = () => {

packages/fluentui/docs/src/examples/components/Alert/Slots/AlertExampleActions.shorthand.tsx

@@ -6,6 +6,7 @@ const AlertExampleDismissAction = () => (
     actions={[{ content: 'Privacy policy', key: 'privacy', primary: true }, 'Settings']}
     content="Get all the best inventions in your e-mail every day. Sign up now!"
     dismissible
+    dismissAction={{ 'aria-label': 'close' }}
   />
 );
 

packages/fluentui/docs/src/examples/components/Alert/Types/AlertExampleDismissible.shorthand.tsx

@@ -10,6 +10,7 @@ const AlertExampleDismissible = () => {
       content="This is a special notification which you can dismiss if you're bored with it."
       dismissible
       onVisibleChange={() => setVisible(false)}
+      dismissAction={{ 'aria-label': 'close' }}
       visible={visible}
     />
   );

packages/fluentui/docs/src/examples/components/Alert/Usage/AlertExampleImportantMessage.shorthand.tsx

@@ -9,6 +9,7 @@ const AlertExampleImportantMessage = () => (
     header="Your password may have been compromised"
     content="Please change your password"
     dismissible
+    dismissAction={{ 'aria-label': 'close' }}
   />
 );
 

packages/fluentui/docs/src/examples/components/Alert/Usage/AlertExampleWidth.shorthand.tsx

@@ -18,6 +18,7 @@ const AlertExampleWidth = () => {
         actions={[{ content: 'Join and add the room', primary: true, key: 'content-1' }]}
         header="There is a conference room close to you."
         dismissible
+        dismissAction={{ 'aria-label': 'close' }}
         icon={<ScreencastIcon />}
       />
     </div>

packages/fluentui/docs/src/examples/components/Alert/Variations/AlertExampleOofs.shorthand.tsx

@@ -1,6 +1,13 @@
 import * as React from 'react';
 import { Alert } from '@fluentui/react-northstar';
 
-const AlertExampleOof = () => <Alert content="This is an oof alert" dismissible variables={{ oof: true }} />;
+const AlertExampleOof = () => (
+  <Alert
+    content="This is an oof alert"
+    dismissible
+    dismissAction={{ 'aria-label': 'close' }}
+    variables={{ oof: true }}
+  />
+);
 
 export default AlertExampleOof;

packages/fluentui/docs/src/examples/components/Alert/Variations/AlertExampleUrgent.shorthand.tsx

@@ -1,6 +1,13 @@
 import * as React from 'react';
 import { Alert } from '@fluentui/react-northstar';
 
-const AlertExampleUrgent = () => <Alert content="This is an urgent alert" dismissible variables={{ urgent: true }} />;
+const AlertExampleUrgent = () => (
+  <Alert
+    content="This is an urgent alert"
+    dismissible
+    dismissAction={{ 'aria-label': 'close' }}
+    variables={{ urgent: true }}
+  />
+);
 
 export default AlertExampleUrgent;