Merge branch 'main' into josepmartins/accessible-frontmatter-variable

Author: Josep Martins

.changeset/clever-hotels-kneel.md

@@ -0,0 +1,5 @@
+---
+'@primer/react': patch
+---
+
+Fixes the sx prop on the SegmentedControl buttons by properly merging the sx prop when cloning button children.

.changeset/heavy-pets-own.md

@@ -0,0 +1,5 @@
+---
+"@primer/react": patch
+---
+
+Adds lines to indicate the depth of items in a TreeView

.changeset/large-trains-press.md

@@ -0,0 +1,5 @@
+---
+'@primer/react': minor
+---
+
+Adds a `size` prop to the SegmentedControl component. Users can choose between 'medium' (default), and 'small'. More sizes can be added when/if we find we need them.

.changeset/neat-squids-cheat.md

@@ -0,0 +1,5 @@
+---
+"@primer/react": patch
+---
+
+Adds support for arrow key navigation of a TreeView using `aria-activedescendant`

.changeset/stupid-knives-arrive.md

@@ -0,0 +1,5 @@
+---
+'@primer/react': patch
+---
+
+Reverted SelectPanel breaking behavioral changes

.changeset/tidy-beans-punch.md

@@ -0,0 +1,5 @@
+---
+"@primer/react": patch
+---
+
+Add a `current` prop to `TreeView.Item` and `TreeView.LinkItem`

docs/content/PageLayout.mdx

@@ -202,6 +202,39 @@ Add `offsetHeader` prop to specify the height of the custom sticky header along
 </Box>
 ```
 
+### With `NavList`
+
+`PageLayout.Pane` by itself does not specify or provide landmark roles. Using
+components that define their own landmark roles, such as [`NavList`](/NavList), will provide
+clear structure to the page that is not present by default in `PageLayout.Pane`.
+
+It's important to note that multiple landmark roles, such as multiple
+`<nav>` elements, should be uniquely labelled in order to clarify what the
+navigation container is used for.
+
+```jsx live
+<PageLayout>
+  <PageLayout.Header>
+    <Placeholder label="Header" height={64} />
+  </PageLayout.Header>
+  <PageLayout.Pane position="start" aria-label="Secondary navigation">
+    <NavList>
+      <NavList.Item href="/" aria-current="page">
+        Home
+      </NavList.Item>
+      <NavList.Item href="/about">About</NavList.Item>
+      <NavList.Item href="/contact">Contact</NavList.Item>
+    </NavList>
+  </PageLayout.Pane>
+  <PageLayout.Content>
+    <Placeholder label="Content" height={240} />
+  </PageLayout.Content>
+  <PageLayout.Footer>
+    <Placeholder label="Footer" height={64} />
+  </PageLayout.Footer>
+</PageLayout>
+```
+
 ### With `aria-label`
 
 Using `aria-label` along with `PageLayout.Header`, `PageLayout.Content`, or `PageLayout.Footer` creates a unique label for that landmark role that can make it easier to navigate between sections of content on a page.
@@ -262,6 +295,20 @@ Each component may be labeled through either `aria-label` or `aria-labelledby` i
 - [WCAG, ARIA11 Technique](https://www.w3.org/WAI/WCAG22/Techniques/aria/ARIA11)
 - [MDN, Landmark roles](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/landmark_role)
 
+### `PageLayout.Pane`
+
+The `PageLayout.Pane` component does not provide a default landmark role as the
+content of this component may have different roles. When using this component,
+consider the type of content being rendered inside of `PageLayout.Pane` and if
+it requires a landmark role. Common landmark roles include:
+
+- [`aside`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/aside)
+- [`navigation`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/aside)
+
+Some components, such as `NavList` may already include a landmark role. In these
+situation, these components use an appropriate landmark role and no further
+action is needed when using `PageLayout.Pane`.
+
 ### Screen readers
 
 Most screen readers provide a mechanism through which you can navigate between landmarks on the page. Typically, this is done through a specific keyboard shortcut or through an option in a rotor.

docs/content/SegmentedControl.mdx

@@ -39,6 +39,16 @@ const Controlled = () => {
 render(Controlled)
 ```
 
