fix(Datepicker): aria-popup on the wrong element (#18838)

* fix datepicker aria-haspopup location * update snapshots * Change files
microsoft · Jul 7, 2021 · bc44a88 · bc44a88
1 parent 6b7dca3
commit bc44a88
Show file tree

Hide file tree

Showing 3 changed files with 11 additions and 9 deletions.
diff --git a/change/@fluentui-react-8bd054ef-8fac-4642-a332-1a58f592952a.json b/change/@fluentui-react-8bd054ef-8fac-4642-a332-1a58f592952a.json
@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "Datepicker: move aria-haspopup to the correct element",
+  "packageName": "@fluentui/react",
+  "email": "sarah.higley@microsoft.com",
+  "dependentChangeType": "patch"
+}
diff --git a/packages/react/src/components/DatePicker/DatePicker.base.tsx b/packages/react/src/components/DatePicker/DatePicker.base.tsx
@@ -431,17 +431,13 @@ export const DatePickerBase: React.FunctionComponent<IDatePickerProps> = React.f
 
   return (
     <div {...nativeProps} className={classNames.root} ref={forwardedRef}>
-      <div
-        ref={datePickerDiv}
-        aria-haspopup="true"
-        aria-owns={isCalendarShown ? calloutId : undefined}
-        className={classNames.wrapper}
-      >
+      <div ref={datePickerDiv} aria-owns={isCalendarShown ? calloutId : undefined} className={classNames.wrapper}>
         <TextField
           role="combobox"
           label={label}
           aria-expanded={isCalendarShown}
           ariaLabel={ariaLabel}
+          aria-haspopup="dialog"
           aria-controls={isCalendarShown ? calloutId : undefined}
           required={isRequired}
           disabled={disabled}

diff --git a/packages/react/src/components/DatePicker/__snapshots__/DatePicker.test.tsx.snap b/packages/react/src/components/DatePicker/__snapshots__/DatePicker.test.tsx.snap
@@ -22,9 +22,7 @@ exports[`DatePicker renders default DatePicker correctly 1`] = `
         padding-top: 0px;
       }
 >
-  <div
-    aria-haspopup="true"
-  >
+  <div>
     <div
       className=
           ms-TextField
@@ -92,6 +90,7 @@ exports[`DatePicker renders default DatePicker correctly 1`] = `
           <input
             aria-describedby="TextFieldDescription3"
             aria-expanded={false}
+            aria-haspopup="dialog"
             aria-invalid={false}
             className=
                 ms-TextField-field