playbook_ui 16.1.0.pre.alpha.play2724typeaheadindicator13970 → 16.1.0.pre.alpha.play2771passphraseaccessibility14033

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 8541b6e0d600a07afc16b3a1f87e7851e84af95a8fdf2299b00075eabd2799e7
-  data.tar.gz: 75ff644b0208f6b9da46789cdce6882ec381b3910cb1237694cca0061ab88fe1
+  metadata.gz: db94c53faae46d3ac450cae169b49010d0fea2eef2df809b1b498a803bf97275
+  data.tar.gz: 481cc281f583cd5db425d32dea0bbd0d87cd5fff7093745f3fa674b7900064da
 SHA512:
-  metadata.gz: 7f70875cad44dcc1e4e8429f6720472ee8f38dec0ecd23a540bc40467ded607d0479dcd3f400587749c40159baf4c145375872082e0260d2afbc6f5bf2484beb
-  data.tar.gz: 2ccc12dd5562413ba97d26fdb29fb093c8e9213febc89a52f8c55e223e6c2278279732bcd46c307f50d32018ad3aeff6dd9e387dd6d37c5ae7c6c5cc084fe846
+  metadata.gz: a9dc190816e2a5b470ee310291cf8144b8ab3a2b26e5a251770dfb9b7b3b310c394b8a1d7dd355e21fbd320267ebb4e573a97cd6cfb1816eec07253ac36e9222
+  data.tar.gz: 325c99459bc7e398c41c7437fd373f559b32634dbca9f7119a684fb0166961c8303563f9f7f30cd51edc90843b36235ac7b67180c112d9688b430dfcf653ce38

data/app/pb_kits/playbook/pb_checkbox/_checkbox.scss

@@ -168,4 +168,4 @@ $transition: $transition_cubic;
       border-color: $error;
     }
   }
-}
+}

data/app/pb_kits/playbook/pb_checkbox/_checkbox.tsx

@@ -4,8 +4,6 @@ import Icon from '../pb_icon/_icon'
 import { buildAriaProps, buildCss, buildDataProps, buildHtmlProps } from '../utilities/props'
 import classnames from 'classnames'
 import { globalProps, GlobalProps } from '../utilities/globalProps'
