playbook_ui 15.0.0.pre.alpha.PLAY2468phonenuminputvalidation10790 → 15.0.0.pre.alpha.PLAY2473rowhighlightfix10510

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 88a9c380534f63a7de7599bf2ee71a8afbb142b8ef6eb20a698a3df876024638
-  data.tar.gz: 79475a4ef5ad22653424134e6c132760f48c1622bcaf7233e63744c325bc0321
+  metadata.gz: f3ed0631c51b54669ffc7faa87720d44235290b760f64df26d8cad1af3e527d5
+  data.tar.gz: 06da8419d842a780b2e5567affe683a5c28e227400a5231f82bdc6d920411186
 SHA512:
-  metadata.gz: 4b589699c270e2d4454a2eb681af65adcd913e97a40aee6bc9fe5dc8ccf3242eb39b15af4a24ca77f339da55f1977d2e8a5f95a8d9dd2b7403070c99cbe25e71
-  data.tar.gz: 52fad58b74f2a87c0d9d608bce2001fb8ea4ebe2323961a0d705e267a870fc5b1677eb4deca9eb1d15d5acea4db084239214565ff78d2a79cfe69bab9504fc7e
+  metadata.gz: 2ac52928a5ea5c597a37469b85f6509cbd26236e7e5195b9636d8409cfc7ad513d22ddb4a7889f47bf12d7d1fca748704fcd72007b89acef5e66a93cf4681db4
+  data.tar.gz: faa7715595570f694456f0d9a19430c3ff0b7cbdf66ab1f63e8a843110541e1da10fb22149e004069bc82dd8a27a7469f279e9fd41957befdcca61d3f21b8038

data/app/pb_kits/playbook/_playbook.scss

@@ -1,6 +1,5 @@
 
 
-
 @import 'pb_advanced_table/advanced_table';
 @import 'pb_avatar/avatar';
 @import 'pb_background/background';
@@ -110,7 +109,6 @@
 @import 'pb_weekday_stacked/weekday_stacked';
 @import 'pb_empty_state/empty_state';
 @import 'pb_pb_bar_graph/pb_bar_graph';
-@import 'pb_pb_circle_chart/pb_circle_chart';
 @import 'utilities/mixins';
 @import 'utilities/spacing';
 @import 'utilities/cursor';

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

