Changed approach to aria-label as suggested

microsoft · Jan 22, 2021 · 0eeb71e · 0eeb71e
1 parent 0b1d8a6
commit 0eeb71e
Show file tree

Hide file tree

Showing 2 changed files with 2 additions and 10 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,5 +1,4 @@
 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';
@@ -15,11 +14,9 @@ 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(
@@ -58,8 +55,7 @@ export const DatePickerFormatExample: React.FunctionComponent = () => {
         parseDateFromString={onParseDateFromString}
         className={styles.control}
       />
-      {clearedAnnounced}
-      <DefaultButton onClick={onClick} text="Clear" />
+      <DefaultButton aria-label="Clear the date input" 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,5 +1,4 @@
 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';
@@ -12,11 +11,9 @@ 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 (
@@ -35,8 +32,7 @@ export const DatePickerInputExample: React.FunctionComponent = () => {
         componentRef={datePickerRef}
         className={styles.control}
       />
-      {clearedAnnounced}
-      <DefaultButton onClick={onClick} text="Clear" />
+      <DefaultButton aria-label="Clear the date input" onClick={onClick} text="Clear" />
     </div>
   );
 };