playbook_ui 15.1.0.pre.alpha.PLAY2425textinputaccessibility10907 → 15.1.0.pre.alpha.PLAY2468phonenuminputvalidation10958

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 035454cb65ebb23e13c71c6e36d3873a2a33a02844f64b859986cfa996791ac1
-  data.tar.gz: 18f3d951507cd95d6b141fabaa2ab49d7307a6b373b6a32ba8b50295b4888648
+  metadata.gz: 72cfd26d4607165f040c9d27f0ce24d777167b2f2f584228fdfeaf336b423687
+  data.tar.gz: 699ecdaa5c3077dc49bb8c09a2ce16c21498ddce86d838a11392536b2bec4399
 SHA512:
-  metadata.gz: 2213e36a01dd1a174e83a9dd8ac269c1a5de115885bf786f8896c36cedc9e0d66d7334037db9ec01c778d1957fd8e19c1fe44eeeddba7c8bacddfa4f7975f4cf
-  data.tar.gz: afb376f3f3b31f525ec7edf64fdd413769f8a819ec2fee999a389f0041a2a2f8aca832a04eea1fdf44a77cf2ec43a7bc118f1eafc35eb3df434b4f9a31735ef7
+  metadata.gz: e2f168293a3cbe4bbe2cfeb6acd637eb573d9523c17c3387f10e49b217e691e54e4d71dea4343bf64d8caeee97423dc7c0f97a9828200a5a1ead0e0f42539ac8
+  data.tar.gz: 4f58b9a3e38cc655712a2dd9d95a775f900d5d3a4689cdb12fa9a6998f778bb5fe73986ead2c3697d44f2a0f88790e75ff5aed0d82ea4cb66d216ec1c041edf9

data/app/pb_kits/playbook/pb_button/docs/_button_managed_disabled.html.erb

@@ -0,0 +1,31 @@
+  <%= pb_rails("body", props: { text: "Click to disable the Buttons below", id: "toggle-disabled-demo", cursor: "pointer", color:"link", margin_bottom:"sm" }) %>
+  <%= pb_rails("body", props: { text: "Click to enable the Buttons below", id: "toggle-enabled-demo", cursor: "pointer", color:"link", margin_bottom:"sm" }) %>
+
+<%= pb_rails("card", props:{display:"flex", flex_direction:"row", justify_content:"center"}) do %>
+<%= pb_rails("button", props: { text: "I am a Button", id: "normal_managed_button", data:{pb_button_managed: true}, margin_right: "lg" }) %>
+<%= pb_rails("button", props: { text: "I am an <a> Button", id: "a_tag_managed_button", tag:"a", data:{pb_button_managed: true}, link: "http://google.com"}) %>
+<% end %>
+<script>
+  document.addEventListener('DOMContentLoaded', function () {
+    const disableTrigger = document.querySelector('#toggle-disabled-demo')
+    const enableTrigger = document.querySelector('#toggle-enabled-demo')
+
+    // Find the Buttons you want to 'manage'
+    const btn = document.querySelector('#normal_managed_button');
+    const link = document.querySelector('#a_tag_managed_button');
+
+    disableTrigger.addEventListener('click', (e) => {
+        // Disable default button
+        btn.setAttribute('disabled', true)
+        // Disable a tag button
+        link.setAttribute('aria-disabled', 'true')
+    });
+
+    enableTrigger.addEventListener('click', (e) => {
+        // Enable default button
+        btn.removeAttribute('disabled')
+        // Enable a tag button
+        link.removeAttribute('aria-disabled')
+    });
+  });
+</script>

data/app/pb_kits/playbook/pb_button/docs/_button_managed_disabled.md