-import colors from '../tokens/exports/_colors.module.scss'
-import spacing from '../tokens/exports/_spacing.module.scss'
 
 type CheckboxProps = {
   aria?: {[key: string]: string},
@@ -21,7 +19,6 @@ type CheckboxProps = {
   indeterminate?: boolean,
   name?: string,
   onChange?: (event: React.FormEvent<HTMLInputElement>) => void,
-  requiredIndicator?: boolean,
   tabIndex?: number,
   text?: string,
   value?: string,
@@ -42,7 +39,6 @@ const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>((props, ref) => {
     indeterminate = false,
     name = '',
     onChange = () => { void 0 },
-    requiredIndicator = false,
     tabIndex,
     text = '',
     value = '',
@@ -128,20 +124,7 @@ const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>((props, ref) => {
           variant={null}
       >
         {text}
-        {requiredIndicator && (
-          <span
-              aria-hidden="true"
-              className="pb_required_indicator"
-              style={{
-                color: colors.error,
-                marginLeft: spacing.space_xs,
-              }}
-          >
-           {'*'}
-          </span>
-        )}
       </Body>
-
     </label>
   )
 })

data/app/pb_kits/playbook/pb_checkbox/checkbox.html.erb

@@ -5,15 +5,6 @@
     <%= pb_rails("icon", props: { icon: "minus", classname: "indeterminate_icon hidden", fixed_width: true}) %>
   </span>
   <span class="pb_checkbox_label">
-    <%= pb_rails("body", props: { status: object.checkbox_label_status, dark: object.dark, margin_right: object.form_spacing ? "xs" : "" }) do %>
-      <%= object.text%>
-      <% if object.required_indicator %>
-        <span
-          class="pb_checkbox_required_indicator"
-          aria-hidden="true"
-          style="color: #DA0014;"
-        >*</span>
-      <% end %>
-    <% end %>
+    <%= pb_rails("body", props: { status: object.checkbox_label_status, text: object.text, dark: object.dark, margin_right: object.form_spacing ? "xs" : "" }) %>
   </span>
 <% end %>

data/app/pb_kits/playbook/pb_checkbox/checkbox.rb

@@ -23,8 +23,6 @@ module Playbook
       prop :hidden_input, type: Playbook::Props::Boolean,
                           default: false
       prop :hidden_value
-      prop :required_indicator, type: Playbook::Props::Boolean,
-                                default: false
 
       def classname
         generate_classname("pb_checkbox_kit", checked_class) + error_class

data/app/pb_kits/playbook/pb_checkbox/docs/example.yml

@@ -8,7 +8,6 @@ examples:
     - checkbox_indeterminate: Indeterminate Checkbox
     - checkbox_disabled: Disabled Checkbox
     - checkbox_form: Form and Hidden Input
-    # - checkbox_required_indicator: Required Indicator
 
   react:
   - checkbox_default: Default
@@ -18,7 +17,6 @@ examples:
   - checkbox_error: Default w/ Error
   - checkbox_indeterminate: Indeterminate Checkbox
   - checkbox_disabled: Disabled Checkbox
-  # - checkbox_required_indicator: Required Indicator
 
   swift:
     - checkbox_default_swift: Default

data/app/pb_kits/playbook/pb_checkbox/docs/index.js

@@ -5,4 +5,3 @@ export { default as CheckboxError } from './_checkbox_error.jsx'
 export { default as CheckboxChecked } from './_checkbox_checked.jsx'
 export { default as CheckboxIndeterminate } from './_checkbox_indeterminate.jsx'
 export { default as CheckboxDisabled } from './_checkbox_disabled.jsx'
-export { default as CheckboxRequiredIndicator } from './_checkbox_required_indicator.jsx'

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

@@ -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

@@ -0,0 +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

@@ -1,16 +1,15 @@
 <%= pb_form_with(scope: :example, url: "", method: :get, validate: true) do |form| %>
-  <%= form.typeahead :example_typeahead_field, props: { label: true, required: true, required_indicator: true } %>
   <%= form.text_field :example_text_field, props: { label: true, required: true, required_indicator: true } %>
   <%= form.text_field :example_text_field_2, props: { label: "Text Field Custom Label", required: true, required_indicator: true } %>
-  <%= form.phone_number_field :example_phone_number_field, props: { label: true, required: true, required_indicator: true } %>
+  <%= form.text_area :example_text_area, props: { label: true, required: true, required_indicator: true } %>
+  <%= form.text_area :example_text_area_2, props: { label: "Textarea Custom Label", required: true, required_indicator: true } %>
   <%= form.email_field :example_email_field, props: { label: true, required: true, required_indicator: true } %>
   <%= form.number_field :example_number_field, props: { label: true, required: true, required_indicator: true } %>
   <%= form.search_field :example_search_field, props: { label: true, required: true, required_indicator: true } %>
   <%= 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.text_area :example_text_area, props: { label: true, required: true, required_indicator: true } %>
-  <%= form.text_area :example_text_area_2, props: { label: "Textarea Custom Label", required: true, required_indicator: true } %>
-  <%# <%= form.check_box :example_checkbox, props: { label: true, text: "Checkbox Label", 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

@@ -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_passphrase/_passphrase.tsx

@@ -178,22 +178,40 @@ const Passphrase = (props: PassphraseProps): React.ReactElement => {
               {...inputProps}
           />
           <span
+              aria-label={
+                showPassphrase
+                  ? "Passphrase currently visible. Click icon to hide password"
+                  : "Passphrase currently hidden. Click icon to reveal password"
+              }
+              aria-pressed={showPassphrase}
               className="show-passphrase-icon"
               onClick={toggleShowPassphrase}
+              onKeyDown={(e) => {
+                if (e.key === "Enter" || e.key === " ") {
+                  e.preventDefault()
+                  toggleShowPassphrase(e as any)
+                }
+              }}
+              role="button"
+              tabIndex={0}
           >
             <Body
                 className={showPassphrase ? "hide-icon" : ""}
                 color="light"
                 dark={dark}
             >
-              <Icon icon="eye-slash" />
+              <Icon 
+                  aria={{ label: "eye icon" }} 
+                  icon="eye-slash" 
+              />
             </Body>
             <Body
                 className={showPassphrase ? "" : "hide-icon"}
                 color="light"
                 dark={dark}
             >
-            <Icon  
+            <Icon 
+                aria={{ label: "eye icon" }} 
                 className="svg-inline--fa"
                 customIcon={eyeIcon.icon as unknown as { [key: string]: SVGElement }}
             />

data/app/pb_kits/playbook/pb_text_input/text_input.html.erb

@@ -1,16 +1,15 @@
-<%= pb_content_tag(:div, id: nil) do %>
+<%= pb_content_tag(:div, id: nil ) do  %>
   <% if object.label.present? %>
-    <label for="<%= object.input_options[:id] || object.id %>">
-      <% if object.required_indicator %>
-        <%= pb_rails("caption", props: { dark: object.dark, classname: "pb_text_input_kit_label" }) do %>
-          <%= object.label %><span style="color: #DA0014;"> *</span>
-        <% end %>
-      <% else %>
-        <%= pb_rails("caption", props: { text: object.label, dark: object.dark, classname: "pb_text_input_kit_label" }) %>
+  <label for="<%= object.input_options[:id] || object.id %>" >
+    <% if object.required_indicator %>
+      <%= pb_rails("caption", props: { dark: object.dark, classname: "pb_text_input_kit_label" }) do %>
+        <%= object.label %><span style="color: #DA0014;"> *</span>
       <% end %>
-    </label>
+    <% else %>
+    <%= pb_rails("caption", props: { text: object.label, dark: object.dark, classname: "pb_text_input_kit_label" }) %>
+    <% end %>
+  </label>
   <% end %>
-
   <%= content_tag(:div, class: "#{add_on_class} text_input_wrapper") do %>
     <% if content.present? %>
       <%= content %>
@@ -27,3 +26,4 @@
     <%= 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" }}) if object.error %>
   <% end %>
 <% end %>
+

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

@@ -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

@@ -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

@@ -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

@@ -0,0 +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

@@ -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

@@ -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

@@ -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}