RubyGems - playbook_ui - Versions diffs - 16.1.0.pre.alpha.PLAY277013976 → 16.1.0.pre.alpha.PLAY277014019 - Mend

playbook_ui 16.1.0.pre.alpha.PLAY277013976 → 16.1.0.pre.alpha.PLAY277014019

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (34) hide show

checksums.yaml CHANGED Viewed

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 20d0e323a27105cf7e8461882ce7f5583274e5b1e98e583c2bc4619df555c0b5
-  data.tar.gz: b2504aaf9ae1131b25172450253ffb6c19e3bedcfc27b639f90c0c7452cc86a7
+  metadata.gz: c80372f38c690f8a892d1558660133f123bd5fdab59ee755fb09517e3ea094c6
+  data.tar.gz: 03c79eade34ad7bf5f7df371fe01754f406ff0e6542f4091917a3de83970d3f9
 SHA512:
-  metadata.gz: 3c8a45b0dce0af74401d7c7c0b38337785a5764dc25b146b0ac5599bba9dcbedb0bf4d01f4a23636a7ac28b33c91f3500cfc500a636adc72c9868eb4ff125ac1
-  data.tar.gz: fc2d676c70f12a2e4350516925b918e1b81cda11b7073370fc3d98f9bf7de550993131bd504daf90f48c709a460563c1805fbe78da150ed80b29e1539d717ca9
+  metadata.gz: d943d2f57817921271bccba33530e373199c84cbecfc3d895a8189ecba601ae9ec319d04dd140f897d72a9a61d6e1e9c56460a4298abe077a17ae1247a748e5f
+  data.tar.gz: cec79e75ecb7caca2ff6a9286596236d72dc4dab14b5b3f51169fb05ca11960e8e7482c53a1a0fbdd8698c337bed0001a0c1827b2772a4ab4752606219b82490

data/app/pb_kits/playbook/pb_date_picker/_date_picker.tsx CHANGED Viewed

