fix(sw-350): fixed ui-comments for calendar, search and widget

components/DatePicker/Screen/Desktop.tsx

@@ -60,10 +60,9 @@ export default function DatePickerDesktop({
       lang={lang}
       locale={locale}
       mode="range"
-      numberOfMonths={2}
-      onSelect={handleOnSelect}
+      onDayClick={(day) => handleOnSelect(day)}
       pagedNavigation
-      required
+      required={false}
       selected={selectedDate}
       startMonth={currentDate}
       weekStartsOn={1}

components/DatePicker/Screen/Mobile.tsx

@@ -78,7 +78,7 @@ export default function DatePickerMobile({
       mode="range"
       /** Showing full year or what's left of it */
       numberOfMonths={12}
-      onSelect={handleOnSelect}
+      onDayClick={(day) => handleOnSelect(day)}
       required
       selected={selectedDate}
       startMonth={startMonth}

components/DatePicker/Screen/desktop.module.css

@@ -47,8 +47,8 @@ td.rangeStart[aria-selected="true"] button.dayButton:hover {
 }
 
 td.rangeEnd[aria-selected="true"]:not([data-outside="true"]) button.dayButton,
-td.rangeStart[aria-selected="true"]:not([data-outside="true"])
-  button.dayButton {
+td.rangeStart[aria-selected="true"]:not([data-outside="true"]) button.dayButton,
+td.day[aria-selected="true"] button.dayButton {
   background: var(--Primary-Light-On-Surface-Accent);
   border: none;
   color: var(--Base-Button-Inverted-Fill-Normal);
@@ -75,6 +75,7 @@ td.rangeMiddle[aria-selected="true"] button.dayButton {
   background: var(--Base-Background-Primary-Normal);
   border: none;
   border-radius: 0;
+  color: var(--UI-Text-High-contrast);
 }
 
 td.day[data-disabled="true"],

components/DatePicker/Screen/mobile.module.css

@@ -113,8 +113,8 @@ td.rangeStart[aria-selected="true"] button.dayButton:hover {
 }
 
 td.rangeEnd[aria-selected="true"]:not([data-outside="true"]) button.dayButton,
-td.rangeStart[aria-selected="true"]:not([data-outside="true"])
-  button.dayButton {
+td.rangeStart[aria-selected="true"]:not([data-outside="true"]) button.dayButton,
+td.day[aria-selected="true"] button.dayButton {
   background: var(--Primary-Light-On-Surface-Accent);
   border: none;
   color: var(--Base-Button-Inverted-Fill-Normal);
@@ -141,6 +141,7 @@ td.rangeMiddle[aria-selected="true"] button.dayButton {
   background: var(--Base-Background-Primary-Normal);
   border: none;
   border-radius: 0;
+  color: var(--UI-Text-High-contrast);
 }
 
 td.day[data-disabled="true"],