Fix(accessibility) date picker & date time picker blueprint updates (#5187)

manjunathkalburgi · kalburgimanjunath · Dottenpixel · web-flow · commit ea77d0bead83 · 2023-05-24T10:51:36.000+05:30
* Fix(accessibility): Bug Color contrast of marked items is not correct

* fix(accessibility): Datepicker and Datetime Picker blueprints updated

* Timer Picker hint text added

* version details updated

* review comments addressed.

* feedback comments addressed

* feed back comments addressed

* icon alignment issue fixed

* padding updated

* padding issue fixed

* typo updated

* code refactored

* code refactored

* release notes updated

* version updated

* code refactored

* code refactored

* removed attributes.

* Update ui/components/datetime-picker/RELEASENOTES.md

Co-authored-by: dugg molidor &lt;dmolidor@salesforce.com&gt;

* Update ui/components/datetime-picker/base/example.jsx

Co-authored-by: dugg molidor &lt;dmolidor@salesforce.com&gt;

* update release notes

* fixed feedback comments

* added datetimepicker documentation of new class.

* feedback comments addressed

* added spaces.

* fixed vrt issues.

* update release notes

* update release notes

* Update ui/components/datetime-picker/docs.mdx

Co-authored-by: dugg molidor &lt;dmolidor@salesforce.com&gt;

* Update ui/components/form-element/index.jsx

Co-authored-by: dugg molidor &lt;dmolidor@salesforce.com&gt;

* fieldLevelMessage entries to JS docs and propTypes added

---------

Co-authored-by: Manjunath Kalburgi &lt;manjunathkalburgi65512@gmail.com&gt;
Co-authored-by: dugg molidor &lt;dmolidor@salesforce.com&gt;
diff --git a/RELEASENOTES.md b/RELEASENOTES.md
@@ -17,14 +17,32 @@
 #### Fixed
 - Fixed `NVDA` checkbox toggle is announced twice removed aria-live="assertive"
 
+### [Combobox](https://www.lightningdesignsystem.com/components/combobox)
+#### Added 
+- Tooltip option provided for Date/DateTime pickers.
+- Updated from tabindex to tabIndex.
+
 ### [Data Tables](https://www.lightningdesignsystem.com/components/data-tables)
 #### Changed
 - Removed `aria-label` from table header to prevent from reading twice headers.
 
+### [Datepickers](https://www.lightningdesignsystem.com/components/datepickers)
+#### Added 
+- Added datepicker example with field level tooltip  
+
+### [Datetime Picker](https://www.lightningdesignsystem.com/components/datetime-picker)
+#### Added 
+- Tooltip option provided for Date/DateTime pickers.
+- Added `slds-datetimepicker_has-tooltip` class to fix the icon misalignment issue. 
+
 ### [Expandable Section](https://www.lightningdesignsystem.com/components/expandable-section)
 #### Changed
 - Replaced aria-hidden with hidden attribute for components that show/hide content
 
+### [Form Element](https://www.lightningdesignsystem.com/components/form-element)
+#### Changed
+- Added field level custom message option for tooltip 
+
 ### [Modals](https://www.lightningdesignsystem.com/components/modals)
 #### Changed
 - Optimized full size option and refactored to use CSS grid.
diff --git a/ui/components/_index.scss b/ui/components/_index.scss
@@ -61,6 +61,9 @@
   'chat/base/index',
   'chat/past/index',
 
+  // DatePickers
+  'datetime-picker/base/index',
+
   // Forms
   'form-element/base/index',
   'input/base/index',
diff --git a/ui/components/combobox/RELEASENOTES.md b/ui/components/combobox/RELEASENOTES.md
@@ -3,6 +3,10 @@
 # Combobox Release Notes
 
 <!-- ## [Unreleased] -->
+## 2.22.0
+### Added 
+- Tooltip option provided for Date/DateTime pickers.
+- Updated from tabindex to tabIndex.
 ## 2.21.0
 ### Fixed
 - Fixed by adding tabindex for `scrollable region must have keyboard access` wcag issue
diff --git a/ui/components/combobox/index.jsx b/ui/components/combobox/index.jsx
@@ -312,7 +312,10 @@ export default class Combobox extends Component {
       isEditing,
       column,
       tabIndex,
-      value
+      value,
+      hasTooltip,
+      showTooltip,
+      fieldLevelMessage
     } = this.props;
 
     return (
@@ -327,6 +330,9 @@ export default class Combobox extends Component {
         isHorizontal={isHorizontal}
         isStacked={isStacked}
         column={column}
+        hasTooltip={hasTooltip}
+        showTooltip={showTooltip}
+        fieldLevelMessage={fieldLevelMessage}
       >
         <ComboboxContainer
           className={containerClassName}
diff --git a/ui/components/combobox/listbox/index.jsx b/ui/components/combobox/listbox/index.jsx
@@ -20,7 +20,7 @@ export const ListboxWrapper = props => (
     role="listbox"
     aria-orientation={props.horizontal || props.inline ? 'horizontal' : null}
     aria-label = {props.ariaLabel}
-    tabindex="0"
+    tabIndex="0"
     aria-busy={props.ariaBusy ?props.ariaBusy:null}
   >
     {props.children}
@@ -304,9 +304,6 @@ export class Listbox extends Component {
   }
 
   renderEntityOptions(key) {
-    const uniqueId = this.props.hasUniqueId
-      ? _.uniqueId('option')
-      : null;
     const option = this.props.snapshot[key];
     return (
       <ListboxItem key={key}>
@@ -334,9 +331,6 @@ export class Listbox extends Component {
   }
 
   renderPlainOptions(key) {
-    const uniqueId = this.props.hasUniqueId
-      ? _.uniqueId('option')
-      : null;
     const option = this.props.snapshot[key];
     return (
       <ListboxItem key={key}>
diff --git a/ui/components/datepickers/RELEASENOTES.md b/ui/components/datepickers/RELEASENOTES.md
@@ -3,7 +3,9 @@
 # Datepickers Release Notes
 
 <!-- ## [Unreleased] -->
-
+## 2.22.0
+### Added 
+- Added datepicker example with field level tooltip  
 ## 2.17.0
 
 ### Fixed
diff --git a/ui/components/datepickers/base/example.jsx b/ui/components/datepickers/base/example.jsx
@@ -456,6 +456,9 @@ export let DatePickerElement = props => (
     hasError={props.hasError}
     isRequired={props.isRequired}
     isDisabled={props.isDisabled}
+    hasTooltip={props.hasTooltip}
+    showTooltip={props.showTooltip}
+    fieldLevelMessage={props.fieldLevelMessage}
     dropdown={
       (!props.isDisabled &&
         <DatePicker
@@ -571,6 +574,25 @@ export let states = [
       />
     )
   },
+  {
+    id: 'datepicker-with-tooltip',
+    label: 'Date Picker - With tooltip',
+    demoStyles: demoStyles,
+    element: (
+      <DatePickerElement
+        idPrefix="pickerRequired"
+        labelContent="Date"
+        dateInputId={dateInputId + '-required'}
+        todayActive
+        isRequired
+        isOpen
+        defaultValue="Jan 1 2023"
+        fieldLevelMessage="Format: mmm d yyyy | ex: Jan 1 2023"
+        hasTooltip
+        showTooltip
+      />
+    )
+  },
   {
     id: 'datepicker-disabled',
     label: 'Datepicker - disabled',
diff --git a/ui/components/datetime-picker/RELEASENOTES.md b/ui/components/datetime-picker/RELEASENOTES.md
@@ -3,6 +3,10 @@
 # Datetime Picker Release Notes
 
 <!-- ## [Unreleased] -->
+## 2.22.0
+### Added 
+- Tooltip option provided for Date/DateTime pickers.
+- Added `slds-datetimepicker_has-tooltip` class to fix the icon misalignment issue. 
 
 ## 2.17.0
 ### Fixed
diff --git a/ui/components/datetime-picker/base/_index.scss b/ui/components/datetime-picker/base/_index.scss
@@ -10,3 +10,10 @@
  * @support dev-ready
  * @variant
  */
+
+.slds-datetimepicker_has-tooltip {
+
+  .slds-form-element__icon {
+    padding-top: 0;
+  }
+}
diff --git a/ui/components/datetime-picker/base/example.jsx b/ui/components/datetime-picker/base/example.jsx
@@ -31,7 +31,11 @@ const ExampleDatetimePicker = ({
   isDisabled,
   listboxData,
   dateDefaultValue,
-  showRequiredIndicator
+  showRequiredIndicator,
+  hasTooltip,
+  showTooltip,
+  fieldLevelDateMessage,
+  fieldLevelTimeMessage
 }) => {
   const focusedRef = useRef();
   const [focusedId, setFocusedId] = useState('');
@@ -62,7 +66,8 @@ const ExampleDatetimePicker = ({
     <div className="slds-form">
       <fieldset
         className={classNames('slds-form-element slds-form-element_compound', {
-          'slds-has-error': hasError
+          'slds-has-error': hasError,
+          'slds-datetimepicker_has-tooltip': showTooltip
         })}
       >
         <legend className="slds-form-element__label slds-form-element__legend">
@@ -88,6 +93,9 @@ const ExampleDatetimePicker = ({
                 hasError={hasError}
                 isRequired={isRequired}
                 showRequiredIndicator={showRequiredIndicator}
+                hasTooltip={hasTooltip && fieldLevelDateMessage ? hasTooltip : false}
+                showTooltip={showTooltip && fieldLevelDateMessage ? showTooltip: false}
+                fieldLevelMessage={fieldLevelDateMessage}
               >
                 <Input
                   id={uniqueId}
@@ -116,6 +124,10 @@ const ExampleDatetimePicker = ({
                 inputIconPosition="right"
                 hasError={hasError}
                 isDisabled={isDisabled}
+                hasTooltip={hasTooltip && fieldLevelTimeMessage ? hasTooltip:null}
+                showTooltip={showTooltip && fieldLevelTimeMessage? showTooltip:null}
+                fieldLevelMessage={fieldLevelTimeMessage}
+                isOpen={isOpen}
                 // TODO: Combobox and Listbox do not currently have aria-describedby
                 // aria-describedby={hasError && (uniqueId + "-error")}
 
@@ -147,7 +159,6 @@ const ExampleDatetimePicker = ({
                 resultsType="listbox"
                 hasInteractions
                 hasFocus={hasFocus}
-                isOpen={isOpen}
                 value={focusedValue}
               />
             </div>
@@ -280,6 +291,47 @@ export let states = [
       />
     )
   },
+  {
+    id: 'datetimepicker-with-tooltip-for-datepicker',
+    label: 'Datetime Picker With Tooptip for datepicker',
+    demoStyles: 'height: 20rem;',
+    element: (
+      <ExampleDatetimePicker
+        dropdownIsOpen
+        listboxData={PlainTimeOptions}
+        isRequired
+        dateDefaultValue="Jan 1 2023"
+        hasTooltip
+        showTooltip
+        fieldLevelDateMessage="Format: mmm d yyyy | ex: Jan 1 2023"
+      />
+    )
+  },
+  {
+    id: 'datetimepicker-with-tooltip-for-timepicker',
+    label: 'Datetime Picker With Tooptip for timepicker',
+    demoStyles: 'height: 20rem;',
+    element: (
+      <ExampleDatetimePicker
+        dropdown={
+          <DatePicker
+            todayActive
+            dateSelected="single"
+            dateRange="week-4"
+            value="8:00 am"
+          />
+        }
+        dropdownIsOpen={false}
+        dateDefaultValue="Jan 1 2023"
+        isOpen
+        hasFocus
+        hasTooltip
+        showTooltip
+        listboxData={PlainTimeOptionsSelected}
+        fieldLevelTimeMessage="Format: hh:mm a | ex: 12:00 AM"
+      />
+    )
+  },
   {
     id: 'disabled',
     label: 'Date and Time - disabled',
diff --git a/ui/components/datetime-picker/docs.mdx b/ui/components/datetime-picker/docs.mdx
@@ -50,6 +50,7 @@ The datetime picker has the following markup requirements:
 </CodeView>
 
 ## States
+Adding `slds-datetimepicker_has-tooltip` to the element with `slds-form-element_compound` aligns the legend properly when there is an info tooltip.
 
 ### Date selection
 
diff --git a/ui/components/expandable-section/base/example.jsx b/ui/components/expandable-section/base/example.jsx
@@ -22,7 +22,7 @@ export let Section = props => (
 
 export let SectionContent = props => (
   <div
-    hidden={props.isOpen ? 'false' : 'true'}
+    hidden={!props.isOpen}
     className={classNames('slds-section__content', props.className)}
     id={props.referenceId}
   >
diff --git a/ui/components/form-element/RELEASENOTES.md b/ui/components/form-element/RELEASENOTES.md
@@ -3,6 +3,9 @@
 # Form Element Release Notes
 
 <!-- ## [Unreleased] -->
+## 2.22.0
+### Changed
+- Added field level custom message option for tooltip 
 
 ## 2.18.0
 
diff --git a/ui/components/form-element/docs.mdx b/ui/components/form-element/docs.mdx
@@ -169,7 +169,7 @@ The button icon is **_required_** to be wrapped in a `<div>` with the class `sld
 #### Showing tooltip
 
 The help text icon uses a tooltip to show the help text information. Please see [Tooltips](/components/tooltips/) for implementation details.
-
+To give help text information the attribute `fieldLevelMessage` can be used on the FormElement element.
 <Example title="Form Element - Help Text Icon - Showing tooltip">
 
 <CodeView demoStyles="padding-top: 4rem;">
diff --git a/ui/components/form-element/index.jsx b/ui/components/form-element/index.jsx
@@ -149,7 +149,7 @@ FormElementSpanFauxLabel.defaultProps = {
 };
 
 export const FormElementTooltip = props => {
-  const { showTooltip } = props;
+  const { showTooltip,fieldLevelMessage } = props;
 
   return (
     <div className="slds-form-element__icon">
@@ -166,18 +166,20 @@ export const FormElementTooltip = props => {
             position: 'absolute',
             top: '-45px',
             left: '-15px',
-            width: '170px'
+            width: fieldLevelMessage ? '220px':'170px'
           }}
         >
-          Some helpful information.
+          {fieldLevelMessage  || "Some helpful information."}
+
         </Tooltip>
       )}
     </div>
   );
 };
 
 FormElementTooltip.propTypes = {
-  showTooltip: PropTypes.bool
+  showTooltip: PropTypes.bool,
+  fieldLevelMessage: PropTypes.string
 };
 
 export const FormElementHelpMessage = props => {
@@ -352,6 +354,7 @@ export const FormElement = props => {
     hasTooltip,
     showTooltip,
     inlineMessage,
+    fieldLevelMessage,
     column,
     role,
     dropdown,
@@ -409,7 +412,7 @@ export const FormElement = props => {
             showRequiredIndicator={showRequiredIndicator}
           />
         ))}
-      {hasTooltip && <FormElementTooltip showTooltip={showTooltip} />}
+      {hasTooltip && <FormElementTooltip showTooltip={showTooltip} {...(fieldLevelMessage && { fieldLevelMessage })}/>}
       <FormElementControl
         className={classNames(inputIconPositionClasses, formControlClassName)}
       >
@@ -455,6 +458,7 @@ FormElement.propTypes = {
   inlineMessage: PropTypes.string,
   formElementClassName: PropTypes.string,
   formControlClassName: PropTypes.string,
+  fieldLevelMessage: PropTypes.string,
   column: PropTypes.number
 };
 
diff --git a/ui/components/summary-detail/base/example.jsx b/ui/components/summary-detail/base/example.jsx
@@ -25,7 +25,7 @@ export const SummaryDetail = props => (
 
 export const SummaryDetailContent = props => (
   <div
-    hidden={props.isOpen ? 'false' : 'true'}
+    hidden={!props.isOpen}
     className={classNames('slds-summary-detail__content', props.className)}
     id={props.referenceId}
   >
