[EuiSuperDatePicker] Papercuts

packages/eui/changelogs/upcoming/9239.md

@@ -0,0 +1,6 @@
+- Made `EuiQuickSelectPanel` available for importing from the `@elastic/eui` package
+
+**Accessibility**
+
+- Improved the accessibility of input fields in the popover of `EuiSuperDatePicker` by properly labeling them
+

packages/eui/src/components/date_picker/super_date_picker/date_popover/absolute_tab.tsx

@@ -90,6 +90,7 @@ export const EuiAbsoluteTab: FunctionComponent<EuiAbsoluteTabProps> = ({
     [dateFormat]
   );
 
+  const textInputLabelId = useGeneratedHtmlId();
   const timeZomeDescriptionId = useGeneratedHtmlId();
   const submitButtonLabel = useEuiI18n(
     'euiAbsoluteTab.dateFormatButtonLabel',
@@ -205,6 +206,7 @@ export const EuiAbsoluteTab: FunctionComponent<EuiAbsoluteTabProps> = ({
           describedByIds={[timeZomeDescriptionId]}
         >
           <EuiFieldText
+            aria-labelledby={textInputLabelId}
             compressed
             isInvalid={isTextInvalid}
             value={textInputValue}
@@ -218,7 +220,9 @@ export const EuiAbsoluteTab: FunctionComponent<EuiAbsoluteTabProps> = ({
               setIsReadyToParse(true);
             }}
             data-test-subj="superDatePickerAbsoluteDateInput"
-            prepend={<EuiFormLabel>{labelPrefix}</EuiFormLabel>}
+            prepend={
+              <EuiFormLabel id={textInputLabelId}>{labelPrefix}</EuiFormLabel>
+            }
           />
         </EuiFormRow>
         {hasUnparsedText && (

packages/eui/src/components/date_picker/super_date_picker/date_popover/relative_tab.tsx

@@ -120,6 +120,7 @@ export const EuiRelativeTab: FunctionComponent<EuiRelativeTabProps> = ({
     return parsedValue.locale(locale || 'en').format(dateFormat);
   }, [isInvalid, value, roundUp, locale, dateFormat]);
 
+  const textInputLabelId = useGeneratedHtmlId();
   const relativeDateInputNumberDescriptionId = useGeneratedHtmlId();
   const timeZomeDescriptionId = useGeneratedHtmlId();
   const numberAriaLabel = useEuiI18n(
@@ -178,11 +179,14 @@ export const EuiRelativeTab: FunctionComponent<EuiRelativeTabProps> = ({
         </EuiFlexGroup>
         <EuiSpacer size="s" />
         <EuiFieldText
+          aria-labelledby={textInputLabelId}
           compressed
           value={formattedValue}
           readOnly
           aria-describedby={timeZomeDescriptionId}
-          prepend={<EuiFormLabel>{labelPrefix}</EuiFormLabel>}
+          prepend={
+            <EuiFormLabel id={textInputLabelId}>{labelPrefix}</EuiFormLabel>
+          }
         />
         <EuiScreenReaderOnly>
           <p id={relativeDateInputNumberDescriptionId}>

packages/eui/src/components/date_picker/super_date_picker/quick_select_popover/index.ts

@@ -12,5 +12,6 @@ export type { EuiQuickSelectPopoverProps } from './quick_select_popover';
 export { EuiQuickSelectPopover } from './quick_select_popover';
 export type { EuiQuickSelectProps } from './quick_select';
 export { EuiQuickSelect } from './quick_select';
+export { EuiQuickSelectPanel } from './quick_select_panel';
 export type { EuiRecentlyUsedProps } from './recently_used';
 export { EuiRecentlyUsed } from './recently_used';

packages/eui/src/components/date_picker/super_date_picker/super_date_picker.stories.tsx

@@ -166,7 +166,10 @@ export const QuickSelectOnly: Story = {
 
     return (
       <EuiFlexGroup>
-        <EuiFieldText onFocus={() => setCollapsed(true)} />
+        <EuiFieldText
+          onFocus={() => setCollapsed(true)}
+          onBlur={() => setCollapsed(false)}
+        />
         <EuiSuperDatePicker
           {...args}
           isQuickSelectOnly={isCollapsed}
@@ -379,10 +382,6 @@ const StatefulSuperDatePicker = (props: EuiSuperDatePickerProps) => {
       end={_end}
       onTimeChange={handleOnTimeChange}
       onRefresh={onRefresh}
-      css={css`
-        /* ensure the input content is visible without being truncated */
-        inline-size: 700px;
-      `}
       {...rest}
     />
   );

packages/website/docs/components/forms/date-and-time/super-date-picker.mdx

@@ -615,7 +615,7 @@ export default () => {
         onTimeChange={onTimeChange}
         showTimeWindowButtons={showButtons}
         showUpdateButton={false}
-        width={"full"}
+        width={"auto"}
       />
     </>
   );