@coreui/react-pro 5.24.0 → 5.25.0

package/src/components/time-picker/__tests__/__snapshots__/CTimePicker.spec.tsx.snap

@@ -3,1061 +3,1345 @@
 exports[`loads and displays CTimePicker component 1`] = `
 <div>
   <div
-    class="dropdown picker time-picker"
+    class="time-picker"
   >
     <div
-      aria-expanded="false"
-      class="input-group picker-input-group"
+      class="time-picker-input-group"
     >
       <input
         autocomplete="off"
-        class="form-control"
+        class="time-picker-input"
         placeholder="Select time"
-        type="text"
       />
-      <span
-        class="input-group-text"
-      >
-        <span
-          class="picker-input-group-indicator"
-        >
-          <span
-            class="picker-input-group-icon time-picker-input-icon"
-          />
-        </span>
-      </span>
+      <div
+        class="time-picker-indicator"
+        tabindex="0"
+      />
     </div>
     <div
-      aria-hidden="true"
-      class="dropdown-menu"
-      role="menu"
+      class="time-picker-dropdown"
     >
       <div
         class="time-picker-body time-picker-roll"
+        role="group"
       >
         <div
+          aria-label="Select hours"
           class="time-picker-roll-col"
+          role="listbox"
         >
           <div
+            aria-label="00"
+            aria-selected="false"
             class="time-picker-roll-cell"
-            role="button"
+            role="option"
             tabindex="0"
           >
-            0
+            00
           </div>
           <div
+            aria-label="01"
+            aria-selected="false"
             class="time-picker-roll-cell"
-            role="button"
-            tabindex="0"
+            role="option"
+            tabindex="-1"
           >
-            1
+            01
           </div>
           <div
+            aria-label="02"
+            aria-selected="false"
             class="time-picker-roll-cell"
-            role="button"
-            tabindex="0"
+            role="option"
+            tabindex="-1"
           >
-            2
+            02
           </div>
           <div
+            aria-label="03"
+            aria-selected="false"
             class="time-picker-roll-cell"
-            role="button"
-            tabindex="0"
+            role="option"
+            tabindex="-1"
           >
-            3
+            03
           </div>
           <div
+            aria-label="04"
+            aria-selected="false"
             class="time-picker-roll-cell"
-            role="button"
-            tabindex="0"
+            role="option"
+            tabindex="-1"
           >
-            4
+            04
           </div>
           <div
+            aria-label="05"
+            aria-selected="false"
             class="time-picker-roll-cell"
-            role="button"
-            tabindex="0"
+            role="option"
+            tabindex="-1"
           >
-            5
+            05
           </div>
           <div
+            aria-label="06"
+            aria-selected="false"
             class="time-picker-roll-cell"
-            role="button"
-            tabindex="0"
+            role="option"
+            tabindex="-1"
           >
-            6
+            06
           </div>
           <div
+            aria-label="07"
+            aria-selected="false"
             class="time-picker-roll-cell"
-            role="button"
-            tabindex="0"
+            role="option"
+            tabindex="-1"
           >
-            7
+            07
           </div>
           <div
+            aria-label="08"
+            aria-selected="false"
             class="time-picker-roll-cell"
-            role="button"
-            tabindex="0"
+            role="option"
+            tabindex="-1"
           >
-            8
+            08
           </div>
           <div
+            aria-label="09"
+            aria-selected="false"
             class="time-picker-roll-cell"
-            role="button"
-            tabindex="0"
+            role="option"
+            tabindex="-1"
           >
-            9
+            09
           </div>
           <div
+            aria-label="10"
+            aria-selected="false"
             class="time-picker-roll-cell"
-            role="button"
-            tabindex="0"
+            role="option"
+            tabindex="-1"
           >
             10
           </div>
           <div
+            aria-label="11"
+            aria-selected="false"
             class="time-picker-roll-cell"
-            role="button"
-            tabindex="0"
+            role="option"
+            tabindex="-1"
           >
             11
           </div>
           <div
+            aria-label="12"
+            aria-selected="false"
             class="time-picker-roll-cell"
-            role="button"
-            tabindex="0"
+            role="option"
+            tabindex="-1"
           >
             12
           </div>
           <div
+            aria-label="13"
+            aria-selected="false"
             class="time-picker-roll-cell"
-            role="button"
-            tabindex="0"
+            role="option"
+            tabindex="-1"
           >
             13
           </div>
           <div
+            aria-label="14"
+            aria-selected="false"
             class="time-picker-roll-cell"
-            role="button"
-            tabindex="0"
+            role="option"
+            tabindex="-1"
           >
             14
           </div>
           <div
+            aria-label="15"
+            aria-selected="false"
             class="time-picker-roll-cell"
-            role="button"
-            tabindex="0"
+            role="option"
+            tabindex="-1"
           >
             15
           </div>
           <div
+            aria-label="16"
+            aria-selected="false"
             class="time-picker-roll-cell"
-            role="button"
-            tabindex="0"
+            role="option"
+            tabindex="-1"
           >
             16
           </div>
           <div
+            aria-label="17"
+            aria-selected="false"
             class="time-picker-roll-cell"
-            role="button"
-            tabindex="0"
+            role="option"
+            tabindex="-1"
           >
             17
           </div>
           <div
+            aria-label="18"
+            aria-selected="false"
             class="time-picker-roll-cell"
-            role="button"
-            tabindex="0"
+            role="option"
+            tabindex="-1"
           >
             18
           </div>
           <div
+            aria-label="19"
+            aria-selected="false"
             class="time-picker-roll-cell"
-            role="button"
-            tabindex="0"
+            role="option"
+            tabindex="-1"
           >
             19
           </div>
           <div
+            aria-label="20"
+            aria-selected="false"
             class="time-picker-roll-cell"
-            role="button"
-            tabindex="0"
+            role="option"
+            tabindex="-1"
           >
             20
           </div>
           <div
+            aria-label="21"
+            aria-selected="false"
             class="time-picker-roll-cell"
-            role="button"
-            tabindex="0"
+            role="option"
+            tabindex="-1"
           >
             21
           </div>
           <div
+            aria-label="22"
+            aria-selected="false"
             class="time-picker-roll-cell"
-            role="button"
-            tabindex="0"
+            role="option"
+            tabindex="-1"
           >
             22
           </div>
           <div
+            aria-label="23"
+            aria-selected="false"
             class="time-picker-roll-cell"
-            role="button"
-            tabindex="0"
+            role="option"
+            tabindex="-1"
           >
             23
           </div>
         </div>
         <div
+          aria-label="Select minutes"
           class="time-picker-roll-col"
+          role="listbox"
         >
           <div
+            aria-label="00"
+            aria-selected="false"
             class="time-picker-roll-cell"
-            role="button"
+            role="option"
             tabindex="0"
           >
             00
           </div>
           <div
+            aria-label="01"
+            aria-selected="false"
             class="time-picker-roll-cell"
-            role="button"
-            tabindex="0"
+            role="option"
+            tabindex="-1"
           >
             01
           </div>
           <div
+            aria-label="02"
+            aria-selected="false"
             class="time-picker-roll-cell"
-            role="button"
-            tabindex="0"
+            role="option"
+            tabindex="-1"
           >
             02
           </div>
           <div
+            aria-label="03"
+            aria-selected="false"
             class="time-picker-roll-cell"
-            role="button"
-            tabindex="0"
+            role="option"
+            tabindex="-1"
           >
             03
           </div>
           <div
+            aria-label="04"
+            aria-selected="false"
             class="time-picker-roll-cell"
-            role="button"
-            tabindex="0"
+            role="option"
+            tabindex="-1"
           >
             04
           </div>
           <div
+            aria-label="05"
+            aria-selected="false"
             class="time-picker-roll-cell"
-            role="button"
-            tabindex="0"
+            role="option"
+            tabindex="-1"
           >
             05
           </div>
           <div
+            aria-label="06"
+            aria-selected="false"
             class="time-picker-roll-cell"
-            role="button"
-            tabindex="0"
+            role="option"
+            tabindex="-1"
           >
             06
           </div>
           <div
+            aria-label="07"
+            aria-selected="false"
             class="time-picker-roll-cell"
-            role="button"
-            tabindex="0"
+            role="option"
+            tabindex="-1"
           >
             07
           </div>
           <div
+            aria-label="08"
+            aria-selected="false"
             class="time-picker-roll-cell"
-            role="button"
-            tabindex="0"
+            role="option"
+            tabindex="-1"
           >
             08
           </div>
           <div
+            aria-label="09"
+            aria-selected="false"
             class="time-picker-roll-cell"
-            role="button"
-            tabindex="0"
+            role="option"
+            tabindex="-1"
           >
             09
           </div>
           <div
+            aria-label="10"
+            aria-selected="false"
             class="time-picker-roll-cell"
-            role="button"
-            tabindex="0"
+            role="option"
+            tabindex="-1"
           >
             10
           </div>
           <div
+            aria-label="11"
+            aria-selected="false"
             class="time-picker-roll-cell"
-            role="button"
-            tabindex="0"
+            role="option"
+            tabindex="-1"
           >
             11
           </div>
           <div
+            aria-label="12"
+            aria-selected="false"
             class="time-picker-roll-cell"
-            role="button"
-            tabindex="0"
+            role="option"
+            tabindex="-1"
           >
             12
           </div>
           <div
+            aria-label="13"
+            aria-selected="false"
             class="time-picker-roll-cell"
-            role="button"
-            tabindex="0"
+            role="option"
+            tabindex="-1"
           >
             13
           </div>
           <div
+            aria-label="14"
+            aria-selected="false"
             class="time-picker-roll-cell"
-            role="button"
-            tabindex="0"
+            role="option"
+            tabindex="-1"
           >
             14
           </div>
           <div
+            aria-label="15"
+            aria-selected="false"
             class="time-picker-roll-cell"
-            role="button"
-            tabindex="0"
+            role="option"
+            tabindex="-1"
           >
             15
           </div>
           <div
+            aria-label="16"
+            aria-selected="false"
             class="time-picker-roll-cell"
-            role="button"
-            tabindex="0"
+            role="option"
+            tabindex="-1"
           >
             16
           </div>
           <div
+            aria-label="17"
+            aria-selected="false"
             class="time-picker-roll-cell"
-            role="button"
-            tabindex="0"
+            role="option"
+            tabindex="-1"
           >
             17
           </div>
           <div
+            aria-label="18"
+            aria-selected="false"
             class="time-picker-roll-cell"
-            role="button"
-            tabindex="0"
+            role="option"
+            tabindex="-1"
           >
             18
           </div>
           <div
+            aria-label="19"
+            aria-selected="false"
             class="time-picker-roll-cell"
-            role="button"
-            tabindex="0"
+            role="option"
+            tabindex="-1"
           >
             19
           </div>
           <div
+            aria-label="20"
+            aria-selected="false"
             class="time-picker-roll-cell"
-            role="button"
-            tabindex="0"
+            role="option"
+            tabindex="-1"
           >
             20
           </div>
           <div
+            aria-label="21"
+            aria-selected="false"
             class="time-picker-roll-cell"
-            role="button"
-            tabindex="0"
+            role="option"
+            tabindex="-1"
           >
             21
           </div>
           <div
+            aria-label="22"
+            aria-selected="false"
             class="time-picker-roll-cell"
-            role="button"
-            tabindex="0"
+            role="option"
+            tabindex="-1"
           >
             22
           </div>
           <div
+            aria-label="23"
+            aria-selected="false"
             class="time-picker-roll-cell"
-            role="button"
-            tabindex="0"
+            role="option"
+            tabindex="-1"
           >
             23
           </div>
           <div
+            aria-label="24"
+            aria-selected="false"
             class="time-picker-roll-cell"
-            role="button"
-            tabindex="0"
+            role="option"
+            tabindex="-1"
           >
             24
           </div>
           <div
+            aria-label="25"
+            aria-selected="false"
             class="time-picker-roll-cell"
-            role="button"
-            tabindex="0"
+            role="option"
+            tabindex="-1"
           >
             25
           </div>
           <div
+            aria-label="26"
+            aria-selected="false"
             class="time-picker-roll-cell"
-            role="button"
-            tabindex="0"
+            role="option"
+            tabindex="-1"
           >
             26
           </div>
           <div
+            aria-label="27"
+            aria-selected="false"
             class="time-picker-roll-cell"
-            role="button"
-            tabindex="0"
+            role="option"
+            tabindex="-1"
           >
             27
           </div>
           <div
+            aria-label="28"
+            aria-selected="false"
             class="time-picker-roll-cell"
-            role="button"
-            tabindex="0"
+            role="option"
+            tabindex="-1"
           >
             28
           </div>
           <div
+            aria-label="29"
+            aria-selected="false"
             class="time-picker-roll-cell"
-            role="button"
-            tabindex="0"
+            role="option"
+            tabindex="-1"
           >
             29
           </div>
           <div
+            aria-label="30"
+            aria-selected="false"
             class="time-picker-roll-cell"
-            role="button"
-            tabindex="0"
+            role="option"
+            tabindex="-1"
           >
             30
           </div>
           <div
+            aria-label="31"
+            aria-selected="false"
             class="time-picker-roll-cell"
-            role="button"
-            tabindex="0"
+            role="option"
+            tabindex="-1"
           >
             31
           </div>
           <div
+            aria-label="32"
+            aria-selected="false"
             class="time-picker-roll-cell"
-            role="button"
-            tabindex="0"
+            role="option"
+            tabindex="-1"
           >
             32
           </div>
           <div
+            aria-label="33"
+            aria-selected="false"
             class="time-picker-roll-cell"
-            role="button"
-            tabindex="0"
+            role="option"
+            tabindex="-1"
           >
             33
           </div>
           <div
+            aria-label="34"
+            aria-selected="false"
             class="time-picker-roll-cell"
-            role="button"
-            tabindex="0"
+            role="option"
+            tabindex="-1"
           >
             34
           </div>
           <div
+            aria-label="35"
+            aria-selected="false"
             class="time-picker-roll-cell"
-            role="button"
-            tabindex="0"
+            role="option"
+            tabindex="-1"
           >
             35
           </div>
           <div
+            aria-label="36"
+            aria-selected="false"
             class="time-picker-roll-cell"
-            role="button"
-            tabindex="0"
+            role="option"
+            tabindex="-1"
           >
             36
           </div>
           <div
+            aria-label="37"
+            aria-selected="false"
             class="time-picker-roll-cell"
-            role="button"
-            tabindex="0"
+            role="option"
+            tabindex="-1"
           >
             37
           </div>
           <div
+            aria-label="38"
+            aria-selected="false"
             class="time-picker-roll-cell"
-            role="button"
-            tabindex="0"
+            role="option"
+            tabindex="-1"
           >
             38
           </div>
           <div
+            aria-label="39"
+            aria-selected="false"
             class="time-picker-roll-cell"
-            role="button"
-            tabindex="0"
+            role="option"
+            tabindex="-1"
           >
             39
           </div>
           <div
+            aria-label="40"
+            aria-selected="false"
             class="time-picker-roll-cell"
-            role="button"
-            tabindex="0"
+            role="option"
+            tabindex="-1"
           >
             40
           </div>
           <div
+            aria-label="41"
+            aria-selected="false"
             class="time-picker-roll-cell"
-            role="button"
-            tabindex="0"
+            role="option"
+            tabindex="-1"
           >
             41
           </div>
           <div
+            aria-label="42"
+            aria-selected="false"
             class="time-picker-roll-cell"
-            role="button"
-            tabindex="0"
+            role="option"
+            tabindex="-1"
           >
             42
           </div>
           <div
+            aria-label="43"
+            aria-selected="false"
             class="time-picker-roll-cell"
-            role="button"
-            tabindex="0"
+            role="option"
+            tabindex="-1"
           >
             43
           </div>
           <div
+            aria-label="44"
+            aria-selected="false"
             class="time-picker-roll-cell"
-            role="button"
-            tabindex="0"
+            role="option"
+            tabindex="-1"
           >
             44
           </div>
           <div
+            aria-label="45"
+            aria-selected="false"
             class="time-picker-roll-cell"
-            role="button"
-            tabindex="0"
+            role="option"
+            tabindex="-1"
           >
             45
           </div>
           <div
+            aria-label="46"
+            aria-selected="false"
             class="time-picker-roll-cell"
-            role="button"
-            tabindex="0"
+            role="option"
+            tabindex="-1"
           >
             46
           </div>
           <div
+            aria-label="47"
+            aria-selected="false"
             class="time-picker-roll-cell"
-            role="button"
-            tabindex="0"
+            role="option"
+            tabindex="-1"
           >
             47
           </div>
           <div
+            aria-label="48"
+            aria-selected="false"
             class="time-picker-roll-cell"
-            role="button"
-            tabindex="0"
+            role="option"
+            tabindex="-1"
           >
             48
           </div>
           <div
+            aria-label="49"
+            aria-selected="false"
             class="time-picker-roll-cell"
-            role="button"
-            tabindex="0"
+            role="option"
+            tabindex="-1"
           >
             49
           </div>
           <div
+            aria-label="50"
+            aria-selected="false"
             class="time-picker-roll-cell"
-            role="button"
-            tabindex="0"
+            role="option"
+            tabindex="-1"
           >
             50
           </div>
           <div
+            aria-label="51"
+            aria-selected="false"
             class="time-picker-roll-cell"
-            role="button"
-            tabindex="0"
+            role="option"
+            tabindex="-1"
           >
             51
           </div>
           <div
+            aria-label="52"
+            aria-selected="false"
             class="time-picker-roll-cell"
-            role="button"
-            tabindex="0"
+            role="option"
+            tabindex="-1"
           >
             52
           </div>
           <div
+            aria-label="53"
+            aria-selected="false"
             class="time-picker-roll-cell"
-            role="button"
-            tabindex="0"
+            role="option"
+            tabindex="-1"
           >
             53
           </div>
           <div
+            aria-label="54"
+            aria-selected="false"
             class="time-picker-roll-cell"
-            role="button"
-            tabindex="0"
+            role="option"
+            tabindex="-1"
           >
             54
           </div>
           <div
+            aria-label="55"
+            aria-selected="false"
             class="time-picker-roll-cell"
-            role="button"
-            tabindex="0"
+            role="option"
+            tabindex="-1"
           >
             55
           </div>
           <div
+            aria-label="56"
+            aria-selected="false"
             class="time-picker-roll-cell"
-            role="button"
-            tabindex="0"
+            role="option"
+            tabindex="-1"
           >
             56
           </div>
           <div
+            aria-label="57"
+            aria-selected="false"
             class="time-picker-roll-cell"
-            role="button"
-            tabindex="0"
+            role="option"
+            tabindex="-1"
           >
             57
           </div>
           <div
+            aria-label="58"
+            aria-selected="false"
             class="time-picker-roll-cell"
-            role="button"
-            tabindex="0"
+            role="option"
+            tabindex="-1"
           >
             58
           </div>
           <div
+            aria-label="59"
+            aria-selected="false"
             class="time-picker-roll-cell"
-            role="button"
-            tabindex="0"
+            role="option"
+            tabindex="-1"
           >
             59
           </div>
         </div>
         <div
+          aria-label="Select seconds"
           class="time-picker-roll-col"
+          role="listbox"
         >
           <div
+            aria-label="00"
+            aria-selected="false"
             class="time-picker-roll-cell"
-            role="button"
+            role="option"
             tabindex="0"
           >
             00
           </div>
           <div
+            aria-label="01"
+            aria-selected="false"
             class="time-picker-roll-cell"
-            role="button"
-            tabindex="0"
+            role="option"
+            tabindex="-1"
           >
             01
           </div>
           <div
+            aria-label="02"
+            aria-selected="false"
             class="time-picker-roll-cell"
-            role="button"
-            tabindex="0"
+            role="option"
+            tabindex="-1"
           >
             02
           </div>
           <div
+            aria-label="03"
+            aria-selected="false"
             class="time-picker-roll-cell"
-            role="button"
-            tabindex="0"
+            role="option"
+            tabindex="-1"
           >
             03
           </div>
           <div
+            aria-label="04"
+            aria-selected="false"
             class="time-picker-roll-cell"
-            role="button"
-            tabindex="0"
+            role="option"
+            tabindex="-1"
           >
             04
           </div>
           <div
+            aria-label="05"
+            aria-selected="false"
             class="time-picker-roll-cell"
-            role="button"
-            tabindex="0"
+            role="option"
+            tabindex="-1"
           >
             05
           </div>
           <div
+            aria-label="06"
+            aria-selected="false"
             class="time-picker-roll-cell"
-            role="button"
-            tabindex="0"
+            role="option"
+            tabindex="-1"
           >
             06
           </div>
           <div
+            aria-label="07"
+            aria-selected="false"
             class="time-picker-roll-cell"
-            role="button"
-            tabindex="0"
+            role="option"
+            tabindex="-1"
           >
             07
           </div>
           <div
+            aria-label="08"
+            aria-selected="false"
             class="time-picker-roll-cell"
-            role="button"
-            tabindex="0"
+            role="option"
+            tabindex="-1"
           >
             08
           </div>
           <div
+            aria-label="09"
+            aria-selected="false"
             class="time-picker-roll-cell"
-            role="button"
-            tabindex="0"
+            role="option"
+            tabindex="-1"
           >
             09
           </div>
           <div
+            aria-label="10"
+            aria-selected="false"
             class="time-picker-roll-cell"
-            role="button"
-            tabindex="0"
+            role="option"
+            tabindex="-1"
           >
             10
           </div>
           <div
+            aria-label="11"
+            aria-selected="false"
             class="time-picker-roll-cell"
-            role="button"
-            tabindex="0"
+            role="option"
+            tabindex="-1"
           >
             11
           </div>
           <div
+            aria-label="12"
+            aria-selected="false"
             class="time-picker-roll-cell"
-            role="button"
-            tabindex="0"
+            role="option"
+            tabindex="-1"
           >
             12
           </div>
           <div
+            aria-label="13"
+            aria-selected="false"
             class="time-picker-roll-cell"
-            role="button"
-            tabindex="0"
+            role="option"
+            tabindex="-1"
           >
             13
           </div>
           <div
+            aria-label="14"
+            aria-selected="false"
             class="time-picker-roll-cell"
-            role="button"
-            tabindex="0"
+            role="option"
+            tabindex="-1"
           >
             14
           </div>
           <div
+            aria-label="15"
+            aria-selected="false"
             class="time-picker-roll-cell"
-            role="button"
-            tabindex="0"
+            role="option"
+            tabindex="-1"
           >
             15
           </div>
           <div
+            aria-label="16"
+            aria-selected="false"
             class="time-picker-roll-cell"
-            role="button"
-            tabindex="0"
+            role="option"
+            tabindex="-1"
           >
             16
           </div>
           <div
+            aria-label="17"
+            aria-selected="false"
             class="time-picker-roll-cell"
-            role="button"
-            tabindex="0"
+            role="option"
+            tabindex="-1"
           >
             17
           </div>
           <div
+            aria-label="18"
+            aria-selected="false"
             class="time-picker-roll-cell"
-            role="button"
-            tabindex="0"
+            role="option"
+            tabindex="-1"
           >
             18
           </div>
           <div
+            aria-label="19"
+            aria-selected="false"
             class="time-picker-roll-cell"
-            role="button"
-            tabindex="0"
+            role="option"
+            tabindex="-1"
           >
             19
           </div>
           <div
+            aria-label="20"
+            aria-selected="false"
             class="time-picker-roll-cell"
-            role="button"
-            tabindex="0"
+            role="option"
+            tabindex="-1"
           >
             20
           </div>
           <div
+            aria-label="21"
+            aria-selected="false"
             class="time-picker-roll-cell"
-            role="button"
-            tabindex="0"
+            role="option"
+            tabindex="-1"
           >
             21
           </div>
           <div
+            aria-label="22"
+            aria-selected="false"
             class="time-picker-roll-cell"
-            role="button"
-            tabindex="0"
+            role="option"
+            tabindex="-1"
           >
             22
           </div>
           <div
+            aria-label="23"
+            aria-selected="false"
             class="time-picker-roll-cell"
-            role="button"
-            tabindex="0"
+            role="option"
+            tabindex="-1"
           >
             23
           </div>
           <div
+            aria-label="24"
+            aria-selected="false"
             class="time-picker-roll-cell"
-            role="button"
-            tabindex="0"
+            role="option"
+            tabindex="-1"
           >
             24
           </div>
           <div
+            aria-label="25"
+            aria-selected="false"
             class="time-picker-roll-cell"
-            role="button"
-            tabindex="0"
+            role="option"
+            tabindex="-1"
           >
             25
           </div>
           <div
+            aria-label="26"
+            aria-selected="false"
             class="time-picker-roll-cell"
-            role="button"
-            tabindex="0"
+            role="option"
+            tabindex="-1"
           >
             26
           </div>
           <div
+            aria-label="27"
+            aria-selected="false"
             class="time-picker-roll-cell"
-            role="button"
-            tabindex="0"
+            role="option"
+            tabindex="-1"
           >
             27
           </div>
           <div
+            aria-label="28"
+            aria-selected="false"
             class="time-picker-roll-cell"
-            role="button"
-            tabindex="0"
+            role="option"
+            tabindex="-1"
           >
             28
           </div>
           <div
+            aria-label="29"
+            aria-selected="false"
             class="time-picker-roll-cell"
-            role="button"
-            tabindex="0"
+            role="option"
+            tabindex="-1"
           >
             29
           </div>
           <div
+            aria-label="30"
+            aria-selected="false"
             class="time-picker-roll-cell"
-            role="button"
-            tabindex="0"
+            role="option"
+            tabindex="-1"
           >
             30
           </div>
           <div
+            aria-label="31"
+            aria-selected="false"
             class="time-picker-roll-cell"
-            role="button"
-            tabindex="0"
+            role="option"
+            tabindex="-1"
           >
             31
           </div>
           <div
+            aria-label="32"
+            aria-selected="false"
             class="time-picker-roll-cell"
-            role="button"
-            tabindex="0"
+            role="option"
+            tabindex="-1"
           >
             32
           </div>
           <div
+            aria-label="33"
+            aria-selected="false"
             class="time-picker-roll-cell"
-            role="button"
-            tabindex="0"
+            role="option"
+            tabindex="-1"
           >
             33
           </div>
           <div
+            aria-label="34"
+            aria-selected="false"
             class="time-picker-roll-cell"
-            role="button"
-            tabindex="0"
+            role="option"
+            tabindex="-1"
           >
             34
           </div>
           <div
+            aria-label="35"
+            aria-selected="false"
             class="time-picker-roll-cell"
-            role="button"
-            tabindex="0"
+            role="option"
+            tabindex="-1"
           >
             35
           </div>
           <div
+            aria-label="36"
+            aria-selected="false"
             class="time-picker-roll-cell"
-            role="button"
-            tabindex="0"
+            role="option"
+            tabindex="-1"
           >
             36
           </div>
           <div
+            aria-label="37"
+            aria-selected="false"
             class="time-picker-roll-cell"
-            role="button"
-            tabindex="0"
+            role="option"
+            tabindex="-1"
           >
             37
           </div>
           <div
+            aria-label="38"
+            aria-selected="false"
             class="time-picker-roll-cell"
-            role="button"
-            tabindex="0"
+            role="option"
+            tabindex="-1"
           >
             38
           </div>
           <div
+            aria-label="39"
+            aria-selected="false"
             class="time-picker-roll-cell"
-            role="button"
-            tabindex="0"
+            role="option"
+            tabindex="-1"
           >
             39
           </div>
           <div
+            aria-label="40"
+            aria-selected="false"
             class="time-picker-roll-cell"
-            role="button"
-            tabindex="0"
+            role="option"
+            tabindex="-1"
           >
             40
           </div>
           <div
+            aria-label="41"
+            aria-selected="false"
             class="time-picker-roll-cell"
-            role="button"
-            tabindex="0"
+            role="option"
+            tabindex="-1"
           >
             41
           </div>
           <div
+            aria-label="42"
+            aria-selected="false"
             class="time-picker-roll-cell"
-            role="button"
-            tabindex="0"
+            role="option"
+            tabindex="-1"
           >
             42
           </div>
           <div
+            aria-label="43"
+            aria-selected="false"
             class="time-picker-roll-cell"
-            role="button"
-            tabindex="0"
+            role="option"
+            tabindex="-1"
           >
             43
           </div>
           <div
+            aria-label="44"
+            aria-selected="false"
             class="time-picker-roll-cell"
-            role="button"
-            tabindex="0"
+            role="option"
+            tabindex="-1"
           >
             44
           </div>
           <div
+            aria-label="45"
+            aria-selected="false"
             class="time-picker-roll-cell"
-            role="button"
-            tabindex="0"
+            role="option"
+            tabindex="-1"
           >
             45
           </div>
           <div
+            aria-label="46"
+            aria-selected="false"
             class="time-picker-roll-cell"
-            role="button"
-            tabindex="0"
+            role="option"
+            tabindex="-1"
           >
             46
           </div>
           <div
+            aria-label="47"
+            aria-selected="false"
             class="time-picker-roll-cell"
-            role="button"
-            tabindex="0"
+            role="option"
+            tabindex="-1"
           >
             47
           </div>
           <div
+            aria-label="48"
+            aria-selected="false"
             class="time-picker-roll-cell"
-            role="button"
-            tabindex="0"
+            role="option"
+            tabindex="-1"
           >
             48
           </div>
           <div
+            aria-label="49"
+            aria-selected="false"
             class="time-picker-roll-cell"
-            role="button"
-            tabindex="0"
+            role="option"
+            tabindex="-1"
           >
             49
           </div>
           <div
+            aria-label="50"
+            aria-selected="false"
             class="time-picker-roll-cell"
-            role="button"
-            tabindex="0"
+            role="option"
+            tabindex="-1"
           >
             50
           </div>
           <div
+            aria-label="51"
+            aria-selected="false"
             class="time-picker-roll-cell"
-            role="button"
-            tabindex="0"
+            role="option"
+            tabindex="-1"
           >
             51
           </div>
           <div
+            aria-label="52"
+            aria-selected="false"
             class="time-picker-roll-cell"
-            role="button"
-            tabindex="0"
+            role="option"
+            tabindex="-1"
           >
             52
           </div>
           <div
+            aria-label="53"
+            aria-selected="false"
             class="time-picker-roll-cell"
-            role="button"
-            tabindex="0"
+            role="option"
+            tabindex="-1"
           >
             53
           </div>
           <div
+            aria-label="54"
+            aria-selected="false"
             class="time-picker-roll-cell"
-            role="button"
-            tabindex="0"
+            role="option"
+            tabindex="-1"
           >
             54
           </div>
           <div
+            aria-label="55"
+            aria-selected="false"
             class="time-picker-roll-cell"
-            role="button"
-            tabindex="0"
+            role="option"
+            tabindex="-1"
           >
             55
           </div>
           <div
+            aria-label="56"
+            aria-selected="false"
             class="time-picker-roll-cell"
-            role="button"
-            tabindex="0"
+            role="option"
+            tabindex="-1"
           >
             56
           </div>
           <div
+            aria-label="57"
+            aria-selected="false"
             class="time-picker-roll-cell"
-            role="button"
-            tabindex="0"
+            role="option"
+            tabindex="-1"
           >
             57
           </div>
           <div
+            aria-label="58"
+            aria-selected="false"
             class="time-picker-roll-cell"
-            role="button"
-            tabindex="0"
+            role="option"
+            tabindex="-1"
           >
             58
           </div>
           <div
+            aria-label="59"
+            aria-selected="false"
             class="time-picker-roll-cell"
-            role="button"
-            tabindex="0"
+            role="option"
+            tabindex="-1"
           >
             59
           </div>
         </div>
       </div>
       <div
-        class="picker-footer"
+        class="time-picker-footer"
       >
         <button
           class="btn btn-ghost-primary btn-sm"