@@ -30,7 +30,6 @@ const TableCellRenderer = ({
   columnPinning,
   customRowStyle,
   columnDefinitions,
-  isMultiHeaderColumn = false,
 }: {
   row: Row<GenericObject>
   collapsibleTrail?: boolean
@@ -39,18 +38,12 @@ const TableCellRenderer = ({
   columnPinning: { left: string[] }
   customRowStyle?: GenericObject
   columnDefinitions?: {[key:string]:any}[]
-  isMultiHeaderColumn?: boolean
 }) => {
   return (
     <>
       {row.getVisibleCells().map((cell: Cell<GenericObject, unknown>, i: number) => {
         const isPinnedLeft = columnPinning.left.includes(cell.column.id);
-        // Add a border to the right of each group of columns for multi-header column tables
         const isLastCell = (() => {
-          if (!isMultiHeaderColumn) {
-            return false;
-          }
-
           const parent = cell.column.parent;
           if (!parent) {
             const last = row.getVisibleCells().at(-1);
@@ -140,9 +133,6 @@ export const RegularTableView = ({
 
   const columnPinning = table.getState().columnPinning || { left: [] };
   const columnDefinitions = table.options.meta?.columnDefinitions || [];
-  const isMultiHeaderColumn = columnDefinitions.some(
-    (obj: Record<string, unknown>) => "columns" in obj
-  );
 
   // Row pinning
   function PinnedRow({ row }: { row: Row<any> }) {
@@ -168,7 +158,6 @@ export const RegularTableView = ({
             columnDefinitions={columnDefinitions}
             columnPinning={columnPinning}
             customRowStyle={customRowStyle}
-            isMultiHeaderColumn={isMultiHeaderColumn}
             loading={loading}
             row={row}
             stickyLeftColumn={stickyLeftColumn}
@@ -232,7 +221,6 @@ export const RegularTableView = ({
                   columnDefinitions={columnDefinitions}
                   columnPinning={columnPinning}
                   customRowStyle={customRowStyle}
-                  isMultiHeaderColumn={isMultiHeaderColumn}
                   loading={loading}
                   row={row}
                   stickyLeftColumn={stickyLeftColumn}

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

@@ -104,7 +104,7 @@ export const VirtualizedTableView = ({
     // Create debounced version of the width measurement function
     const handleResize = debounce(() => {
       setColumnWidths(getHeaderCellWidths());
-    }, 0);
+    }, 100);
 
     // Add the event listener
     window.addEventListener('resize', handleResize);

data/app/pb_kits/playbook/pb_advanced_table/_advanced_table.scss

@@ -249,10 +249,8 @@
   }
 
   .pb_advanced_table_body {
-    tr {
-      .last-cell:not(:last-of-type) {
-        border-right: 1px solid $border_light !important;
-      }
+    .last-cell {
+      border-right: 1px solid $border_light !important;
     }
     tr td:first-child {
       padding-left: 8px !important;
@@ -703,14 +701,6 @@
           }
         }
       }
-
-      .pb_advanced_table_header {
-        > tr {
-          .last-header-cell:last-of-type {
-            border-right-width: 0 !important;
-          }
-        }
-      }
     }
   }
 
@@ -985,14 +975,14 @@
   // Firefox-specific fix for last-header-cell and last-cell vertical borders
   @-moz-document url-prefix() {
     .pb_advanced_table_header {
-      .last-header-cell:not(:last-child) {
+      .last-header-cell {
         border-right: none !important;
         box-shadow: 1px 0 0 0 $border_light !important;
       }
     }
 
     .pb_advanced_table_body {
-      .last-cell:not(:last-child) {
+      .last-cell {
         border-right: none !important;
         box-shadow: 1px 0 0 0 $border_light !important;
       }
@@ -1001,14 +991,14 @@
     // Dark mode Firefox fixes
     &.dark {
       .pb_advanced_table_header {
-        .last-header-cell:not(:last-child) {
+        .last-header-cell {
           border-right: none !important;
           box-shadow: 1px 0 0 0 $border_dark !important;
         }
       }
 
       .pb_advanced_table_body {
-        .last-cell:not(:last-child) {
+        .last-cell {
           border-right: none !important;
           box-shadow: 1px 0 0 0 $border_dark !important;
         }
@@ -1021,62 +1011,18 @@
 .pb-advanced-table-popover-option:hover {
   background-color: $bg_light;
 }
-
 // Removes borders when Wrapped inside the Card Kit
-.pb_card_kit > .pb_advanced_table {
-  // Remove right border only from the actual last column
-  .pb_advanced_table_body tr td:last-child,
-  .pb_advanced_table_header tr th:last-child {
-    box-shadow: none !important; // prevents double up of borders on Firefox when in Card Kit
+.pb_card_kit > .pb_advanced_table .pb_advanced_table_body .last-cell,
+.pb_card_kit > .pb_advanced_table .pb_advanced_table_header .last-header-cell,
+.pb_card_kit > .pb_advanced_table .pb_advanced_table_body tr td:last-child,
+.pb_card_kit > .pb_advanced_table .pb_advanced_table_header tr th:last-child {
     border-right: none !important;
-  }
-
-  // Without vertical border, remove all last-cell borders
-  // Specifically for header to prevent thicker borders in firefox.
-  .pb_table:not(.vertical-border) {
-    .pb_advanced_table_header .last-header-cell {
-      box-shadow: none !important;
-    }
-  }
-  // Firefox fix
-  @-moz-document url-prefix() {
-    .pb_advanced_table_header {
-      .last-header-cell {
-        box-shadow: 1px 0 0 0 $border_light !important;
-      }
-    }
-  }
-
-  // For tables WITH vertical borders, only remove border from actual last column
-  .pb_table.vertical-border {
-    .pb_advanced_table_body .last-cell:not(:last-child),
-    .pb_advanced_table_header .last-header-cell:not(:last-child) {
-      box-shadow: none !important;
-      border-right: 1px solid $border_light !important;
-    }
-
-    // Dark mode
-    &.dark {
-      .pb_advanced_table_body .last-cell:not(:last-child),
-      .pb_advanced_table_header .last-header-cell:not(:last-child) {
-        border-right: 1px solid $border_dark !important;
-      }
-    }
-  }
-
-  // Support column group border colors
-  &.pb_advanced_table[class*="column-group-border-"] {
-    .pb_advanced_table_body .last-cell:not(:last-child),
-    .pb_advanced_table_header .last-header-cell:not(:last-child) {
-      border-right: 1px solid var(--column-border-color) !important;
-    }
-  }
 }
 
-// Removes bottom borders when wrapped inside the Card Kit (keep existing behavior)
-.pb_card_kit > .pb_advanced_table tr:last-child,
+//  Removes borders when Wrapped inside the Card Kit
+.pb_card_kit > .pb_advanced_table tr:last-child, 
 .pb_card_kit > .pb_advanced_table .last-row-cell {
   td {
-    border-bottom: none !important;
+    border-bottom: none !important; 
   }
 }

data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_headers_vertical_border.jsx

@@ -44,9 +44,9 @@ const AdvancedTableColumnHeadersVerticalBorder = (props) => {
       ],
     },
   ];
-
+  
   const tableProps = {
-    verticalBorder: true,
+    verticalBorder: true
   }
 
   return (

data/app/pb_kits/playbook/pb_card/_card.scss

@@ -20,7 +20,7 @@
 // Dark mode
 .pb_card_kit.dark {
   @include pb_card_dark;
-
+  
   &.pb_card_kit_selected {
     @include pb_card_selected_dark;
   }
@@ -33,8 +33,7 @@
 
 // Highlight styles
 .pb_card_kit_highlight_top,
-.pb_card_kit_highlight_side,
-.pb_card_kit_highlight_right_side {
+.pb_card_kit_highlight_side {
   overflow: hidden;
 }
 
@@ -53,20 +52,13 @@
   }
 }
 
-// Highlight side variants
+// Highlight side variants  
 @each $color_name, $color_value in $pb_card_highlight_colors {
   .pb_card_kit_highlight_side.pb_card_kit_highlight_#{$color_name}::before {
     @include pb_card_highlight($pb_card_highlight_size, 100%, $color_value);
   }
 }
 
-// Highlight side right variants
-@each $color_name, $color_value in $pb_card_highlight_colors {
-  .pb_card_kit_highlight_right_side.pb_card_kit_highlight_#{$color_name}::before {
-    @include pb_card_right_highlight($pb_card_highlight_size, 100%, $color_value);
-  }
-}
-
 // Card Header
 .pb_card_header_kit {
   flex-grow: 0;
@@ -76,7 +68,7 @@
   padding: $space_sm;
   border: 0;
   border-radius: $pb_card_header_border_radius $pb_card_header_border_radius 0px 0px;
-
+  
   // Inherit border radius from parent card
   .pb_card_kit_border_radius_xs & {
     border-radius: $border_radius_xs $border_radius_xs 0px 0px;

data/app/pb_kits/playbook/pb_card/_card.tsx

@@ -26,7 +26,7 @@ type CardPropTypes = {
   dragHandle?: boolean,
   htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
   highlight?: {
-    position?: "side" | "right_side" | "top",
+    position?: "side" | "top",
     color?: string,
   },
   id?: string,
@@ -56,7 +56,7 @@ const Header = (props: CardHeaderProps) => {
   const { children, className, headerColor = 'category_1', headerColorStriped = false } = props
   const headerColorCSS = `pb_card_header_kit_${headerColor}`
   const headerStripedCSS = headerColorStriped ? `pb_card_header_kit_${headerColor}_striped` : ''
-
+  
   const headerCSS = classnames(
     'pb_card_header_kit',
     headerColorCSS,
@@ -108,7 +108,7 @@ const Card = (props: CardPropTypes): React.ReactElement => {
   const borderRadiusCSS = borderRadius !== 'md' ? `pb_card_kit_border_radius_${borderRadius}` : ''
   const highlightPositionCSS = highlight.position ? `pb_card_kit_highlight_${highlight.position}` : ''
   const highlightColorCSS = highlight.color ? `pb_card_kit_highlight_${highlight.color}` : ''
-
+  
   const cardCss = classnames(
     'pb_card_kit', // Base class
     selectedCSS,

data/app/pb_kits/playbook/pb_card/_card_mixin.scss

@@ -87,16 +87,6 @@ $pb_card_header_colors: map-merge(map-merge(map-merge($product_colors, $addition
   background: $background;
 }
 
-@mixin pb_card_right_highlight($width, $height, $background){
-  content: "";
-  position: absolute;
-  top: 0;
-  right: 0;
-  width: $width;
-  height: $height;
-  background: $background;
-}
-
 @mixin pb_card_header_color($header_color) {
   background: $header_color;
 }

data/app/pb_kits/playbook/pb_card/docs/_card_highlight.html.erb

@@ -4,9 +4,6 @@
 <%= pb_rails("card", props: {highlight: {position: "top", color:"warning"}, margin_bottom: "sm"}) do %>
   Top Position & Warning Color
 <% end %>
-<%= pb_rails("card", props: {highlight: {position: "right_side", color:"product_5_highlight"}, margin_bottom: "sm"}) do %>
-  Right Side Position & Product 5 Highlight Color
-<% end %>
 <%= pb_rails("card", props: {highlight: {position: "side", color:"category_2"}, margin_bottom: "sm"}) do %>
   Side Position & Category 2 Color
 <% end %>

data/app/pb_kits/playbook/pb_card/docs/_card_highlight.jsx

@@ -21,14 +21,6 @@ const CardHighlight = (props) => {
         {'Top Position & Warning Color'}
       </Card>
 
-      <Card
-          {...props}
-          highlight={{ position: 'right_side', color: 'product_5_highlight' }}
-          marginBottom="sm"
-      >
-        {'Right Side Position & Product 5 Highlight Color'}
-      </Card>
-
       <Card
           {...props}
           highlight={{ position: 'side', color: 'category_2' }}

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_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, required: true } %>
+  <%= form.phone_number_field :example_phone_number_field_validation, props: { label: "Example phone field", hidden_inputs: 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,13 +2,12 @@ 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 PHONE_NUMBER_VALIDATION_ERROR_SELECTOR = '[data-pb-phone-validation-error="true"]'
+const FORM_SELECTOR            = 'form[data-pb-form-validation="true"]'
+const REQUIRED_FIELDS_SELECTOR = 'input[required],textarea[required],select[required]'
 
 const FIELD_EVENTS = [
   'change',
@@ -29,14 +28,6 @@ class PbFormValidation extends PbEnhancedElement {
         }, 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) {
@@ -77,12 +68,6 @@ 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_icon_button/_icon_button.tsx

@@ -51,7 +51,6 @@ const IconButton = (props: IconButtonProps) => {
         id={id}
     >
       <Button
-          aria={aria}
           borderRadius="xs"
           htmlType={htmlType}
           link={link}

data/app/pb_kits/playbook/pb_icon_button/icon_button.html.erb

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

data/app/pb_kits/playbook/pb_nav/_item.tsx

@@ -140,8 +140,7 @@ const { filteredPadding, filteredMargin } = filterItemSpacing(itemSpacing);
   delete filteredProps?.marginLeft;
 
 
-  const isLink = !!link
-  const Tag = isLink ? "a" : "div"
+  const Tag = link ? "a" : "div";
   const activeClass = active === true ? "active" : "";
   const highlightedBorderClass = active === true && highlighted_border === false ? "highlighted_border_none" : "";
   const collapsibleTrailClass = collapsible && collapsibleTrail ? "collapsible_trail" : "";
@@ -201,13 +200,6 @@ const { filteredPadding, filteredMargin } = filterItemSpacing(itemSpacing);
 
   const collapsibleClasses = buildCss("collapsible_nav_wrapper", activeClass, highlightedBorderClass, collapsibleTrailClass)
 
-  const handleKeyDown = (e: React.KeyboardEvent) => {
-    if (!isLink && (e.key === "Enter" || e.key === " ")) {
-      e.preventDefault()
-      onClick?.()
-    }
-  }
-
   return (
     <>
       {collapsible ? (
@@ -230,18 +222,15 @@ const { filteredPadding, filteredMargin } = filterItemSpacing(itemSpacing);
                   {...dataProps}
                   {...htmlProps}
                   className={classes}
-                  href={isLink ? link : undefined}
+                  href={link}
                   id={id}
-                  role={!isLink ? "button" : undefined}
-                  tabIndex={!isLink ? 0 : undefined}
-                  target={isLink ? target : undefined}
+                  target={target}
               >
                 {imageUrl && (
                   <div
                       className="pb_nav_list_item_icon_section_collapsible"
                       key={imageUrl}
                       onClick={(e) => handleIconClick(e)}
-                      onKeyDown={!isLink ? handleKeyDown : undefined}
                   >
                     <Image className="pb_nav_img_wrapper"
                         url={imageUrl}
@@ -276,13 +265,10 @@ const { filteredPadding, filteredMargin } = filterItemSpacing(itemSpacing);
             {...dataProps}
             {...htmlProps}
             className={classes}
-            href={isLink ? link : undefined}
+            href={link}
             id={id}
             onClick={onClick}
-            onKeyDown={!isLink ? handleKeyDown : undefined}
-            role={!isLink ? "button" : undefined}
-            tabIndex={!isLink ? 0 : undefined}
-            target={isLink ? target : undefined}
+            target={target}
         >
           {imageUrl && (
             <div className="pb_nav_list_item_icon_section"