+### Small
+
+```jsx live
+<SegmentedControl aria-label="File view" size="small">
+  <SegmentedControl.Button defaultSelected>Preview</SegmentedControl.Button>
+  <SegmentedControl.Button>Raw</SegmentedControl.Button>
+  <SegmentedControl.Button>Blame</SegmentedControl.Button>
+</SegmentedControl>
+```
+
 ### With icons and labels
 
 ```jsx live
@@ -210,6 +220,7 @@ render(Controlled)
     type="boolean"
     description="Whether the segment is selected. This is used for controlled SegmentedControls, and needs to be updated using the onChange handler on SegmentedControl."
   />
+  <PropsTableRow name="selected" type="'small' | 'medium'" description="The size of the buttons" />
   <PropsTableRow
     name="defaultSelected"
     type="boolean"

docs/content/SelectPanel.mdx

@@ -37,28 +37,27 @@ const items = [
 ]
 
 function DemoComponent() {
-  const [selected, setSelected] = React.useState([items[2], items[4]])
+  const [selected, setSelected] = React.useState([items[0], items[1]])
   const [filter, setFilter] = React.useState('')
   const filteredItems = items.filter(item => item.text.toLowerCase().startsWith(filter.toLowerCase()))
   const [open, setOpen] = React.useState(false)
 
   return (
     <SelectPanel
-      renderAnchor={({...anchorProps}) => (
-        <Button trailingIcon={TriangleDownIcon} {...anchorProps}>
-          Select Labels
+      renderAnchor={({children, 'aria-labelledby': ariaLabelledBy, ...anchorProps}) => (
+        <Button trailingIcon={TriangleDownIcon} aria-labelledby={` ${ariaLabelledBy}`} {...anchorProps}>
+          {children || 'Select Labels'}
         </Button>
       )}
-      title="Select Items"
-      inputLabel="Select Items"
+      placeholderText="Filter Labels"
       open={open}
       onOpenChange={setOpen}
       items={filteredItems}
       selected={selected}
       onSelectedChange={setSelected}
       onFilterChange={setFilter}
       showItemDividers={true}
-      overlayProps={{width: 'medium', height: 'medium'}}
+      overlayProps={{width: 'small', height: 'xsmall'}}
     />
   )
 }

docs/content/TreeView.mdx

@@ -19,7 +19,9 @@ description: A hierarchical list of items where nested items can be expanded and
         <TreeView.Item>
           Button
           <TreeView.SubTree>
-            <TreeView.LinkItem href="#">Button.tsx</TreeView.LinkItem>
+            <TreeView.LinkItem href="#" current>
+              Button.tsx
+            </TreeView.LinkItem>
             <TreeView.LinkItem href="#">Button.test.tsx</TreeView.LinkItem>
           </TreeView.SubTree>
         </TreeView.Item>
@@ -46,7 +48,7 @@ description: A hierarchical list of items where nested items can be expanded and
       src
       <TreeView.SubTree>
         <TreeView.LinkItem href="#">Avatar.tsx</TreeView.LinkItem>
-        <TreeView.LinkItem href="#">
+        <TreeView.LinkItem href="#" current>
           Button
           <TreeView.SubTree>
             <TreeView.LinkItem href="#">Button.tsx</TreeView.LinkItem>
@@ -80,6 +82,13 @@ description: A hierarchical list of items where nested items can be expanded and
 
 <PropsTable>
   <PropsTableRow name="children" type="React.ReactNode" required />
+  <PropsTable
+    name="current"
+    type="boolean"
+    defaultValue="false"
+    description="Whether the item is the current item. No more than one item should be current at once."
+  />
+  <PropsTableRow name="defaultExpanded" type="boolean" description="Whether the item is expanded by default." />
   <PropsTableRow
     name="onSelect"
     type="(event: React.MouseEvent<HTMLElement> | React.KeyboardEvent<HTMLElement>) => void"