@@ -0,0 +1,7 @@
+If needing to toggle the disabled state of the Button dynamically (for example, within a Turbo or Stimulus context), you can now do so in rails using the `pb-button-managed` data attribute. 
+
+1) Add the following data attribute to your button kit: `data:{ pb-button-managed: true }`
+
+2) To toggle enabled/disabled state via attributes: for buttons set/remove disabled, for links set/remove aria-disabled="true". This will handle disabling the button, preventing clicks as well as all style changes so you don't have to.  
+
+Click to enable or disable the buttons above and view the code snippet below for details!

data/app/pb_kits/playbook/pb_button/docs/_button_managed_disabled_helper.html.erb

@@ -0,0 +1,21 @@
+  <%= pb_rails("body", props: { text: "Click to disable the Button below", id: "toggle-disabled-demo-with-helper", cursor: "pointer", color:"link", margin_bottom:"sm" }) %>
+  <%= pb_rails("body", props: { text: "Click to enable the Button below", id: "toggle-enabled-demo-with-helper", cursor: "pointer", color:"link", margin_bottom:"sm" }) %>
+<br/>
+<%= pb_rails("card", props:{display:"flex", flex_direction:"row", justify_content:"center"}) do %>
+<%= pb_rails("button", props: { text: "Watch me Change!", id: "managed_button_with_helper", data:{pb_button_managed: true} }) %>
+<% end %>
+
+<script>
+  document.addEventListener('DOMContentLoaded', function () {
+    const disable = document.querySelector('#toggle-disabled-demo-with-helper')
+    const enable = document.querySelector('#toggle-enabled-demo-with-helper')
+
+    // Find the Button you want to 'manage'
+    const demoBtn = document.querySelector('#managed_button_with_helper')
+
+    // Use the pbButton object created by the kit to call the enable/disable methods
+    disable.addEventListener('click', (e) => {demoBtn._pbButton.disable()});
+    enable.addEventListener('click', (e) => {demoBtn._pbButton.enable()});
+
+  });
+</script>

data/app/pb_kits/playbook/pb_button/docs/_button_managed_disabled_helper.md

@@ -0,0 +1,7 @@
+The disabled state for the button can also be toggled via small helpers available through the `pb-button-managed` data attribute. 
+
+1) Add the following data attribute to your button kit: `data:{ pb-button-managed: true }`
+
+2) Toggle state via the provided `_pbButton.disable()` and `_pbButton.enable()` helpers as shown in the code snippet below.
+
+Click to enable or disable the buttons above to see this in action!

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

@@ -11,6 +11,8 @@ examples:
   - button_options: Button Additional Options
   - button_size: Button Size
   - button_form: Button Form Attribute
+  - button_managed_disabled: Button Toggle Disabled State
+  - button_managed_disabled_helper: Button Toggle Disabled State Helper
   
   react:
   - button_default: Button Variants

data/app/pb_kits/playbook/pb_button/index.js

