fix(react-examples): Add narrator cue for cleaning action in Date Pic…

…ker examples (microsoftdesign/fluentui#10254)
microsoft · Jan 13, 2021 · 0b1d8a6 · 0b1d8a6
1 parent dbe9934
commit 0b1d8a6
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 0 deletions.
diff --git a/packages/react-examples/src/react-date-time/DatePicker/DatePicker.Format.Example.tsx b/packages/react-examples/src/react-date-time/DatePicker/DatePicker.Format.Example.tsx
@@ -1,4 +1,5 @@
 import * as React from 'react';
+import { Announced } from '@fluentui/react';
 import { DatePicker } from '@fluentui/react-date-time';
 import { DefaultButton } from '@fluentui/react/lib/compat/Button';
 import { mergeStyleSets } from '@fluentui/react/lib/Styling';
@@ -14,9 +15,11 @@ const onFormatDate = (date?: Date): string => {
 
 export const DatePickerFormatExample: React.FunctionComponent = () => {
   const [value, setValue] = React.useState<Date | undefined>();
+  const [clearedAnnounced, setClearedAnnounced] = React.useState<JSX.Element | undefined>();
 
   const onClick = React.useCallback((): void => {
     setValue(undefined);
+    setClearedAnnounced(<Announced message="Input field cleared" aria-live="assertive" />);
   }, []);
 
   const onParseDateFromString = React.useCallback(
@@ -55,6 +58,7 @@ export const DatePickerFormatExample: React.FunctionComponent = () => {
         parseDateFromString={onParseDateFromString}
         className={styles.control}
       />
+      {clearedAnnounced}
       <DefaultButton onClick={onClick} text="Clear" />
       <div>Selected date: {(value || '').toString()}</div>
     </div>

diff --git a/packages/react-examples/src/react-date-time/DatePicker/DatePicker.Input.Example.tsx b/packages/react-examples/src/react-date-time/DatePicker/DatePicker.Input.Example.tsx
@@ -1,4 +1,5 @@
 import * as React from 'react';
+import { Announced } from '@fluentui/react';
 import { DefaultButton } from '@fluentui/react/lib/compat/Button';
 import { DatePicker, IDatePicker } from '@fluentui/react-date-time';
 import { mergeStyleSets } from '@fluentui/react/lib/Styling';
@@ -11,9 +12,11 @@ const styles = mergeStyleSets({
 export const DatePickerInputExample: React.FunctionComponent = () => {
   const [value, setValue] = React.useState<Date | undefined>();
   const datePickerRef = React.useRef<IDatePicker>(null);
+  const [clearedAnnounced, setClearedAnnounced] = React.useState<JSX.Element | undefined>();
 
   const onClick = React.useCallback((): void => {
     setValue(undefined);
+    setClearedAnnounced(<Announced message="Input field cleared" aria-live="assertive" />);
   }, []);
 
   return (
@@ -32,6 +35,7 @@ export const DatePickerInputExample: React.FunctionComponent = () => {
         componentRef={datePickerRef}
         className={styles.control}
       />
+      {clearedAnnounced}
       <DefaultButton onClick={onClick} text="Clear" />
     </div>
   );