Skip to content

Commit

Permalink
Adds tablist-wrapper shadow part to the element wrapping the upper po…
Browse files Browse the repository at this point in the history
…rtion of the component
  • Loading branch information
owenniblock committed Feb 20, 2024
1 parent cc846d3 commit 4bb924b
Show file tree
Hide file tree
Showing 2 changed files with 2 additions and 0 deletions.
1 change: 1 addition & 0 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -49,6 +49,7 @@ If none of the tabs have `aria-selected=true`, then the first tab will be select

### Parts

- `::part(tablist-wrapper)` is the wrapper which contains `before-tabs`, `tablist` and `after-tabs`.
- `::part(tablist)` is the container which wraps all tabs. This element appears in ATs as it is `role=tablist`.
- `::part(panel)` is the container housing the currently active tabpanel.
- `::part(before-tabs)` is the container housing any elements that appear before the first `role=tab`. This also can be directly slotted with `slot=before-tabs`. This container lives outside the element with role=tablist to adhere to ARIA guidelines.
Expand Down
1 change: 1 addition & 0 deletions src/tab-container-element.ts
Original file line number Diff line number Diff line change
Expand Up @@ -130,6 +130,7 @@ export class TabContainerElement extends HTMLElement {
const shadowRoot = this.shadowRoot || this.attachShadow({mode: 'open', slotAssignment: 'manual'})
const tabListContainer = document.createElement('div')
tabListContainer.style.display = 'flex'
tabListContainer.setAttribute('part', 'tablist-wrapper')
const tabListSlot = document.createElement('slot')
tabListSlot.setAttribute('part', 'tablist')
const panelSlot = document.createElement('slot')
Expand Down

0 comments on commit 4bb924b

Please sign in to comment.