fix: hide unwanted aria messages for date/time pickers

WTTJ · Nov 7, 2023 · 9d5bdb0 · 9d5bdb0
1 parent 241d90a
commit 9d5bdb0
Show file tree

Hide file tree

Showing 4 changed files with 56 additions and 34 deletions.
diff --git a/packages/DateTimePickerCommon/src/CustomPopper.tsx b/packages/DateTimePickerCommon/src/CustomPopper.tsx
@@ -3,6 +3,7 @@ import styled, { css, CSSObject, th } from '@xstyled/styled-components'
 import { cardStyles } from '@welcome-ui/utils'
 
 import { datePickerStyles } from './datePickerStyles'
+import { FixAriaMessageStyle } from './styles'
 
 export const CustomPopper = ({
   children,
@@ -21,6 +22,7 @@ export const CustomPopper = ({
 const StyledCustomPopper = styled.div(
   ({ popperStyles }: { popperStyles: CSSObject }) => css`
     ${datePickerStyles};
+    ${FixAriaMessageStyle};
     .react-datepicker-popper {
       ${popperStyles};
     }

diff --git a/packages/DateTimePickerCommon/src/index.tsx b/packages/DateTimePickerCommon/src/index.tsx
@@ -4,4 +4,4 @@ export * from './CustomInput'
 export * from './utils'
 
 // no export * as S here because of crash on gatsby
-export { StyledDatePicker, StyledTimePicker } from './styles'
+export { FixGlobalAriaMessage, StyledDatePicker, StyledTimePicker } from './styles'
diff --git a/packages/DateTimePickerCommon/src/styles.ts b/packages/DateTimePickerCommon/src/styles.ts
@@ -1,4 +1,4 @@
-import styled, { css, system } from '@xstyled/styled-components'
+import styled, { createGlobalStyle, css, system } from '@xstyled/styled-components'
 import ReactDatePicker, { ReactDatePickerProps } from 'react-datepicker'
 import { StyledIcon } from '@welcome-ui/icon'
 import { StyledButton } from '@welcome-ui/button'
@@ -74,3 +74,19 @@ export const Selects = styled.div`
     margin-right: sm;
   }
 `
+
+export const FixAriaMessageStyle = css`
+  .react-datepicker__aria-live {
+    position: absolute;
+    clip-path: circle(0);
+    border: 0;
+    height: 1px;
+    margin: -1px;
+    overflow: hidden;
+    padding: 0;
+    width: 1px;
+    white-space: nowrap;
+  }
+`
+
+export const FixGlobalAriaMessage = createGlobalStyle`${FixAriaMessageStyle}`
diff --git a/packages/TimePicker/src/index.tsx b/packages/TimePicker/src/index.tsx
@@ -4,6 +4,7 @@ import {
   CustomInputOptions,
   CustomPopper,
   DEFAULT_DATE,
+  FixGlobalAriaMessage,
   Focused,
   getDate,
   StyledTimePicker,
@@ -97,38 +98,41 @@ export const TimePicker = forwardRef<'input', TimePickerProps>(
     }
 
     return (
-      <StyledTimePicker
-        calendarClassName="time-picker-popper"
-        customInput={
-          <CustomInput
-            className="time-picker"
-            data-testid={dataTestId}
-            focused={focused}
-            handleBlur={handleBlur}
-            handleFocus={handleFocus}
-            icon={icon}
-            iconPlacement={iconPlacement}
-            onReset={handleReset}
-            ref={ref}
-            size={size}
-          />
-        }
-        dateFormat={dateFormat}
-        disabled={disabled}
-        iconPlacement={!!icon && iconPlacement}
-        onChange={handleChange}
-        placeholderText={placeholderText}
-        popperContainer={CustomPopper}
-        popperProps={popperProps}
-        selected={date}
-        showTimeSelect
-        showTimeSelectOnly
-        size={size}
-        timeIntervals={timeIntervals}
-        transparent={transparent}
-        {...rest}
-        isClearable={false}
-      />
+      <>
+        <FixGlobalAriaMessage />
+        <StyledTimePicker
+          calendarClassName="time-picker-popper"
+          customInput={
+            <CustomInput
+              className="time-picker"
+              data-testid={dataTestId}
+              focused={focused}
+              handleBlur={handleBlur}
+              handleFocus={handleFocus}
+              icon={icon}
+              iconPlacement={iconPlacement}
+              onReset={handleReset}
+              ref={ref}
+              size={size}
+            />
+          }
+          dateFormat={dateFormat}
+          disabled={disabled}
+          iconPlacement={!!icon && iconPlacement}
+          onChange={handleChange}
+          placeholderText={placeholderText}
+          popperContainer={CustomPopper}
+          popperProps={popperProps}
+          selected={date}
+          showTimeSelect
+          showTimeSelectOnly
+          size={size}
+          timeIntervals={timeIntervals}
+          transparent={transparent}
+          {...rest}
+          isClearable={false}
+        />
+      </>
     )
   }
 )