@@ -0,0 +1,99 @@
+import PbEnhancedElement from "../pb_enhanced_element"
+
+const BUTTON_SELECTOR = "[data-pb-button-managed]"
+
+export default class PbButton extends PbEnhancedElement {
+  static get selector() {
+    return BUTTON_SELECTOR
+  }
+
+  connect() {
+    this._attrManaged = this._attributesPresent()
+    this.element._pbButton = this 
+
+    this._onClick = (e) => {
+      if (this.isDisabled()) {
+        e.preventDefault()
+        e.stopImmediatePropagation()
+      }
+    }
+    this.element.addEventListener("click", this._onClick, true)
+
+    if (this._attrManaged) this._syncClassesFromAttributes()
+
+    this._observer = new MutationObserver(() => {
+      this._attrManaged = true
+      this._syncClassesFromAttributes()
+    })
+    this._observer.observe(this.element, {
+      attributes: true,
+      attributeFilter: ["disabled", "aria-disabled"],
+    })
+  }
+
+  disconnect() {
+    this.element.removeEventListener("click", this._onClick, true)
+    this._observer?.disconnect()
+    delete this.element._pbButton
+  }
+
+  disable() { this.setDisabled(true) }
+  enable()  { this.setDisabled(false) }
+
+  setDisabled(state) {
+    if (this._isButton()) {
+      state
+        ? this.element.setAttribute("disabled", "disabled")
+        : this.element.removeAttribute("disabled")
+    } else {
+      state
+        ? this.element.setAttribute("aria-disabled", "true")
+        : this.element.removeAttribute("aria-disabled")
+    }
+    this._attrManaged = true
+    this._applyClassState(state)
+  }
+
+  isDisabled() {
+    if (this._isButton()) {
+      if (this.element.hasAttribute("disabled")) return true
+      if (this._attrManaged && !this.element.hasAttribute("disabled")) return false
+    } else {
+      const aria = this.element.getAttribute("aria-disabled")
+      if (aria === "true") return true
+      if (this._attrManaged && aria !== "true") return false
+    }
+    return this.element.classList.contains("pb_button_disabled")
+  }
+
+  _isButton() {
+    return this.element.tagName === "BUTTON"
+  }
+
+  _attributesPresent() {
+    return this.element.hasAttribute("disabled") || this.element.hasAttribute("aria-disabled")
+  }
+
+  _syncClassesFromAttributes() {
+    const state = this._attrDisabledState()
+    const disabled = (state === null) ? false : state
+    this._applyClassState(disabled)
+  }
+
+  _attrDisabledState() {
+    if (this._isButton()) {
+      return this.element.hasAttribute("disabled") ? true : null
+    } else {
+      const aria = this.element.getAttribute("aria-disabled")
+      if (aria === "true") return true
+      if (aria === "false") return false
+      return this.element.hasAttribute("aria-disabled") ? false : null
+    }
+  }
+
+  _applyClassState(disabled) {
+    this.element.classList.toggle("pb_button_disabled", !!disabled)
+    this.element.classList.toggle("pb_button_enabled", !disabled)
+  }
+}
+

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

@@ -19,10 +19,6 @@
     @import "./sass_partials/calendar_input_icon";
   }
 
