Missing top border on first tabs of nested accordions

[hoiast]

Describe the bug

I am not sure about other themes, but with arya-orange there is a minor issue regarding nested accordions. A CSS rule is used to prevent duplicate borders for regular accordions, but it wrongly selects the first accordion header of tabs that are not always a first child. The 'culprit' :

.p-accordion .p-accordion-tab:not(:first-child) .p-accordion-header .p-accordion-header-link {
    border-top: 0 none;
}

A quick solution that I use is to include a new CSS Rule to re-add top borders to these first tabs on nested accordions:

.p-accordion  .p-accordion  .p-accordion-tab:first-child  .p-accordion-header  .p-accordion-header-link {
  border-top: 1px solid #383838;
} 

Reproducer

https://codesandbox.io/s/quizzical-knuth-8b3odz

PrimeVue version

3.15.0

Vue version

3.x

Language

ALL

Build / Runtime

Vite

Browser(s)

Chrome 103

Steps to reproduce the behavior

1. Open the accordions tabs.
2. You will notice that first tabs on nested accordions will lack the top border.
3. Uncomment the CSS Rule on App.vue to see the fix in action.

Note: The only exceptions are the first tabs of nested accordions located on the first tab of their parent accordions through all nesting levels.

Expected behavior

First tabs on nested accordions will lack the top border.

[kemunoz]

I have the same issue, only difference for me is the first child has the border but the rest do not

[LuWa-at-work]

There is also another bug when the last Tab contains another accordion. Every Tab in the inner Accordion has rounded edges:

code that makes problems: (is in the themes files)

.p-accordion .p-accordion-tab .p-accordion-header .p-accordion-header-link {
  border-radius: 0;
}

.p-accordion .p-accordion-tab .p-accordion-content {
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
}

.p-accordion
  .p-accordion-tab:not(:first-child)
  .p-accordion-header
  .p-accordion-header-link {
  border-top: 0 none;
}

.p-accordion
  .p-accordion-tab:not(:first-child)
  .p-accordion-header:not(.p-highlight):not(.p-disabled):hover
  .p-accordion-header-link,
.p-accordion
  .p-accordion-tab:not(:first-child)
  .p-accordion-header:not(.p-disabled).p-highlight:hover
  .p-accordion-header-link {
  border-top: 0 none;
}

.p-accordion
  .p-accordion-tab:first-child
  .p-accordion-header
  .p-accordion-header-link {
  border-top-right-radius: 15px;
  border-top-left-radius: 15px;
}

.p-accordion
  .p-accordion-tab:last-child
  .p-accordion-header:not(.p-highlight)
  .p-accordion-header-link {
  border-bottom-right-radius: 15px;
  border-bottom-left-radius: 15px;
}

.p-accordion .p-accordion-tab:last-child .p-accordion-content {
  border-bottom-right-radius: 15px;
  border-bottom-left-radius: 15px;
}

a possible solution would be:

.p-accordion > .p-accordion-tab .p-accordion-header .p-accordion-header-link {
  border-radius: 0;
}

.p-accordion > .p-accordion-tab:not(:last-child) .p-accordion-content {
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
}

.p-accordion >
  .p-accordion-tab:not(:first-child) >
  .p-accordion-header
  .p-accordion-header-link {
  border-top: 0 none;
}

.p-accordion >
  .p-accordion-tab:not(:first-child) >
  .p-accordion-header:not(.p-highlight):not(.p-disabled):hover
  .p-accordion-header-link,
.p-accordion >
  .p-accordion-tab:not(:first-child) >
  .p-accordion-header:not(.p-disabled).p-highlight:hover
  .p-accordion-header-link {
  border-top: 0 none;
}

.p-accordion >
  .p-accordion-tab:first-child >
  .p-accordion-header
  .p-accordion-header-link {
  border-top-right-radius: 15px;
  border-top-left-radius: 15px;
}

.p-accordion >
  .p-accordion-tab:last-child >
  .p-accordion-header:not(.p-highlight)
  .p-accordion-header-link {
  border-bottom-right-radius: 15px;
  border-bottom-left-radius: 15px;
}

.p-accordion > .p-accordion-tab:last-child > .p-accordion-content {
  border-bottom-right-radius: 15px;
  border-bottom-left-radius: 15px;
}

tl:dr:

rules like the following cause problems

.p-accordion 
  .p-accordion-tab:not(:first-child) 
  .p-accordion-header

because it also matches the inner accordion-tabs

The solution:

.p-accordion >
  .p-accordion-tab:not(:first-child) >
  .p-accordion-header

this specifies that only the direct child element matches and not a child of a child