@@ -40,7 +40,7 @@ type DatePickerProps = {
   maxDate: string,
   minDate: string,
   name: string,
-  pickerId?: string,
+  pickerId: string,
   placeholder?: string,
   positionElement?: HTMLElement | null,
   scrollContainer?: string,
@@ -196,6 +196,8 @@ const DatePicker = (props: DatePickerProps): React.ReactElement => {
   const angleDown = getAllIcons()["angleDown"].icon as unknown as { [key: string]: SVGElement }
+  const errorId = error ? `${pickerId}-error` : undefined
   return (
     <div
         {...ariaProps}
@@ -211,14 +213,18 @@ const DatePicker = (props: DatePickerProps): React.ReactElement => {
       >
         {!hideLabel && (
-          <Caption
-              className="pb_date_picker_kit_label"
-              text={label}
-          />
+           <label htmlFor={pickerId}>
+            <Caption
+                className="pb_date_picker_kit_label"
+                text={label}
+            />
+          </label>
         )}
           <>
             <div className="date_picker_input_wrapper">
               <input
+                  aria-describedby={errorId}
+                  aria-invalid={!!error}
                   autoComplete="off"
                   className="date_picker_input"
                   disabled={disableInput}
@@ -232,6 +238,9 @@ const DatePicker = (props: DatePickerProps): React.ReactElement => {
               {error &&
                   <Body
+                      aria={{ atomic: "true", live: "polite" }}
+                      htmlOptions={{ role: "alert" }}
+                      id={errorId}
                       status="negative"
                       text={error}
                       variant={null}

data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_default.md ADDED Viewed

	@@ -0,0 +1 @@
1	+ `pickerId`/`picker_id` is a required prop to instantiate the Date Picker. The presence of `pickerId`/`picker_id` in your Date Picker also associates the label with the input, providing the ability to focus the Date Picker by clicking the label.

data/app/pb_kits/playbook/pb_form/docs/_form_with_required_indicator.html.erb CHANGED Viewed

@@ -9,6 +9,7 @@
   <%= form.password_field :example_password_field, props: { label: true, required: true, required_indicator: true } %>
   <%= form.url_field :example_url_field, props: { label: true, required: true, required_indicator: true } %>
   <%= form.phone_number_field :example_phone_number_field, props: { label: true, required: true, required_indicator: true } %>
+  <%= form.time_picker :example_time_picker_required_indicator, props: { label: true, required: true, required_indicator: true } %>
   <%= form.actions do |action| %>
     <%= action.submit %>

data/app/pb_kits/playbook/pb_form/pb_form_validation.js CHANGED Viewed

@@ -26,6 +26,10 @@ class PbFormValidation extends PbEnhancedElement {
       const isPhoneNumberInput = field.closest('.pb_phone_number_input')
       if (isPhoneNumberInput) return
+      // Skip TimePicker inputs - they handle their own validation
+      const isTimePickerInput = field.closest('.pb_time_picker')
+      if (isTimePickerInput) return
       FIELD_EVENTS.forEach((e) => {
         field.addEventListener(e, debounce((event) => {
           this.validateFormField(event)
@@ -67,13 +71,16 @@ class PbFormValidation extends PbEnhancedElement {
     // Check if this is a phone number input
     const isPhoneNumberInput = kitElement.classList.contains('pb_phone_number_input')
+    // Check if this is a TimePicker input
+    const isTimePickerInput = kitElement.classList.contains('pb_time_picker')
     // ensure clean error message state
     this.clearError(target)
     kitElement.classList.add('error')
-    // Only add error message if it's NOT a phone number input
-    if (!isPhoneNumberInput) {
+    // Only add error message if it's NOT a phone number input or TimePicker input
+    if (!isPhoneNumberInput && !isTimePickerInput) {
       // set the error message element
       const errorMessageContainer = this.errorMessageContainer

data/app/pb_kits/playbook/pb_rich_text_editor/_rich_text_editor.tsx CHANGED Viewed

@@ -94,8 +94,8 @@ const RichTextEditor = (props: RichTextEditorProps): React.ReactElement => {
   const htmlProps = buildHtmlProps(htmlOptions)
-  const fieldId = (inputOptions.id as string) || (id as string) || null
-  const labelElementId = `${fieldId}-label`
+  const fieldId = id ? (id as string) : null
+  const labelElementId = fieldId ? `${fieldId}-label` : null
   const handleOnEditorReady = (editorInstance: Editor) => {
     setEditor(editorInstance)
@@ -104,18 +104,32 @@ const RichTextEditor = (props: RichTextEditorProps): React.ReactElement => {
       const oldId = editorInstance.element?.getAttribute("input")
       if (!oldId) return
-      const hiddenInput = document.getElementById(oldId)
+      const hiddenInput = document.getElementById(oldId) as HTMLElement | null
       if (!hiddenInput) return
-      if (inputOptions.name) hiddenInput.setAttribute("name", inputOptions.name as string)
+      const hiddenInputId = (inputOptions.id as string) || oldId
-      editorInstance.element.id = fieldId
-      editorInstance.element.setAttribute("aria-labelledby", labelElementId)
+      if (hiddenInputId !== oldId) {
+        hiddenInput.id = hiddenInputId
+        editorInstance.element?.setAttribute("input", hiddenInputId)
+      }
+      if (inputOptions.name) {
+        hiddenInput.setAttribute("name", inputOptions.name as string)
+      }
+      const editorDomId = (id as string) || `${hiddenInputId}_trix`
+      const trixLabelId = ((id as string) || hiddenInputId) + "-label"
+      if (label) {
+        editorInstance.element?.setAttribute("aria-labelledby", trixLabelId)
+      }
+      editorInstance.element!.id = editorDomId
     })
   }
   useEffect(() => {
-    if (!advancedEditor) return
+    if (!advancedEditor || !fieldId || !labelElementId) return
     const dom = advancedEditor.view?.dom as HTMLElement | undefined
     if (!dom) return
@@ -123,7 +137,6 @@ const RichTextEditor = (props: RichTextEditorProps): React.ReactElement => {
     dom.setAttribute("aria-labelledby", labelElementId)
     dom.setAttribute("role", "textbox")
     dom.setAttribute("aria-multiline", "true")
   }, [advancedEditor, fieldId, labelElementId])
   // DOM manipulation must wait for editor to be ready
@@ -227,6 +240,8 @@ const RichTextEditor = (props: RichTextEditorProps): React.ReactElement => {
   // Determine if toolbar should be shown
   const shouldShowToolbar = focus && advancedEditor ? showToolbarOnFocus : advancedEditorToolbar
+  const labelFor = advancedEditor ? fieldId : (id ? id : (inputOptions.id ? `${inputOptions.id}_trix` : undefined))
   return (
     <div
         {...ariaProps}
@@ -237,10 +252,9 @@ const RichTextEditor = (props: RichTextEditorProps): React.ReactElement => {
     >
     {label && (
       <label
-          htmlFor={fieldId}
-          id={labelElementId}
+          {...(labelFor ? { htmlFor: labelFor, id: labelElementId } : {})}
           onMouseDown={(e) => {
-          if (!advancedEditor) return
+            if (!advancedEditor || !fieldId) return
             e.preventDefault()
             advancedEditor.commands.focus()
           }}
@@ -267,9 +281,9 @@ const RichTextEditor = (props: RichTextEditorProps): React.ReactElement => {
         advancedEditor ? (
           <div
               className={classnames(
-                "pb_rich_text_editor_advanced_container",
-                { [`input_height_${inputHeight}`]: !!inputHeight,[`input_min_height_${inputMinHeight}`]: !!inputMinHeight ,["toolbar-active"]: shouldShowToolbar }
-              )}
+              "pb_rich_text_editor_advanced_container",
+              { [`input_height_${inputHeight}`]: !!inputHeight,[`input_min_height_${inputMinHeight}`]: !!inputMinHeight ,["toolbar-active"]: shouldShowToolbar }
+            )}
           >
             {shouldShowToolbar && (
               <EditorToolbar editor={advancedEditor}

data/app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_advanced_label.jsx ADDED Viewed

@@ -0,0 +1,44 @@
+import React from 'react'
+import RichTextEditor from '../../pb_rich_text_editor/_rich_text_editor'
+import { useEditor, EditorContent } from "@tiptap/react"
+import StarterKit from "@tiptap/starter-kit"
+import Link from '@tiptap/extension-link'
+const RichTextEditorAdvancedLabel = (props) => {
+    const editor = useEditor({
+      extensions: [StarterKit, Link],
+      content: "Add your text here. You can format your text, add links, quotes, and bullets.",
+    })
+    const editorNoLabel = useEditor({
+      extensions: [StarterKit, Link],
+      content: "Add your text here. You can format your text, add links, quotes, and bullets.",
+    })
+    if (!editor || !editorNoLabel) return null
+  return (
+    <div>
+      <RichTextEditor
+          advancedEditor={editor}
+          id={"advanced-example"}
+          label="Advanced Example Label"
+          {...props}
+      >
+        <EditorContent editor={editor}/>
+      </RichTextEditor>
+      <br/>
+      <RichTextEditor
+          advancedEditor={editorNoLabel}
+          label="Advanced Example Label No ID"
+          {...props}
+      >
+        <EditorContent editor={editorNoLabel}/>
+      </RichTextEditor>
+    </div>
+  )
+}
+export default RichTextEditorAdvancedLabel

data/app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_advanced_label.md ADDED Viewed

	@@ -0,0 +1 @@
1	+ The optional `label` prop adds a visible label to the advanced editor. Passing in the `id` prop associates the `label` with the editor for accessibility, enabling screen reader support and label-based focus behavior.

data/app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_label.jsx ADDED Viewed

@@ -0,0 +1,28 @@
+import React, { useState } from 'react'
+import RichTextEditor from '../../pb_rich_text_editor/_rich_text_editor'
+const RichTextEditorLabel = (props) => {
+  const [value, setValue] = useState(''),
+  handleOnChange = (html) => setValue(html)
+  return (
+    <div>
+      <RichTextEditor
+          id="example"
+          label="Example Label"
+          onChange={handleOnChange}
+          value={value}
+          {...props}
+      />
+      <br/>
+      <RichTextEditor
+          label="Example Label No ID"
+          onChange={handleOnChange}
+          value={value}
+          {...props}
+      />
+    </div>
+  )
+}
+export default RichTextEditorLabel

data/app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_label.md ADDED Viewed

	@@ -0,0 +1 @@
1	+ The optional `label` prop adds a visible label to the editor. Passing in the `id` prop associates the `label` with the editor for accessibility, enabling screen reader support and label-based focus behavior.

data/app/pb_kits/playbook/pb_rich_text_editor/docs/example.yml CHANGED Viewed

@@ -32,6 +32,8 @@ examples:
   - rich_text_editor_advanced_inline: Advanced (Inline)
   - rich_text_editor_advanced_height: Advanced Height
   - rich_text_editor_advanced_min_height: Advanced Min Height
+  - rich_text_editor_label: Label
+  - rich_text_editor_advanced_label: Advanced (Label)
   - rich_text_editor_required_indicator: Required Indicator
   - rich_text_editor_advanced_required_indicator: Advanced Required Indicator
   - rich_text_editor_preview: Preview

data/app/pb_kits/playbook/pb_rich_text_editor/docs/index.js CHANGED Viewed

@@ -21,3 +21,5 @@ export { default as RichTextEditorAdvancedHeight } from './_rich_text_editor_adv
 export { default as RichTextEditorAdvancedMinHeight } from './_rich_text_editor_advanced_min_height.jsx'
 export { default as RichTextEditorRequiredIndicator } from './_rich_text_editor_required_indicator.jsx'
 export { default as RichTextEditorAdvancedRequiredIndicator } from './_rich_text_editor_advanced_required_indicator.jsx'
+export { default as RichTextEditorLabel } from './_rich_text_editor_label.jsx'
+export { default as RichTextEditorAdvancedLabel } from './_rich_text_editor_advanced_label.jsx'

data/app/pb_kits/playbook/pb_textarea/_textarea.tsx CHANGED Viewed

@@ -120,6 +120,7 @@ const Textarea = ({
   const characterCounter = () => {
     return maxCharacters && characterCount ? `${checkIfZero(characterCount)} / ${maxCharacters}` : `${checkIfZero(characterCount)}`
   }
+  const errorId = error ? `${id}-error` : undefined
   return (
     <div
@@ -145,7 +146,10 @@ const Textarea = ({
     )}
       {children || (
         <textarea
+            aria-describedby={errorId}
+            aria-invalid={!!error}
             disabled={disabled}
+            id={id}
             name={name}
             onChange={emojiMask ? handleChange : onChange}
             onPaste={emojiMask ? handlePaste : undefined}
@@ -167,6 +171,9 @@ const Textarea = ({
             >
               <FlexItem>
                 <Body
+                    aria={{ atomic: "true", live: "polite" }}
+                    htmlOptions={{ role: "alert" }}
+                    id={errorId}
                     margin="none"
                     status="negative"
                     text={error}
@@ -182,6 +189,9 @@ const Textarea = ({
             </Flex>
           ) : (
             <Body
+                aria={{ atomic: "true", live: "polite" }}
+                htmlOptions={{ role: "alert" }}
+                id={errorId}
                 status="negative"
                 text={error}
             />

data/app/pb_kits/playbook/pb_textarea/docs/_textarea_default.html.erb CHANGED Viewed

@@ -1,9 +1,9 @@
-<%= pb_rails("textarea", props: { label: "Label", rows: 4}) %>
+<%= pb_rails("textarea", props: { label: "Label", rows: 4, id: "default-example-1" }) %>
 <br/>
-<%= pb_rails("textarea", props: { label: "Label", placeholder: "Placeholder text" }) %>
+<%= pb_rails("textarea", props: { label: "Label", placeholder: "Placeholder text", id: "default-example-2" }) %>
 <br/>
-<%= pb_rails("textarea", props: { label: "Label", name: "comment", value: "Default value text" }) %>
+<%= pb_rails("textarea", props: { label: "Label", name: "comment", value: "Default value text", id: "default-example-3" }) %>

data/app/pb_kits/playbook/pb_textarea/docs/_textarea_default.jsx CHANGED Viewed

@@ -13,6 +13,7 @@ const TextareaDefault = (props) => {
           label="Label"
           rows={4}
           {...props}
+          id="default-example-1"
       />
       <br />
@@ -21,6 +22,7 @@ const TextareaDefault = (props) => {
           label="Label"
           placeholder="Placeholder text"
           {...props}
+          id="default-example-2"
       />
       <br />
@@ -32,6 +34,7 @@ const TextareaDefault = (props) => {
           placeholder="Placeholder text"
           value={value}
           {...props}
+          id="default-example-3"
       />
     </div>

data/app/pb_kits/playbook/pb_textarea/docs/_textarea_default.md ADDED Viewed

	@@ -0,0 +1 @@
1	+ Add an `id` to your Textarea so that clicking the label will move focus directly to the input.

data/app/pb_kits/playbook/pb_textarea/textarea.html.erb CHANGED Viewed

@@ -1,12 +1,14 @@
-<%= pb_content_tag do %>
+<%= pb_content_tag(:div, id: nil) do %>
   <% if object.label.present? %>
-    <% if object.required_indicator %>
-      <%= pb_rails("caption", props: { text: object.label, dark: object.dark }) do %>
-        <%= object.label %><span style="color: #DA0014;"> *</span>
+    <label for="<%= object.input_options[:id] || object.id %>" >
+      <% if object.required_indicator %>
+        <%= pb_rails("caption", props: { text: object.label, dark: object.dark }) do %>
+          <%= object.label %><span style="color: #DA0014;"> *</span>
+        <% end %>
+      <% else %>
+        <%= pb_rails("caption", props: {text: object.label, dark: object.dark}) %>
       <% end %>
-    <% else %>
-    <%= pb_rails("caption", props: {text: object.label, dark: object.dark}) %>
-    <% end %>
+    </label>
   <% end %>
   <% if content.present? %>
     <%= content %>
@@ -22,14 +24,28 @@
       <% if object.character_count %>
         <%= pb_rails("flex", props: { spacing: "between", vertical: "center" }) do %>
           <%= pb_rails("flex/flex_item") do %>
-             <%= pb_rails("body", props: { dark: object.dark, status: "negative", text: object.error }) %>
+            <%= pb_rails("body", props: {
+              dark: object.dark,
+              status: "negative",
+              text: object.error,
+              id: object.error_id,
+              aria: { atomic: "true", live: "polite" },
+              html_options: { role: "alert" },
+            }) %>
           <% end %>
           <%= pb_rails("flex/flex_item") do %>
             <%= pb_rails("caption", props: { margin: "none", size: "xs", text: object.character_counter }) %>
           <% end %>
         <% end %>
       <% else %>
-        <%= pb_rails("body", props: { dark: object.dark, status: "negative", text: object.error }) %>
+        <%= pb_rails("body", props: {
+          dark: object.dark,
+          status: "negative",
+          text: object.error,
+          id: object.error_id,
+          aria: { atomic: "true", live: "polite" },
+          html_options: { role: "alert" },
+        }) %>
       <% end %>
     <% else %>
       <%= pb_rails("caption", props: { margin: "none", size: "xs", text: object.character_counter }) %>

data/app/pb_kits/playbook/pb_textarea/textarea.rb CHANGED Viewed

@@ -47,7 +47,9 @@ module Playbook
         merged_data = data_attrs.merge(input_data)
         base_attributes = {
-          id: input_options[:id] || "object_method",
+          'aria-describedby': error.present? ? error_id : nil,
+          'aria-invalid': error.present?,
+          id: input_options[:id] || id || "object_method",
           max_characters: max_characters,
           name: name,
           onkeyup: onkeyup,
@@ -66,6 +68,10 @@ module Playbook
         result
       end
+      def error_id
+        "#{id}-error" if error.present?
+      end
     private
       def error_class

data/app/pb_kits/playbook/pb_time_picker/_time_picker.tsx CHANGED Viewed

@@ -5,12 +5,12 @@ import { globalProps, GlobalProps } from '../utilities/globalProps'
 import Caption from '../pb_caption/_caption'
 import SelectableCard from '../pb_selectable_card/_selectable_card'
 import TextInput from '../pb_text_input/_text_input'
+import colors from '../tokens/exports/_colors.module.scss'
 import {
   parseTime,
   parseTimeToMinutes,
   isTimeInRange as isTimeInRangeHelper,
-  isHourDisabled as isHourDisabledHelper,
   isAnyAMTimeValid as isAnyAMTimeValidHelper,
   isAnyPMTimeValid as isAnyPMTimeValidHelper,
   getDisplayTime,
@@ -48,6 +48,7 @@ type TimePickerProps = {
   onChange?: (time: string) => void,
   onClose?: (time: string) => void,
   required?: boolean,
+  requiredIndicator?: boolean,
   showTimezone?: boolean,
   timeFormat?: TimeFormat,
   validationMessage?: string,
@@ -72,6 +73,7 @@ const TimePicker = (props: TimePickerProps): JSX.Element => {
     onChange,
     onClose,
     required = false,
+    requiredIndicator = false,
     showTimezone = false,
     timeFormat = 'AMPM',
     validationMessage,
@@ -114,10 +116,6 @@ const TimePicker = (props: TimePickerProps): JSX.Element => {
     return isTimeInRangeHelper(h, m, mer, timeFormat, minTimeMinutes, maxTimeMinutes)
   }
-  const isHourDisabled = (h: number, mer?: 'AM' | 'PM'): boolean => {
-    return isHourDisabledHelper(h, mer, timeFormat, minTimeMinutes, maxTimeMinutes)
-  }
   const isCurrentTimeValid = (h: number, m: number, mer: 'AM' | 'PM'): boolean => {
     return isTimeInRange(h, m, mer)
   }
@@ -187,6 +185,28 @@ const TimePicker = (props: TimePickerProps): JSX.Element => {
   const [showHourDropdown, setShowHourDropdown] = useState(false)
   const [showMinuteDropdown, setShowMinuteDropdown] = useState(false)
+  // Clicking the clock add-on opens the dropdown
+  useEffect(() => {
+    if (disabled) return
+    const addOnCard = document.querySelector(`#${uniqueId}-input`)?.closest('.text_input_wrapper_add_on')?.querySelector('.add-on-card') as HTMLElement
+    if (addOnCard) {
+      const handleAddOnClick = (e: Event) => {
+        e.preventDefault()
+        e.stopPropagation()
+        setShowDropdown(true)
+      }
+      addOnCard.addEventListener('click', handleAddOnClick)
+      addOnCard.style.cursor = 'pointer'
+      return () => {
+        addOnCard.removeEventListener('click', handleAddOnClick)
+      }
+    }
+  }, [uniqueId, disabled, setShowDropdown])
   // Input dropdown scrolling
   const scrollDropdownToSelected = (dropdownRef: React.RefObject<HTMLDivElement>) => {
     if (dropdownRef.current) {
@@ -369,6 +389,10 @@ const TimePicker = (props: TimePickerProps): JSX.Element => {
     }
   }
+  const handleHourFocus = (e: React.FocusEvent<HTMLInputElement>) => {
+    e.target.select()
+  }
   const handleHourBlur = () => {
     const result = normalizeHourOnBlur(hourInputValue, hour, timeFormat)
     setHour(result.hour)
@@ -393,6 +417,10 @@ const TimePicker = (props: TimePickerProps): JSX.Element => {
     }
   }
+  const handleMinuteFocus = (e: React.FocusEvent<HTMLInputElement>) => {
+    e.target.select()
+  }
   const handleMinuteBlur = () => {
     const result = normalizeMinuteOnBlur(minuteInputValue, minute)
     setMinute(result.minute)
@@ -482,6 +510,30 @@ const TimePicker = (props: TimePickerProps): JSX.Element => {
       e.preventDefault()
       setShowHourDropdown(false)
       closeDropdown()
+    } else if (e.key === 'ArrowDown') {
+      // ArrowDown increases value (like scrolling down a list)
+      e.preventDefault()
+      const { maxHour, minHour } = getHourConstraints(timeFormat)
+      const newHour = hour >= maxHour ? minHour : hour + 1
+      setHour(newHour)
+      setHourInputValue(timeFormat === '24hour' ? newHour.toString().padStart(2, '0') : newHour.toString())
+      setHasSelectedTime(true)
+      const timeString = get24HourTime(newHour, minute, meridiem, timeFormat)
+      if (onChange) {
+        onChange(timeString)
+      }
+    } else if (e.key === 'ArrowUp') {
+      // ArrowUp decreases value (like scrolling up a list)
+      e.preventDefault()
+      const { maxHour, minHour } = getHourConstraints(timeFormat)
+      const newHour = hour <= minHour ? maxHour : hour - 1
+      setHour(newHour)
+      setHourInputValue(timeFormat === '24hour' ? newHour.toString().padStart(2, '0') : newHour.toString())
+      setHasSelectedTime(true)
+      const timeString = get24HourTime(newHour, minute, meridiem, timeFormat)
+      if (onChange) {
+        onChange(timeString)
+      }
     }
   }
@@ -513,6 +565,28 @@ const TimePicker = (props: TimePickerProps): JSX.Element => {
       e.preventDefault()
       setShowMinuteDropdown(false)
       closeDropdown()
+    } else if (e.key === 'ArrowDown') {
+      // ArrowDown increases value (like scrolling down a list)
+      e.preventDefault()
+      const newMinute = minute >= 59 ? 0 : minute + 1
+      setMinute(newMinute)
+      setMinuteInputValue(newMinute.toString().padStart(2, '0'))
+      setHasSelectedTime(true)
+      const timeString = get24HourTime(hour, newMinute, meridiem, timeFormat)
+      if (onChange) {
+        onChange(timeString)
+      }
+    } else if (e.key === 'ArrowUp') {
+      // ArrowUp decreases value (like scrolling up a list)
+      e.preventDefault()
+      const newMinute = minute <= 0 ? 59 : minute - 1
+      setMinute(newMinute)
+      setMinuteInputValue(newMinute.toString().padStart(2, '0'))
+      setHasSelectedTime(true)
+      const timeString = get24HourTime(hour, newMinute, meridiem, timeFormat)
+      if (onChange) {
+        onChange(timeString)
+      }
     }
   }
@@ -625,12 +699,22 @@ const TimePicker = (props: TimePickerProps): JSX.Element => {
     >
       {label && (
         <label htmlFor={`${uniqueId}-input`}>
-          <Caption
-              className="pb_time_picker_kit_label"
-              marginBottom="xs"
-              size="md"
-              text={label}
-          />
+          {requiredIndicator ? (
+            <Caption
+                className="pb_time_picker_kit_label"
+                marginBottom="xs"
+                size="md"
+            >
+              {label} <span style={{ color: `${colors.error}` }}>{'*'}</span>
+            </Caption>
+          ) : (
+            <Caption
+                className="pb_time_picker_kit_label"
+                marginBottom="xs"
+                size="md"
+                text={label}
+            />
+          )}
         </label>
       )}
       <div className="time_picker_wrapper">
@@ -689,6 +773,7 @@ const TimePicker = (props: TimePickerProps): JSX.Element => {
                     onBlur={handleHourBlur}
                     onChange={handleHourChange}
                     onClick={() => { setShowHourDropdown(!showHourDropdown); setShowMinuteDropdown(false) }}
+                    onFocus={handleHourFocus}
                     onKeyDown={handleHourKeyDown}
                     pattern="[0-9]*"
                     ref={hourInputRef}
@@ -734,6 +819,7 @@ const TimePicker = (props: TimePickerProps): JSX.Element => {
                     onBlur={handleMinuteBlur}
                     onChange={handleMinuteChange}
                     onClick={() => { setShowMinuteDropdown(!showMinuteDropdown); setShowHourDropdown(false) }}
+                    onFocus={handleMinuteFocus}
                     onKeyDown={handleMinuteKeyDown}
                     pattern="[0-9]*"
                     ref={minuteInputRef}