playbook_ui 16.1.0.pre.alpha.play2771passphraseaccessibility14033 → 16.1.0.pre.alpha.play264213817

data/app/pb_kits/playbook/pb_filter/docs/_filter_default.jsx

@@ -1,4 +1,4 @@
-import React, { useState } from 'react'
+import React from 'react'
 
 import Button from '../../pb_button/_button'
 import Filter from '../../pb_filter/_filter'
@@ -6,18 +6,11 @@ import Flex from '../../pb_flex/_flex'
 import Select from '../../pb_select/_select'
 import TextInput from '../../pb_text_input/_text_input'
 
-const FilterDefault = (props) => {
-  const [sortValue, setSortValue] = useState([{ name: 'popularity', dir: 'desc' }])
-  const [sortValue2, setSortValue2] = useState([{ name: 'popularity', dir: 'desc' }])
-
-  const handleSortChange = (sortOptions) => {
-    setSortValue(sortOptions)
-    alert(JSON.stringify(sortOptions[0]))
-  }
+const SortingChangeCallback = (sortOptions) => {
+  alert(JSON.stringify(sortOptions[0]))
+}
 
-  const handleSortChange2 = (sortOptions) => {
-    setSortValue2(sortOptions)
-  }
+const FilterDefault = (props) => {
   const options = [
     { value: 'USA' },
     { value: 'Canada' },
@@ -36,7 +29,7 @@ const FilterDefault = (props) => {
           }}
           marginBottom="xl"
           minWidth="375px"
-          onSortChange={handleSortChange}
+          onSortChange={SortingChangeCallback}
           results={1}
           sortOptions={{
             popularity: 'Popularity',
@@ -45,7 +38,7 @@ const FilterDefault = (props) => {
             // eslint-disable-next-line
             manager_name: 'Manager\'s Name',
           }}
-          sortValue={sortValue}
+          sortValue={[{ name: 'popularity', dir: 'desc' }]}
           {...props}
       >
       {({ closePopover }) => (
@@ -89,7 +82,7 @@ const FilterDefault = (props) => {
       <Filter
           double
           minWidth="375px"
-          onSortChange={handleSortChange2}
+          onSortChange={SortingChangeCallback}
           results={0}
           sortOptions={{
             popularity: 'Popularity',
@@ -98,7 +91,7 @@ const FilterDefault = (props) => {
             // eslint-disable-next-line
             manager_name: 'Manager\'s Name',
           }}
-          sortValue={sortValue2}
+          sortValue={[{ name: 'popularity', dir: 'desc' }]}
           {...props}
       >
       {({ closePopover }) => (

data/app/pb_kits/playbook/pb_filter/filter.rb

@@ -44,9 +44,9 @@ module Playbook
       def sort_icon(direction)
         case direction
         when "asc"
-          "arrow-up-short-wide"
+          "sort-amount-up"
         when "desc"
-          "arrow-down-wide-short"
+          "sort-amount-down"
         else
           ""
         end

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

@@ -8,8 +8,6 @@
   <%= 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.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,10 +26,6 @@ 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)
@@ -71,16 +67,13 @@ 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 or TimePicker input
-    if (!isPhoneNumberInput && !isTimePickerInput) {
+    // Only add error message if it's NOT a phone number input
+    if (!isPhoneNumberInput) {
       // set the error message element
       const errorMessageContainer = this.errorMessageContainer
 

data/app/pb_kits/playbook/pb_form_pill/docs/_form_pill_truncated_text.html.erb

@@ -15,7 +15,7 @@
     options: names,
     label: "Truncation Within Typeahead",
     pills: true,
-    truncate: "1",
+    truncate: 1,
 }) %>
 
 <%= pb_rails("caption", props: { text: "Form Pill Truncation" }) %>
@@ -24,19 +24,19 @@
       name: "Princess Amelia Mignonette Grimaldi Thermopolis Renaldo",
       avatar_url: "https://randomuser.me/api/portraits/women/44.jpg",
       tabindex: 0,
-      truncate: "1",
+      truncate: 1,
       id: "truncation-1"
   }) %>
   <%= pb_rails("form_pill", props: {
       icon: "badge-check",
       text: "icon and a very long tag to show truncation",
       tabindex: 0,
-      truncate: "1",
+      truncate: 1,
       id: "truncation-2"
   }) %>
   <%= pb_rails("form_pill", props: {
       text: "form pill long tag no tooltip show truncation",
       tabindex: 0,
-      truncate: "1",
+      truncate: 1,
   }) %>
-<% end %>
+<% end %>

data/app/pb_kits/playbook/pb_form_pill/docs/_form_pill_truncated_text.jsx

@@ -21,7 +21,7 @@ const FormPillTruncatedText = (props) => {
           isMulti
           label="Truncation Within Typeahead"
           options={names}
-          truncate={"1"}
+          truncate={1}
           {...props}
       />
       <Caption text="Form Pill Truncation"/>
@@ -31,20 +31,20 @@ const FormPillTruncatedText = (props) => {
             name="Princess Amelia Mignonette Grimaldi Thermopolis Renaldo"
             onClick={() => alert('Click!')}
             tabIndex={0}
-            truncate={"1"}
+            truncate={1}
         />
         <FormPill
             icon="badge-check"
             onClick={() => {alert('Click!')}}
             tabIndex={0}
             text="icon and a very long tag to show truncation"
-            truncate={"1"}
+            truncate={1}
         />
         <FormPill
             onClick={() => {alert('Click!')}}
             tabIndex={0}
             text="form pill with a very long tag to show truncation"
-            truncate={"1"}
+            truncate={1}
         />
       </Card>
     </>

data/app/pb_kits/playbook/pb_form_pill/form_pill.rb

@@ -49,10 +49,6 @@ module Playbook
       def wrapped_class
         wrapped ? "wrapped" : nil
       end
-
-      def truncate_props
-        nil
-      end
     end
   end
 end

data/app/pb_kits/playbook/pb_passphrase/_passphrase.tsx

@@ -7,7 +7,6 @@ import { globalProps } from "../utilities/globalProps"
 import Body from '../pb_body/_body'
 import Caption from '../pb_caption/_caption'
 import CircleIconButton from '../pb_circle_icon_button/_circle_icon_button'
-import colors from '../tokens/exports/_colors.module.scss'
 import Flex from '../pb_flex/_flex'
 import Icon from '../pb_icon/_icon'
 import PbReactPopover from '../pb_popover/_popover'
@@ -26,7 +25,6 @@ type PassphraseProps = {
   inputProps?: GenericObject,
   label?: string,
   onChange: (inputValue: string) => void,
-  requiredIndicator?: boolean,
   showTipsBelow?: "always" | "xs" | "sm" | "md" | "lg" | "xl",
   tips?: Array<string>,
   uncontrolled?: boolean,
@@ -45,7 +43,6 @@ const Passphrase = (props: PassphraseProps): React.ReactElement => {
     inputProps = {},
     label = confirmation ? "Confirm Passphrase" : "Passphrase",
     onChange = () => undefined,
-    requiredIndicator = false,
     showTipsBelow = "always",
     tips = [],
     uncontrolled = false,
@@ -102,7 +99,6 @@ const Passphrase = (props: PassphraseProps): React.ReactElement => {
 
   const shieldIcon = getAllIcons()["shieldCheck"]
   const eyeIcon = getAllIcons()["eye"]
-  const hasLabel = label && label !== ""
 
   return (
     <div
@@ -113,22 +109,11 @@ const Passphrase = (props: PassphraseProps): React.ReactElement => {
         id={id}
     >
       <label>
-        <Flex
-            align="baseline"
-            {...(hasLabel ? { marginBottom: "xs" } : {})}
-        >
-          {hasLabel && (requiredIndicator ? (
-            <Caption
-                className="passphrase-label"
-            >
-              {label} <span style={{ color: `${colors.error}` }}>*</span>
-            </Caption>
-          ) : (
-            <Caption
-                className="passphrase-label"
-                text={label}
-            />
-          ))}
+        <Flex align="baseline">
+          <Caption
+              className="passphrase-label"
+              text={label}
+          />
           {tips.length > 0 && !confirmation &&
             <PbReactPopover
                 className="passphrase-tips"
@@ -178,40 +163,22 @@ 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 
-                  aria={{ label: "eye icon" }} 
-                  icon="eye-slash" 
-              />
+              <Icon icon="eye-slash" />
             </Body>
             <Body
                 className={showPassphrase ? "" : "hide-icon"}
                 color="light"
                 dark={dark}
             >
-            <Icon 
-                aria={{ label: "eye icon" }} 
+            <Icon  
                 className="svg-inline--fa"
                 customIcon={eyeIcon.icon as unknown as { [key: string]: SVGElement }}
             />

data/app/pb_kits/playbook/pb_passphrase/docs/_passphrase_meter_settings.jsx

@@ -120,7 +120,6 @@ const PassphraseMeterSettings = (props) => {
             "These examples will all share the same input value. Type in any of the inputs to see how the strength meter changes in response to different settings."
           }
         </Body>
-        <br/>
         <Passphrase
             label={"Type your passphrase"}
             onChange={handleChange}

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

@@ -9,7 +9,6 @@ examples:
   - passphrase_strength_change: Strength Change
   - passphrase_common: Common Passphrases
   - passphrase_breached: Breached Passphrases
-  - passphrase_required_indicator: Required Indicator
 
   react:
   - passphrase_default: Default
@@ -20,4 +19,3 @@ examples:
   - passphrase_strength_change: Strength Change
   - passphrase_common: Common Passphrases
   - passphrase_breached: Breached Passphrases
-  - passphrase_required_indicator: Required Indicator

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

@@ -6,4 +6,3 @@ export { default as PassphraseTips } from './_passphrase_tips'
 export { default as PassphraseStrengthChange } from './_passphrase_strength_change'
 export { default as PassphraseCommon } from './_passphrase_common'
 export { default as PassphraseBreached } from './_passphrase_breached'
-export { default as PassphraseRequiredIndicator } from './_passphrase_required_indicator.jsx'

data/app/pb_kits/playbook/pb_passphrase/passphrase.rb

@@ -10,7 +10,6 @@ module Playbook
                              values: %w[always xs sm md lg xl],
                              default: "always"
       prop :tips, type: Playbook::Props::Array, default: []
-      prop :required_indicator, type: Playbook::Props::Boolean, default: false
       prop :value, type: Playbook::Props::String
 
       def classname
@@ -24,7 +23,6 @@ module Playbook
           confirmation: confirmation,
           inputProps: input_props,
           label: label,
-          requiredIndicator: required_indicator,
           showTipsBelow: show_tips_below,
           tips: tips,
           uncontrolled: true,

data/app/pb_kits/playbook/pb_passphrase/passphrase.test.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { render, screen, within } from '../utilities/test-utils'
+import { render, screen } from '../utilities/test-utils'
 import { Passphrase } from 'playbook-ui'
 
 const testId = 'text-input1',
@@ -86,32 +86,3 @@ test('popover target does not show when tips are not given', () => {
   const kit = screen.getByTestId(testId)
   expect(kit.querySelector('[class^=pb_popover_reference_wrapper]')).toBeNull()
 })
-
-test('renders required indicator asterisk when requiredIndicator is true', () => {
-  render(
-    <Passphrase
-        data={{ testid: testId }}
-        label="Passphrase"
-        requiredIndicator
-    />
-  )
-
-  const kit = screen.getByTestId(testId)
-  const label = within(kit).getByText(/Passphrase/)
-  expect(label).toBeInTheDocument()
-  expect(kit).toHaveTextContent('*')
-})
-
-test('does not render required indicator asterisk when requiredIndicator is false', () => {
-  render(
-    <Passphrase
-        data={{ testid: testId }}
-        label="Passphrase"
-    />
-  )
-
-  const kit = screen.getByTestId(testId)
-  const label = within(kit).getByText(/Passphrase/)
-  expect(label).toBeInTheDocument()
-  expect(kit).not.toHaveTextContent('*')
-})

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

@@ -36,7 +36,6 @@ type PhoneNumberInputProps = {
   excludeCountries: string[],
   preferredCountries?: string[],
   required?: boolean,
-  requiredIndicator?: boolean,
   value?: string,
   formatAsYouType?: boolean,
   strictMode?: boolean,
@@ -92,7 +91,6 @@ const PhoneNumberInput = (props: PhoneNumberInputProps, ref?: React.Ref<unknown>
     onlyCountries = [],
     excludeCountries = [],
     required = false,
-    requiredIndicator = false,
     preferredCountries = [],
     value = "",
     formatAsYouType = false,
@@ -535,7 +533,6 @@ const PhoneNumberInput = (props: PhoneNumberInputProps, ref?: React.Ref<unknown>
       validateErrors()
     },
     onChange: formatAsYouType ? undefined : handleOnChange,
-    requiredIndicator,
     value: inputValue
   }
 

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

@@ -12,7 +12,6 @@ examples:
   - phone_number_input_format: Format as You Type
   - phone_number_input_strict_mode: Strict Mode
   - phone_number_input_country_search: Country Search
-  - phone_number_input_required_indicator: Required Indicator
 
   rails:
   - phone_number_input_default: Default
@@ -25,4 +24,3 @@ examples:
   - phone_number_input_strict_mode: Strict Mode
   - phone_number_input_hidden_inputs: Hidden Inputs
   - phone_number_input_country_search: Country Search
-  - phone_number_input_required_indicator: Required Indicator

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

@@ -9,4 +9,3 @@ export { default as PhoneNumberInputAccessInputElement } from './_phone_number_i
 export { default as PhoneNumberInputFormat } from './_phone_number_input_format'
 export { default as PhoneNumberInputStrictMode } from './_phone_number_input_strict_mode'
 export { default as PhoneNumberInputCountrySearch } from './_phone_number_input_country_search'
-export { default as PhoneNumberInputRequiredIndicator } from './_phone_number_input_required_indicator.jsx'

data/app/pb_kits/playbook/pb_phone_number_input/phone_number_input.rb

@@ -7,8 +7,6 @@ module Playbook
                       default: false
       prop :required, type: Playbook::Props::Boolean,
                       default: false
-      prop :required_indicator, type: Playbook::Props::Boolean,
-                                default: false
       prop :initial_country, type: Playbook::Props::String,
                              default: ""
       prop :label, type: Playbook::Props::String,
@@ -54,7 +52,6 @@ module Playbook
           excludeCountries: exclude_countries,
           preferredCountries: preferred_countries,
           required: required,
-          requiredIndicator: required_indicator,
           value: value,
           countrySearch: country_search,
         }

data/app/pb_kits/playbook/pb_phone_number_input/phone_number_input.test.js

@@ -1,5 +1,5 @@
 import React from "react";
-import { render, screen, act, within } from "../utilities/test-utils";
+import { render, screen, act } from "../utilities/test-utils";
 import PhoneNumberInput from "./_phone_number_input";
 
 const testId = "phoneNumberInput";
@@ -129,7 +129,7 @@ test("should format phone number as '555-555-5555' with formatAsYouType and 'us'
     };
 
     render(<PhoneNumberInput {...props} />);
-
+    
     const input = screen.getByRole("textbox");
     
     act(() => {
@@ -154,38 +154,7 @@ test("should pass countrySearch prop to component", () => {
     };
   
     render(<PhoneNumberInput {...props} />);
-
+    
     const wrapper = screen.getByTestId('phone-input-with-search');
     expect(wrapper).toBeInTheDocument();
 });
-
-test("renders required indicator asterisk when requiredIndicator is true", () => {
-    const props = {
-        data: { testid: testId },
-        id: testId,
-        label: "Required Phone Number",
-        requiredIndicator: true,
-    };
-
-    render(<PhoneNumberInput {...props} />);
-
-    const kit = screen.getByTestId(testId);
-    const label = within(kit).getByText(/Required Phone Number/);
-    expect(label).toBeInTheDocument();
-    expect(kit).toHaveTextContent("*");
-});
-
-test("does not render required indicator asterisk when requiredIndicator is false", () => {
-    const props = {
-        data: { testid: testId },
-        id: testId,
-        label: "Phone Number",
-    };
-
-    render(<PhoneNumberInput {...props} />);
-
-    const kit = screen.getByTestId(testId);
-    const label = within(kit).getByText(/Phone Number/);
-    expect(label).toBeInTheDocument();
-    expect(kit).not.toHaveTextContent("*");
-});  

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

@@ -120,7 +120,6 @@ const Textarea = ({
   const characterCounter = () => {
     return maxCharacters && characterCount ? `${checkIfZero(characterCount)} / ${maxCharacters}` : `${checkIfZero(characterCount)}`
   }
-  const errorId = error ? `${id}-error` : undefined
 
   return (
     <div
@@ -146,10 +145,7 @@ const Textarea = ({
     )}
       {children || (
         <textarea
-            aria-describedby={errorId}
-            aria-invalid={!!error}
             disabled={disabled}
-            id={id}
             name={name}
             onChange={emojiMask ? handleChange : onChange}
             onPaste={emojiMask ? handlePaste : undefined}
@@ -171,9 +167,6 @@ const Textarea = ({
             >
               <FlexItem>
                 <Body
-                    aria={{ atomic: "true", live: "polite" }}
-                    htmlOptions={{ role: "alert" }}
-                    id={errorId}
                     margin="none"
                     status="negative"
                     text={error}
@@ -189,9 +182,6 @@ 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, id: "default-example-1" }) %>
+<%= pb_rails("textarea", props: { label: "Label", rows: 4}) %>
 
 <br/>
 
-<%= pb_rails("textarea", props: { label: "Label", placeholder: "Placeholder text", id: "default-example-2" }) %>
+<%= pb_rails("textarea", props: { label: "Label", placeholder: "Placeholder text" }) %>
 
 <br/>
 
-<%= pb_rails("textarea", props: { label: "Label", name: "comment", value: "Default value text", id: "default-example-3" }) %>
+<%= pb_rails("textarea", props: { label: "Label", name: "comment", value: "Default value text" }) %>

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

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

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

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

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

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