playbook_ui 15.0.0.pre.alpha.PLAY2467contactkitinternational10329 → 15.0.0.pre.alpha.PLAY2473rowhighlightfix10512

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 5f20e205eef51d77bf9ce4b5694d675e30bfbe4ef8107c96b016868302ccaba3
-  data.tar.gz: 89c8ffe59230989390b0cb8031a47b3191bd5463b190f62465b10679a2dbf531
+  metadata.gz: 982344fe138179bc21bb46402ac4d6e897531ab4a6ed64d34177f0be9aa9d577
+  data.tar.gz: df3971a42e4036f06a4f704bb8ef50d78365b666344b19b1aacda4679443bca9
 SHA512:
-  metadata.gz: 6c25d0d330b79ffdc47501616db7bdbe0577c48ce9fa5d33b8ea7d6058c9ce98674d72664ca312f6d79ddaf59b662701b8a136bb0ca589447c4ea8b72bbf97a8
-  data.tar.gz: f42561f7ad3f69134d46779d00d75c0aff2998c042a0c6ef5839131c80f788559de516772297a606049a2827222b863d0b434febf32ca28d0aadca4cb8e7b0c4
+  metadata.gz: ee369ee9ccf522bbc8fa3c57e6b0022801088391b8cac6663840ca9497e56acf5a1aaded868b0075edf27eb52c27525fa9848ccc6ad0b74882920571c369344c
+  data.tar.gz: e15b63750ce6b4bce43d5e4a729b5d6791389c769af14fb46e2bd037ff7e8c647bb70c4ed0d05445fc71e76bcb8f2f93dcfbb21008e515b1f29edd6e08cfcfb6

data/app/pb_kits/playbook/_playbook.scss

@@ -108,6 +108,7 @@
 @import 'pb_user_badge/user_badge';
 @import 'pb_weekday_stacked/weekday_stacked';
 @import 'pb_empty_state/empty_state';
+@import 'pb_pb_bar_graph/pb_bar_graph';
 @import 'utilities/mixins';
 @import 'utilities/spacing';
 @import 'utilities/cursor';

data/app/pb_kits/playbook/pb_advanced_table/Components/RegularTableView.tsx

@@ -5,6 +5,7 @@ import { flexRender, Row, Cell } from "@tanstack/react-table"
 import { GenericObject } from "../../types"
 import { isChrome } from "../Utilities/BrowserCheck"
 import { findColumnDefByAccessor } from "../Utilities/ColumnStylingHelper"
+import { getRowColorClass, shouldShowLoadingIndicator } from "../Utilities/RowUtils"
 
 import LoadingInline from "../../pb_loading_inline/_loading_inline"
 import Checkbox from "../../pb_checkbox/_checkbox"