-  label {
-    display: block !important;
-  }
-
   &:focus,
   :focus-within {
     div.cal_icon_wrapper,

data/app/pb_kits/playbook/pb_form/docs/_form_form_with_validate.html.erb

@@ -90,7 +90,7 @@
 <%= pb_form_with(scope: :example, method: :get, url: "", validate: true) do |form| %>
   <%= form.typeahead :example_typeahead_validation, props: { data: { typeahead_example2: true, user: {} }, label: true, placeholder: "Search for a user", required: true, validation: { message: "Please select a user." } } %>
   <%= form.text_field :example_text_field_validation, props: { label: true, required: true } %>
-  <%= form.phone_number_field :example_phone_number_field_validation, props: { label: "Example phone field", hidden_inputs: true } %>
+  <%= form.phone_number_field :example_phone_number_field_validation, props: { label: "Example phone field", hidden_inputs: true, required: true } %>
   <%= form.email_field :example_email_field_validation, props: { label: true, required: true } %>
   <%= form.number_field :example_number_field_validation, props: { label: true, required: true } %>
   <%= form.search_field :example_project_number_validation, props: { label: true, required: true, validation: { pattern: "[0-9]{2}-[0-9]{5}", message: "Please enter a valid project number (example: 33-12345)." } } %>

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

@@ -2,12 +2,13 @@ import PbEnhancedElement from '../pb_enhanced_element'
 import { debounce } from '../utilities/object'
 
 // Kit selectors
-const KIT_SELECTOR             = '[class^="pb_"][class*="_kit"]'
-const ERROR_MESSAGE_SELECTOR   = '.pb_body_kit_negative'
+const KIT_SELECTOR                           = '[class^="pb_"][class*="_kit"]'
+const ERROR_MESSAGE_SELECTOR                 = '.pb_body_kit_negative'
 
 // Validation selectors
-const FORM_SELECTOR            = 'form[data-pb-form-validation="true"]'
-const REQUIRED_FIELDS_SELECTOR = 'input[required],textarea[required],select[required]'
+const FORM_SELECTOR                          = 'form[data-pb-form-validation="true"]'
+const REQUIRED_FIELDS_SELECTOR               = 'input[required],textarea[required],select[required]'
+const PHONE_NUMBER_VALIDATION_ERROR_SELECTOR = '[data-pb-phone-validation-error="true"]'
 
 const FIELD_EVENTS = [
   'change',
@@ -22,12 +23,24 @@ class PbFormValidation extends PbEnhancedElement {
 
   connect() {
     this.formValidationFields.forEach((field) => {
+      // Skip phone number inputs - they handle their own validation
+      const isPhoneNumberInput = field.closest('.pb_phone_number_input')
+      if (isPhoneNumberInput) return
+
       FIELD_EVENTS.forEach((e) => {
         field.addEventListener(e, debounce((event) => {
           this.validateFormField(event)
         }, 250), false)
       })
     })
+
+    // Add event listener to check for phone number validation errors
+    this.element.addEventListener('submit', (event) => {
+      if (this.hasPhoneNumberValidationErrors()) {
+        event.preventDefault()
+        return false
+      }
+    })
   }
 
   validateFormField(event) {
@@ -45,20 +58,25 @@ class PbFormValidation extends PbEnhancedElement {
 
   showValidationMessage(target) {
     const { parentElement } = target
+    const kitElement = parentElement.closest(KIT_SELECTOR)
+
+    // Check if this is a phone number input
+    const isPhoneNumberInput = kitElement && kitElement.classList.contains('pb_phone_number_input')
 
     // ensure clean error message state
     this.clearError(target)
-    parentElement.closest(KIT_SELECTOR).classList.add('error')
-
-    // set the error message element
-    const errorMessageContainer = this.errorMessageContainer
+    kitElement.classList.add('error')
 
-    if (target.dataset.message) target.setCustomValidity(target.dataset.message)
+    // Only add error message if it's NOT a phone number input
+    if (!isPhoneNumberInput) {
+      // set the error message element
+      const errorMessageContainer = this.errorMessageContainer
+      if (target.dataset.message) target.setCustomValidity(target.dataset.message)
+      errorMessageContainer.innerHTML = target.validationMessage
 
-    errorMessageContainer.innerHTML = target.validationMessage
-
-    // add the error message element to the dom tree
-    parentElement.appendChild(errorMessageContainer)
+      // add the error message element to the dom tree
+      parentElement.appendChild(errorMessageContainer)
+    }
   }
 
   clearError(target) {
@@ -68,6 +86,12 @@ class PbFormValidation extends PbEnhancedElement {
     if (errorMessageContainer) errorMessageContainer.remove()
   }
 
+  // Check if there are phone number input errors
+  hasPhoneNumberValidationErrors() {
+    const phoneNumberErrors = this.element.querySelectorAll(PHONE_NUMBER_VALIDATION_ERROR_SELECTOR)
+    return phoneNumberErrors.length > 0
+  }
+
   get errorMessageContainer() {
     const errorContainer = document.createElement('div')
     const kitClassName = ERROR_MESSAGE_SELECTOR.replace(/\./, '')

data/app/pb_kits/playbook/pb_phone_number_input/_phone_number_input.tsx

@@ -110,37 +110,43 @@ const PhoneNumberInput = (props: PhoneNumberInputProps, ref?: React.Ref<unknown>
 
   const inputRef = useRef<HTMLInputElement | null>(null)
   const itiRef = useRef<any>(null);
+  const wrapperRef = useRef<HTMLDivElement | null>(null);
+  const textInputKitRef = useRef<HTMLDivElement | null>(null);
   const [inputValue, setInputValue] = useState(value)
-  const [error, setError] = useState(props.error)
+  const [error, setError] = useState("")
   const [dropDownIsOpen, setDropDownIsOpen] = useState(false)
   const [selectedData, setSelectedData] = useState()
   const [hasTyped, setHasTyped] = useState(false)
+  const [formSubmitted, setFormSubmitted] = useState(false)
+
+  // Function to update validation state on the wrapper element
+  // Only applies when input is required
+  const updateValidationState = (hasError: boolean) => {
+    if (wrapperRef.current && required) {
+      if (hasError) {
+        wrapperRef.current.setAttribute('data-pb-phone-validation-error', 'true')
+      } else {
+        wrapperRef.current.removeAttribute('data-pb-phone-validation-error')
+      }
+    }
+  }
+
+  // Determine which error to display
+  // Show internal errors on blur (hasTyped) or on form submission (formSubmitted)
+  const shouldShowInternalError = (hasTyped || formSubmitted) && required && error
+  const displayError = props.error || (shouldShowInternalError ? error : "")
 
   useEffect(() => {
-    if ((error ?? '').length > 0) {
+    const hasError = error.length > 0
+    if (hasError) {
       onValidate(false)
     } else {
       onValidate(true)
     }
-  }, [error, onValidate])
 
-  /*
-    useImperativeHandle exposes the kit's input element to a parent component via a ref.
-    See the Playbook docs for use cases.
-    Read: https://react.dev/reference/react/useImperativeHandle
-  */
-  useImperativeHandle(ref, () => {
-    return {
-      clearField() {
-        setInputValue("")
-        setError("")
-        setHasTyped(false)
-      },
-      inputNode() {
-        return inputRef.current
-      }
-    }
-  })
+    // Update validation state whenever error changes
+    updateValidationState(hasError)
+  }, [error, onValidate])
 
   const unformatNumber = (formattedNumber: any) => {
     return formattedNumber.replace(/\D/g, "")
@@ -164,6 +170,13 @@ const PhoneNumberInput = (props: PhoneNumberInputProps, ref?: React.Ref<unknown>
 
   const validateTooShortNumber = (itiInit: any) => {
     if (!itiInit) return
+
+    // If field is empty, don't show "too short" error
+    if (!inputValue || inputValue.trim() === '') {
+      setError('')
+      return false
+    }
+
     if (itiInit.getValidationError() === ValidationError.TooShort) {
       return showFormattedError('too short')
     } else {
@@ -206,16 +219,33 @@ const PhoneNumberInput = (props: PhoneNumberInputProps, ref?: React.Ref<unknown>
 
   const validateRepeatCountryCode = (itiInit: any) => {
     if (!itiInit) return
-    const countryDialCode = itiInit.getSelectedCountryData().dialCode;
+    const countryDialCode = itiRef.current.getSelectedCountryData().dialCode;
     if (unformatNumber(inputValue).startsWith(countryDialCode)) {
       return showFormattedError('repeat country code')
     }
   }
 
+  // Validation for required empty fields
+  const validateRequiredField = () => {
+    if (required && (!inputValue || inputValue.trim() === '')) {
+      setError('Missing phone number')
+      return true
+    }
+    return false
+  }
 
   const validateErrors = () => {
-    if (!hasTyped && !error) return
+    // If field is empty, only show required field error if applicable
+    if (!inputValue || inputValue.trim() === '') {
+      if (validateRequiredField()) return
+      // Clear any existing errors if field is empty and not required
+      if (!required) {
+        setError('')
+      }
+      return
+    }
 
+    // Run validation checks
     if (itiRef.current) isValid(itiRef.current.isValidNumber())
     if (validateOnlyNumbers(itiRef.current)) return
     if (validateTooLongNumber(itiRef.current)) return
@@ -225,6 +255,52 @@ const PhoneNumberInput = (props: PhoneNumberInputProps, ref?: React.Ref<unknown>
     if (validateRepeatCountryCode(itiRef.current)) return
   }
 
+  // Add listener for form validation to track when validation should be shown
+  useEffect(() => {
+    const handleInvalid = (event: Event) => {
+      const target = event.target as HTMLInputElement
+      const phoneNumberContainer = target.closest('.pb_phone_number_input')
+
+      if (phoneNumberContainer && phoneNumberContainer === wrapperRef.current) {
+        const invalidInputName = target.name || target.getAttribute('name')
+        if (invalidInputName === name) {
+          setFormSubmitted(true)
+          // Trigger validation when form is submitted
+          validateErrors()
+        }
+      }
+    }
+
+    document.addEventListener('invalid', handleInvalid, true)
+
+    return () => {
+      document.removeEventListener('invalid', handleInvalid, true)
+    }
+  }, [name, inputValue])
+
+  /*
+    useImperativeHandle exposes the kit's input element to a parent component via a ref.
+    See the Playbook docs for use cases.
+    Read: https://react.dev/reference/react/useImperativeHandle
+  */
+  useImperativeHandle(ref, () => {
+    return {
+      clearField() {
+        setInputValue("")
+        setError("")
+        setHasTyped(false)
+        setFormSubmitted(false)
+        // Only clear validation state if field was required
+        if (required) {
+          updateValidationState(false)
+        }
+      },
+      inputNode() {
+        return inputRef.current
+      }
+    }
+  })
+
   const getCurrentSelectedData = (itiInit: any, inputValue: string) => {
     return { ...itiInit.getSelectedCountryData(), number: inputValue }
   }
@@ -232,6 +308,12 @@ const PhoneNumberInput = (props: PhoneNumberInputProps, ref?: React.Ref<unknown>
   const handleOnChange = (evt: React.ChangeEvent<HTMLInputElement>) => {
     if (!hasTyped) setHasTyped(true)
     setInputValue(evt.target.value)
+
+    // Reset form submitted state when user types
+    if (formSubmitted) {
+      setFormSubmitted(false)
+    }
+
     let phoneNumberData
     if (formatAsYouType) {
       const formattedPhoneNumberData = getCurrentSelectedData(itiRef.current, evt.target.value)
@@ -300,7 +382,7 @@ const PhoneNumberInput = (props: PhoneNumberInputProps, ref?: React.Ref<unknown>
     dark,
     "data-phone-number": JSON.stringify(selectedData),
     disabled,
-    error,
+    error: displayError,
     type: 'tel',
     id,
     label,
@@ -310,7 +392,10 @@ const PhoneNumberInput = (props: PhoneNumberInputProps, ref?: React.Ref<unknown>
     value: inputValue
   }
 
-  let wrapperProps: Record<string, unknown> = { className: classes }
+  let wrapperProps: Record<string, unknown> = {
+    className: classes,
+    ref: wrapperRef
+  }
 
   if (!isEmpty(aria)) textInputProps = {...textInputProps, ...ariaProps}
   if (!isEmpty(data)) wrapperProps = {...wrapperProps, ...dataProps}

data/app/pb_kits/playbook/pb_text_input/_text_input.tsx

@@ -140,14 +140,10 @@ const TextInput = (props: TextInputProps, ref: React.LegacyRef<HTMLInputElement>
     formattedValue = value
   }
 
-  const errorId = error ? `${id}-error` : undefined
-
   const textInput = (
     childInput ? React.cloneElement(children, { className: "text_input" }) :
     (<input
         {...domSafeProps(props)}
-        aria-describedby={errorId}
-        aria-invalid={!!error}
         autoComplete={typeof autoComplete === "string" ? autoComplete : ( autoComplete ? undefined : "off" )}
         className="text_input"
         disabled={disabled}
@@ -206,20 +202,16 @@ const TextInput = (props: TextInputProps, ref: React.LegacyRef<HTMLInputElement>
         {...htmlProps}
         className={css}
     >
-      {label && (
-        <label htmlFor={id}>
-          <Caption className="pb_text_input_kit_label" 
-              text={label} 
-          />
-        </label>
-      )}
+      {label &&
+        <Caption
+            className="pb_text_input_kit_label"
+            text={label}
+        />
+      }
       <div className={`${addOnCss} text_input_wrapper`}>
         {render}
 
         {error && <Body
-            aria={{ atomic: "true", live: "polite" }}
-            htmlOptions={{ role: "alert" }}
-            id={errorId}
             status="negative"
             text={error}
             variant={null}

data/app/pb_kits/playbook/pb_text_input/docs/_text_input_default.html.erb

@@ -9,27 +9,23 @@
 
 <%= pb_rails("text_input", props: {
   label: "Last Name",
-  placeholder: "Enter last name",
-  id: "last-name"
+  placeholder: "Enter last name"
 }) %>
 
 <%= pb_rails("text_input", props: {
     label: "Phone Number",
     type: "phone",
-    placeholder: "Enter phone number",
-    id: "phone"
+    placeholder: "Enter phone number"
 }) %>
 
 <%= pb_rails("text_input", props: {
     label: "Email Address",
     type: "email",
-    placeholder: "Enter email address",
-    id: "email"
+    placeholder: "Enter email address"
 }) %>
 
 <%= pb_rails("text_input", props: {
     label: "Zip Code",
     type: "number",
-    placeholder: "Enter zip code",
-    id: "zip"
+    placeholder: "Enter zip code"
 }) %>

data/app/pb_kits/playbook/pb_text_input/docs/_text_input_default.jsx

@@ -38,7 +38,6 @@ const TextInputDefault = (props) => {
           {...props}
       />
       <TextInput
-          id="last-name"
           label="Last Name"
           name="lastName"
           onChange={handleOnChangeFormField}
@@ -47,7 +46,6 @@ const TextInputDefault = (props) => {
           {...props}
       />
       <TextInput
-          id="phone"
           label="Phone Number"
           name="phone"
           onChange={handleOnChangeFormField}
@@ -57,7 +55,6 @@ const TextInputDefault = (props) => {
           {...props}
       />
       <TextInput
-          id="email"
           label="Email Address"
           name="email"
           onChange={handleOnChangeFormField}
@@ -67,7 +64,6 @@ const TextInputDefault = (props) => {
           {...props}
       />
       <TextInput
-          id="zip"
           label="Zip Code"
           name="zip"
           onChange={handleOnChangeFormField}
@@ -88,7 +84,6 @@ const TextInputDefault = (props) => {
       <br />
 
       <TextInput
-          id="first-name"
           label="First Name"
           onChange={handleOnChangeFirstName}
           placeholder="Enter first name"

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

@@ -1,8 +1,6 @@
 <%= pb_content_tag(:div, id: nil ) do  %>
   <% if object.label.present? %>
-  <label for="<%= object.input_options[:id] || object.id %>" >
     <%= pb_rails("caption", props: { text: object.label, dark: object.dark, classname: "pb_text_input_kit_label" }) %>
-  </label>
   <% end %>
   <%= content_tag(:div, class: "#{add_on_class} text_input_wrapper") do %>
     <% if content.present? %>
@@ -17,7 +15,7 @@
     <% else %>
       <%= input_tag %>
     <% end %>
-    <%= 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 %>
+    <%= pb_rails("body", props: {dark: object.dark, status: "negative", text: object.error}) if object.error %>
   <% end %>
 <% end %>
 

data/app/pb_kits/playbook/pb_text_input/text_input.rb

@@ -64,16 +64,10 @@ module Playbook
         "#{object.id}-sanitized" if id.present?
       end
 
-      def error_id
-        "#{id}-error" if error.present?
-      end
-
     private
 
       def all_input_options
         {
-          'aria-describedby': error.present? ? error_id : nil,
-          'aria-invalid': error.present?,
           autocomplete: autocomplete == true ? nil : (autocomplete.presence || "off"),
           class: "text_input #{input_options.dig(:classname) || ''}",
           data: validation_data,