@@ -60,7 +61,7 @@ const TableCellRenderer = ({
         const cellAlignment = colDef?.columnStyling?.cellAlignment ?? "right"
         const paddingValue = colDef?.columnStyling?.cellPadding ?? customRowStyle?.cellPadding
         const paddingClass = paddingValue ? `p_${paddingValue}` : undefined
-        
+
         return (
           <td
               align={cellAlignment}
@@ -132,6 +133,7 @@ export const RegularTableView = ({
 
   const columnPinning = table.getState().columnPinning || { left: [] };
   const columnDefinitions = table.options.meta?.columnDefinitions || [];
+
   // Row pinning
   function PinnedRow({ row }: { row: Row<any> }) {
     const customRowStyle = rowStyling?.length > 0 && rowStyling?.find((s: GenericObject) => s?.rowId === row.id);
@@ -144,7 +146,7 @@ export const RegularTableView = ({
             backgroundColor: customRowStyle?.backgroundColor ? customRowStyle?.backgroundColor : 'white',
             color: customRowStyle?.fontColor,
             position: 'sticky',
-            top:   
+            top:
               row.getIsPinned() === 'top'
                   ? `${row.getPinnedIndex() * rowHeight + headerHeight}px`
                   : undefined,
@@ -169,21 +171,20 @@ export const RegularTableView = ({
   return (
     <>
       {pinnedRows && table.getTopRows().map((row: Row<GenericObject>) => (
-        <PinnedRow key={row.id} 
-            row={row} 
+        <PinnedRow key={row.id}
+            row={row}
         />
       ))}
       {totalRows.map((row: Row<GenericObject>, rowIndex: number) => {
-        const isExpandable = row.getIsExpanded();
         const isFirstChildofSubrow = row.depth > 0 && row.index === 0;
-        const rowHasNoChildren = row.original?.children && !row.original.children.length ? true : false;
         const numberOfColumns = table.getAllFlatColumns().length;
-        const isDataLoading = isExpandable && (inlineRowLoading && rowHasNoChildren) && (row.depth < columnDefinitions[0]?.cellAccessors?.length);
-        const rowBackground = isExpandable && ((!inlineRowLoading && row.getCanExpand()) || (inlineRowLoading && rowHasNoChildren));
-        const rowColor = row.getIsSelected() ? "bg-row-selection" : rowBackground ? "bg-silver" : "bg-white";
         const isFirstRegularRow = rowIndex === 0 && !row.getIsPinned();
         const customRowStyle = rowStyling?.length > 0 && rowStyling?.find((s: GenericObject) => s?.rowId === row.id);
 
+        // Use functions from RowUtils for consistent cell coloring
+        const rowColor = getRowColorClass(row, inlineRowLoading || false);
+        const isDataLoading = shouldShowLoadingIndicator(row, inlineRowLoading || false, columnDefinitions[0]?.cellAccessors?.length || 0);
+
         return (
           <React.Fragment key={`${row.index}-${row.id}-${row.depth}-row`}>
             {isFirstChildofSubrow && subRowHeaders && (
@@ -228,7 +229,7 @@ export const RegularTableView = ({
 
             {/* Display LoadingInline if Row Data is querying and there are no children already */}
             {isDataLoading && (
-              <tr key={`${row.id}-row`}>
+              <tr key={`${row.id}-loading-row`}>
                 <td colSpan={numberOfColumns}
                     style={{ paddingLeft: `${row.depth === 0 ? 0.5 : (row.depth * 2)}em` }}
                 >
@@ -243,4 +244,4 @@ export const RegularTableView = ({
   );
 }
 
-export default RegularTableView;
+export default RegularTableView;

data/app/pb_kits/playbook/pb_advanced_table/Components/VirtualizedTableView.tsx

@@ -7,6 +7,7 @@ import { GenericObject } from "../../types"
 
 import { isChrome } from "../Utilities/BrowserCheck"
 import { getVirtualizedRowStyle } from "../Utilities/TableContainerStyles"
+import { getRowColorClass } from "../Utilities/RowUtils"
 
 import LoadingInline from "../../pb_loading_inline/_loading_inline"
 import Checkbox from "../../pb_checkbox/_checkbox"
@@ -45,10 +46,10 @@ export const VirtualizedTableView = ({
 
   const columnPinning = table.getState().columnPinning || { left: [] };
   const sortingState = JSON.stringify(table.getState().sorting || []);
-  
+
   // Store column widths extracted from header
   const [columnWidths, setColumnWidths] = useState<{[key: string]: string}>({});
-  
+
   // Function to get header cell widths
   const getHeaderCellWidths = () => {
     const widths: {[key: string]: string} = {};
@@ -136,7 +137,7 @@ export const VirtualizedTableView = ({
       </tr>
     );
   }
-  
+
   // Establish # of Parent Rows (so that Footer count does not include every single row)
   const topLevelRowCount = table.getRowModel().flatRows.filter((row: Row<GenericObject>) => row.depth === 0).length;
 
@@ -172,10 +173,9 @@ export const VirtualizedTableView = ({
 
         if (item.type === 'row') {
           const row = item.row;
-          const isExpandable = row.getIsExpanded();
-          const rowHasNoChildren = row.original?.children && !row.original.children.length;
-          const rowBackground = isExpandable && ((!inlineRowLoading && row.getCanExpand()) || (inlineRowLoading && rowHasNoChildren));
-          const rowColor = row.getIsSelected() ? "bg-row-selection" : rowBackground ? "bg-silver" : "bg-white";
+
+          // Use the utility function to get consistent row color
+          const rowColor = getRowColorClass(row, inlineRowLoading || false);
 
           return (
             <tr

data/app/pb_kits/playbook/pb_advanced_table/Utilities/RowUtils.ts

@@ -10,9 +10,14 @@ export const getRowColorClass = (
 ): string => {
   const isExpandable = row.getIsExpanded();
   const rowHasNoChildren = row.original?.children && !row.original.children.length ? true : false;
-  const rowBackground = isExpandable && ((!inlineRowLoading && row.getCanExpand()) || (inlineRowLoading && rowHasNoChildren));
 
-  return row.getIsSelected() ? "bg-row-selection" : rowBackground ? "bg-silver" : "bg-white";
+  // Check if row can expand or is currently expanded
+  const shouldShowExpandedBackground = isExpandable && (
+    (!inlineRowLoading && row.getCanExpand()) ||
+    (inlineRowLoading && (rowHasNoChildren || row.getCanExpand()))
+  );
+
+  return row.getIsSelected() ? "bg-row-selection" : shouldShowExpandedBackground ? "bg-silver" : "bg-white";
 }
 
 /**

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

@@ -4,7 +4,6 @@ examples:
   - bar_graph_default: Default
   - bar_graph_legend: Legend
   - bar_graph_legend_position: Legend Position
-  - bar_graph_legend_non_clickable: Legend Non Clickable
   - bar_graph_height: Height
   - bar_graph_spline: Spline
   - bar_graph_colors: Color Overrides

data/app/pb_kits/playbook/pb_circle_icon_button/_circle_icon_button.tsx

@@ -65,6 +65,7 @@ const CircleIconButton = (props: CircleIconButtonProps): React.ReactElement => {
         id={id}
     >
       <Button
+          aria={aria}
           dark={dark}
           disabled={disabled}
           htmlType={type}
@@ -78,6 +79,7 @@ const CircleIconButton = (props: CircleIconButtonProps): React.ReactElement => {
       >
         <Icon
             fixedWidth
+            htmlOptions={{'aria-hidden': true}}
             icon={icon}
         />
       </Button>

data/app/pb_kits/playbook/pb_circle_icon_button/circle_icon_button.html.erb

@@ -1,5 +1,6 @@
 <%= pb_content_tag do %>
   <%= pb_rails("button", props: {
+    aria: object.aria,
     type: object.type, 
     loading: object.loading, 
     link: object.link, 

data/app/pb_kits/playbook/pb_collapsible/__snapshots__/collapsible.test.js.snap

@@ -28,6 +28,7 @@ exports[`html structure is correct 1`] = `
               style="vertical-align: middle; color: rgb(193, 205, 214);"
             >
               <svg
+                aria-label="chevron-down icon"
                 class="pb_custom_icon svg-inline--fa svg_lg svg_fw"
                 color="currentColor"
                 fill="none"

data/app/pb_kits/playbook/pb_contact/_contact.tsx

@@ -17,7 +17,6 @@ const contactTypeMap: { [key: string]: string } = {
   'work': 'phone-office',
   'work-cell': 'phone-laptop',
   'wrong-phone': 'phone-slash',
-  'international': 'globe',
 }
 
 const envelopeIcon = getAllIcons()["envelope"].icon as unknown as { [key: string]: SVGElement }
@@ -25,10 +24,6 @@ const envelopeIcon = getAllIcons()["envelope"].icon as unknown as { [key: string
 const formatContact = (contactString: string, contactType: string) => {
   if (contactType === 'email') return contactString
 
-  // International phone numbers are unformatted
-  if (contactType === 'international') return contactString
-  
-  // Format US numbers
   const cleaned = contactString.replace(/\D/g, '')
   const phoneNumber = cleaned.match(/^(1|)?(\d{3})(\d{3})(\d{4})$/)
 

data/app/pb_kits/playbook/pb_contact/contact.rb

@@ -29,8 +29,6 @@ module Playbook
           "phone-slash"
         when "extension"
           "phone-plus"
-        when "international"
-          "globe"
         else # "unknown" || "other"
           "phone"
         end
@@ -41,8 +39,6 @@ module Playbook
           contact_value
         elsif contact_type == "extension" && contact_value.match(/^\d{4}$/)
           contact_value
-        elsif contact_type == "international"
-          contact_value
         else
           number_to_phone(formatted_value, area_code: true)
         end

data/app/pb_kits/playbook/pb_contact/contact.test.js

@@ -66,12 +66,6 @@ test('returns correct icon', () => {
           contactValue="1234"
           data={{ testid: 'test-extension' }}
       />
-      <Contact
-          contactDetail="International"
-          contactType="international"
-          contactValue="+44 20 7946 0958"
-          data={{ testid: 'test-international' }}
-      />
       <Contact
           contactDetail=""
           contactType=""
@@ -89,11 +83,10 @@ test('returns correct icon', () => {
   expect(screen.getByTestId('test-wrong-phone').querySelector('.pb_custom_icon')).toBeInTheDocument()
   expect(screen.getByTestId('test-wrong-type').querySelector('.pb_custom_icon')).toBeInTheDocument()
   expect(screen.getByTestId('test-extension').querySelector('.pb_custom_icon')).toBeInTheDocument()
-  expect(screen.getByTestId('test-international').querySelector('.pb_custom_icon')).toBeInTheDocument()
   expect(screen.getByTestId('test-empty').querySelector('.pb_custom_icon')).toBeInTheDocument()
 })
 
-test("not compliant values return null in US phone related contact types", () => {
+test("not compliant values return null in phone related contact types", () => {
   const notCompliantValues = [
     "349-185-998223",
     "349-1858",
@@ -136,16 +129,3 @@ test("not compliant values return null in US phone related contact types", () =>
     )
   })
 })
-
-test('international contact type preserves original format', () => {
-  render(
-    <Contact
-        contactType="international"
-        contactValue="+44 20 7946 0958"
-        data={{ testid: 'test-international-format' }}
-    />
-  )
-
-  const kit = screen.getByTestId('test-international-format')
-  expect(kit).toHaveTextContent('+44 20 7946 0958')
-})

data/app/pb_kits/playbook/pb_contact/docs/_contact_default.html.erb

@@ -13,7 +13,7 @@
 }) %>
 
 <%= pb_rails("contact", props: {
-  contact_type: "work",
+  contact_type: "wrong number",
   contact_value: "3245627482",
 }) %>
 
@@ -21,18 +21,3 @@
   contact_type: "work-cell",
   contact_value: "349-185-9988",
 }) %>
-
-<%= pb_rails("contact", props: {
-  contact_type: "wrong-phone",
-  contact_value: "2124396666",
-}) %>
-
-<%= pb_rails("contact", props: {
-  contact_type: "extension",
-  contact_value: "1233",
-}) %>
-
-<%= pb_rails("contact", props: {
-  contact_type: "international",
-  contact_value: "+44 7700 900461",
-}) %>

data/app/pb_kits/playbook/pb_contact/docs/_contact_default.jsx

@@ -28,21 +28,6 @@ const ContactDefault = (props) => {
           contactValue="3245627482"
           {...props}
       />
-      <Contact
-          contactType="wrong-phone"
-          contactValue="2124396666"
-          {...props}
-      />
-      <Contact
-          contactType='extension'
-          contactValue="1234"
-          {...props}
-      />
-      <Contact
-          contactType="international"
-          contactValue="+44 7700 900461"
-          {...props}
-      />
     </div>
   )
 }

data/app/pb_kits/playbook/pb_contact/docs/_contact_with_detail.html.erb

@@ -26,9 +26,3 @@
   contact_value: "1233",
   contact_detail: "Ext",
 }) %>
-
-<%= pb_rails("contact", props: {
-  contact_type: "international",
-  contact_value: "+44 7700 900461",
-  contact_detail: "International",
-}) %>

data/app/pb_kits/playbook/pb_contact/docs/_contact_with_detail.jsx

@@ -33,12 +33,6 @@ const ContactDefault = (props) => {
           contactValue="1234"
           {...props}
       />
-      <Contact
-          contactDetail="International"
-          contactType="international"
-          contactValue="+44 7700 900461"
-          {...props}
-      />
     </div>
   )
 }

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

@@ -210,10 +210,12 @@ const DatePicker = (props: DatePickerProps): React.ReactElement => {
           className="input_wrapper"
       >
 
-        <Caption
-            className="pb_date_picker_kit_label"
-            text={hideLabel ? null : label}
-        />
+        {!hideLabel && (
+          <Caption
+              className="pb_date_picker_kit_label"
+              text={label}
+          />
+        )}
           <>
             <div className="date_picker_input_wrapper">
               <input

data/app/pb_kits/playbook/pb_date_picker/date_picker_helper.ts

@@ -89,6 +89,48 @@ const datePickerHelper = (config: DatePickerConfig, scrollContainer: string | HT
     }
   }
 
+  // Helper function to get min/max years based on yearRange. If minDate/maxDate provided, grab year from those values
+  const getMinMaxYears = () => {
+    const [minYear, maxYear] = yearRange;
+
+    const extractYear = (dateOption: typeof minDate | typeof maxDate): number | null => {
+      if (!dateOption) return null;
+
+      // If it's already a number, assume it's a year
+      if (typeof dateOption === 'number') {
+        return dateOption;
+      }
+
+      // If it's a string, extract year with regex
+      if (typeof dateOption === 'string') {
+        const match = dateOption.match(/\b(19|20)\d{2}\b/);
+        return match ? parseInt(match[0], 10) : null;
+      }
+
+      // If it's a Date object, get the year directly
+      if (dateOption instanceof Date) {
+        return dateOption.getFullYear();
+      }
+
+      return null;
+    };
+
+    const setMinYear = minDate ? (extractYear(minDate) ?? minYear) : minYear;
+    const setMaxYear = maxDate ? (extractYear(maxDate) ?? maxYear) : maxYear;
+
+    return { setMinYear, setMaxYear };
+  };
+
+  const { setMinYear, setMaxYear } = getMinMaxYears()
+
+  // Helper function to get min/max dates based on yearRange
+  const getMinMaxDates = () => {
+    const setMinDate = minDate || `01/01/${setMinYear}`
+    const setMaxDate = maxDate || `12/31/${setMaxYear}`
+
+    return { setMinDate, setMaxDate }
+  }
+
   const disabledWeekDays = () => {
     return (
       [
@@ -201,6 +243,8 @@ const datePickerHelper = (config: DatePickerConfig, scrollContainer: string | HT
   // |             Flatpickr initializer w/ config             |
   // ===========================================================
 
+  const { setMinDate, setMaxDate } = getMinMaxDates()
+
   flatpickr(`#${pickerId}`, {
     allowInput,
     closeOnSelect,
@@ -212,8 +256,8 @@ const datePickerHelper = (config: DatePickerConfig, scrollContainer: string | HT
     locale: {
       rangeSeparator: ' to '
     },
-    maxDate,
-    minDate,
+    maxDate: setMaxDate,
+    minDate: setMinDate,
     mode,
     nextArrow: '<i class="far fa-angle-right"></i>',
     onOpen: [() => {
@@ -250,7 +294,7 @@ const datePickerHelper = (config: DatePickerConfig, scrollContainer: string | HT
 
   // create html option tags for desired years
   let years = ''
-  for (let year = yearRange[1]; year >= yearRange[0]; year--) {
+  for (let year = setMaxYear; year >= setMinYear; year--) {
     years += `<option value="${year}">${year}</option>`
   }
 
@@ -323,7 +367,7 @@ const datePickerHelper = (config: DatePickerConfig, scrollContainer: string | HT
   }
 // === End of Automatic Sync Logic ===
 
-    
+
   // Adding dropdown icons to year and month select
   dropdown.insertAdjacentHTML('afterend', `<i class="year-dropdown-icon">${angleDown}</i>`)
   if (picker.monthElements[0].parentElement) {

data/app/pb_kits/playbook/pb_dialog/_close_icon.tsx

@@ -12,10 +12,14 @@ export const CloseIcon = (props: CloseIconProps): React.ReactElement => {
   const timesIcon = getAllIcons()["times"]
   return (
     <div
+        aria-label="Close Dialog"
         className="pb_dialog_close_icon"
-        onClick={onClose}
+        onClick={onClose}          
+        role="button"    
+        tabIndex={0}
     >
       <Icon
+          aria={{ "hidden": true }} 
           className="svg-inline--fa"
           customIcon={timesIcon.icon as unknown as { [key: string]: SVGElement }}
           fixedWidth

data/app/pb_kits/playbook/pb_dialog/_dialog.tsx

@@ -73,8 +73,8 @@ const Dialog = (props: DialogProps): React.ReactElement => {
   const ariaProps = buildAriaProps(aria);
    const dataProps = buildDataProps(data)
    const htmlProps = buildHtmlProps(htmlOptions);
-  const dialogClassNames = {
-    base: classnames("pb_dialog", buildCss("pb_dialog", size, placement)),
+  const classes = {
+    base: classnames("pb_dialog", buildCss("pb_dialog", size, placement), globalProps(props), className),
     afterOpen: "pb_dialog_after_open",
     beforeClose: "pb_dialog_before_close",
   };
@@ -93,10 +93,8 @@ const Dialog = (props: DialogProps): React.ReactElement => {
 
   const dynamicInlineProps = globalInlineProps(props); 
 
-  const classes = classnames(
+  const wrapperClasses = classnames(
     buildCss("pb_dialog_wrapper"),
-    globalProps(props),
-    className
   );
 
   const [triggerOpened, setTriggerOpened] = useState(false),
@@ -173,13 +171,13 @@ const Dialog = (props: DialogProps): React.ReactElement => {
           {...ariaProps} 
           {...dataProps}
           {...htmlProps} 
-          className={classes}
+          className={wrapperClasses}
       >
         <Modal
             ariaHideApp={false}
-            className={dialogClassNames}
+            className={classes}
             closeTimeoutMS={200}
-            contentLabel="Minimal Modal Example"
+            contentLabel="Dialog"
             id={id}
             isOpen={modalIsOpened}
             onRequestClose={onClose}

data/app/pb_kits/playbook/pb_dialog/dialog.html.erb

@@ -12,7 +12,7 @@
         data-cancel-button-id="<%= object.cancel_button_id %>"
     <% end %>
 >
-    <%= pb_content_tag(:dialog) do %>
+    <%= pb_content_tag(:dialog, role: "dialog", "aria-modal": "true", "aria-label": "Dialog") do %>
             <% if object.status === "" && object.title %>
                 <%= pb_rails("dialog/dialog_header", props: { title: object.title, id: object.id }) %>
             <% end %>

data/app/pb_kits/playbook/pb_dialog/dialog_header.html.erb

@@ -2,8 +2,8 @@
         <%= pb_rails("flex", props: {classname:object.classname, spacing:"between", padding:"sm", align:"center"}) do %>
             <%= content.presence || object.title %>
 
-            <button class="dialog-button-class pb_dialog_close_icon" type="button" data-close-dialog= <%= object.id %> >
-                <%= pb_rails("icon", props: { custom_icon: Playbook::Engine::root.join(times_icon) }) %>
+            <button class="dialog-button-class pb_dialog_close_icon" type="button" data-close-dialog= <%= object.id %> aria-label="Close Dialog" >
+                <%= pb_rails("icon", props: { custom_icon: Playbook::Engine::root.join(times_icon), aria: { hidden: true } }) %>
             </button>
         <% end %>
         <%= pb_rails("section_separator") %>

data/app/pb_kits/playbook/pb_fixed_confirmation_toast/_fixed_confirmation_toast.tsx

@@ -35,6 +35,7 @@ type FixedConfirmationToastProps = {
 
 const FixedConfirmationToast = (props: FixedConfirmationToastProps): React.ReactElement => {
   const [showToast, toggleToast] = useState(true);
+
   const {
     autoClose = 0,
     children,
@@ -87,8 +88,15 @@ const FixedConfirmationToast = (props: FixedConfirmationToastProps): React.React
     <>
       {showToast && (
         <div
+            aria-atomic="true"
+            aria-live="polite"
             className={css}
             onClick={handleClick}
+            onKeyDown={(e) => {
+              if (e.key === "Enter" || e.key === " ") handleClick();
+            }}
+            role="status"
+            tabIndex={0}
             {...htmlProps}
         >
           {returnedIcon && icon !== "none" && (
@@ -111,6 +119,7 @@ const FixedConfirmationToast = (props: FixedConfirmationToastProps): React.React
 
           {closeable && (
             <Icon
+                aria={{ "label": "Close Toast" }}
                 className="pb_icon"
                 cursor="pointer"
                 fixedWidth={false}

data/app/pb_kits/playbook/pb_fixed_confirmation_toast/fixed_confirmation_toast.html.erb

@@ -1,6 +1,6 @@
-<%= pb_content_tag do %>
+<%= pb_content_tag(:div, "aria-atomic": "true", "aria-live": "polite", role: "status", tabindex: 0, onkeydown: "if(event.key==='Enter'||event.key===' '){ this.remove(); }" ) do %>
     <% if object.icon_value && object.icon_value != "none" %>
-    <%= pb_rails("icon", props: { icon: object.icon_value, classname: "pb_icon", fixed_width: true }) %>
+    <%= pb_rails("icon", props: { icon: object.icon_value, classname: "pb_icon", fixed_width: true, aria: { "aria-label": "#{object.icon_value} icon" } }) %>
     <% end %>
     <% if content %>
         <%= content %>
@@ -8,5 +8,5 @@
         <%= pb_rails("title", props: { text: object.text, size: 4, flex: "1", classname: "pb_fixed_confirmation_toast_text" }) %>
     <% end %>
 
-    <%= pb_rails("icon", props: { icon: "times", classname: "pb_icon", cursor: "pointer", fixed_width: true }) if object.closeable %>
+    <%= pb_rails("icon", props: { icon: "times", classname: "pb_icon", cursor: "pointer", fixed_width: true, aria: { "aria-label": "Close Toast" } }) if object.closeable %>
 <% end %>

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

@@ -91,6 +91,7 @@
 <%= pb_form_with(scope: :example, url: "", method: :get) do |form| %>
   <%= form.typeahead :example_typeahead, props: { data: { typeahead_example1: true, user: {} }, label: true, placeholder: "Search for a user" } %>
   <%= form.text_field :example_text_field, props: { label: true } %>
+  <%= form.text_field :example_text_field_2, props: { label: "Text Field Custom Label" } %>
   <%= form.phone_number_field :example_phone_number_field, props: { label: "Example phone field", hidden_inputs: true } %>
   <%= form.email_field :example_email_field, props: { label: true } %>
   <%= form.number_field :example_number_field, props: { label: true } %>

data/app/pb_kits/playbook/pb_icon/_icon.tsx

@@ -20,7 +20,7 @@ export type IconSizes = "lg"
 | ""
 
 type IconProps = {
-  aria?: {[key: string]: string},
+  aria?: { [key: string]: string | boolean }
   border?: string,
   className?: string,
   color?: string,
@@ -211,7 +211,15 @@ const Icon = (props: IconProps) => {
   )
 
   aria.label ? null : aria.label = `${icon} icon`
-  const ariaProps: {[key: string]: any} = buildAriaProps(aria)
+
+  const normalizedAria: { [key: string]: string } = Object.fromEntries(
+    Object.entries(aria).map(([key, value]) => [
+      key,
+      typeof value === "boolean" ? String(value) : value,
+    ])
+  )
+  
+  const ariaProps = buildAriaProps(normalizedAria)
   const dataProps: {[key: string]: any} = buildDataProps(data)
   const htmlProps = buildHtmlProps(htmlOptions)
 
@@ -222,6 +230,7 @@ const Icon = (props: IconProps) => {
         <>
           {
             React.cloneElement(iconElement || customIcon, {
+              ...ariaProps,
               ...dataProps,
               ...htmlProps,
               className: classes,
@@ -237,6 +246,7 @@ const Icon = (props: IconProps) => {
       return (
         <>
           <span
+              {...ariaProps}
               {...dataProps}
               {...htmlProps}
               className={classesEmoji}
@@ -250,6 +260,7 @@ const Icon = (props: IconProps) => {
       return (
         <>
           <i
+              {...ariaProps}
               {...dataProps}
               {...htmlProps}
               className={classes}