(null)
+
+ return (
+ // We need to add an aria-label for improving support for more assistive technologies. For example: VoiceOver might not detect the `name` without `aria-label`
+ // Since this has a custom context menu, it's ok to add a tabIndex
+ // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex
+
+ {children}
+
+ Anchor
+
+
+
+ Copy link
+ ⌘C
+
+
+ Quote reply
+ ⌘Q
+
+
+ Edit comment
+ ⌘E
+
+ View file
+
+
+ Delete file
+ ⌘D
+
+
+
+
+
+ )
+ }
+
+ return (
+ <>
+ Right click the list items below to see the context menu
+
+
+ List item one
+ List item two
+ List item three
+
+
+ )
+}
+
export const CustomAnchor = () => (
diff --git a/packages/react/src/Banner/Banner.tsx b/packages/react/src/Banner/Banner.tsx
index f33021d67d7..c61f130fd2e 100644
--- a/packages/react/src/Banner/Banner.tsx
+++ b/packages/react/src/Banner/Banner.tsx
@@ -88,7 +88,7 @@ const labels: Record = {
warning: 'Warning',
}
-const CSS_MODULES_FEATURE_FLAG = 'primer_react_css_modules_staff'
+const CSS_MODULES_FEATURE_FLAG = 'primer_react_css_modules_ga'
export const Banner = React.forwardRef(function Banner(
{
diff --git a/packages/react/src/Blankslate/Blankslate.module.css b/packages/react/src/Blankslate/Blankslate.module.css
index 05fa2c0a442..5f0029cbcfd 100644
--- a/packages/react/src/Blankslate/Blankslate.module.css
+++ b/packages/react/src/Blankslate/Blankslate.module.css
@@ -31,6 +31,7 @@
.Description {
margin: 0;
margin-bottom: var(--base-size-8);
+ text-align: center;
}
.Heading {
diff --git a/packages/react/src/ButtonGroup/ButtonGroup.tsx b/packages/react/src/ButtonGroup/ButtonGroup.tsx
index e3398885b3f..74f9ff32e15 100644
--- a/packages/react/src/ButtonGroup/ButtonGroup.tsx
+++ b/packages/react/src/ButtonGroup/ButtonGroup.tsx
@@ -9,7 +9,7 @@ import {clsx} from 'clsx'
import {useFeatureFlag} from '../FeatureFlags'
const StyledButtonGroup = toggleStyledComponent(
- 'primer_react_css_modules_team',
+ 'primer_react_css_modules_staff',
'div',
styled.div`
display: inline-flex;
@@ -78,7 +78,7 @@ const ButtonGroup = React.forwardRef(function But
{children, className, ...rest},
forwardRef,
) {
- const enabled = useFeatureFlag('primer_react_css_modules_team')
+ const enabled = useFeatureFlag('primer_react_css_modules_staff')
return (
>
+
+export const WithCSS = () => (
+
+
+
+ Default label
+
+
+
+
+)
+
+export const WithSx = () => (
+
+
+ Default label
+
+
+
+)
+
+export const WithSxAndCSS = () => (
+
+
+
+ Default label
+
+
+
+
+)
diff --git a/packages/react/src/Token/Token.dev.stories.tsx b/packages/react/src/Token/Token.dev.stories.tsx
new file mode 100644
index 00000000000..ca6c9c8b68c
--- /dev/null
+++ b/packages/react/src/Token/Token.dev.stories.tsx
@@ -0,0 +1,10 @@
+import React from 'react'
+import type {Meta} from '@storybook/react'
+import Token from './Token'
+
+export default {
+ title: 'Components/Token/Dev',
+ component: Token,
+} as Meta
+
+export const DevDefault = () =>
diff --git a/packages/react/src/TreeView/TreeView.test.tsx b/packages/react/src/TreeView/TreeView.test.tsx
index 78bfceae3ba..eb2329f9b22 100644
--- a/packages/react/src/TreeView/TreeView.test.tsx
+++ b/packages/react/src/TreeView/TreeView.test.tsx
@@ -189,6 +189,19 @@ describe('Markup', () => {
expect(noDescription).toHaveAccessibleDescription(' ')
})
+ it('should not have aria-describedby when no leading or trailing visual', () => {
+ const {getByLabelText} = renderWithTheme(
+
+ Item 1
+ Item 2
+ ,
+ )
+
+ const noDescription = getByLabelText(/Item 1/)
+ expect(noDescription).not.toHaveAccessibleDescription()
+ expect(noDescription).not.toHaveAttribute('aria-describedby')
+ })
+
it('should include `aria-expanded` when a SubTree contains content', async () => {
const user = userEvent.setup({
advanceTimers: jest.advanceTimersByTime,
diff --git a/packages/react/src/TreeView/TreeView.tsx b/packages/react/src/TreeView/TreeView.tsx
index 71f41042722..a1e4fc882b6 100644
--- a/packages/react/src/TreeView/TreeView.tsx
+++ b/packages/react/src/TreeView/TreeView.tsx
@@ -458,6 +458,11 @@ const Item = React.forwardRef(
[onSelect, setIsExpandedWithCache, toggle],
)
+ const ariaDescribedByIds = [
+ slots.leadingVisual ? leadingVisualId : null,
+ slots.trailingVisual ? trailingVisualId : null,
+ ].filter(Boolean)
+
return (
(
role="treeitem"
aria-label={ariaLabel}
aria-labelledby={ariaLabel ? undefined : ariaLabelledby || labelId}
- aria-describedby={`${leadingVisualId} ${trailingVisualId}`}
+ aria-describedby={ariaDescribedByIds.length ? ariaDescribedByIds.join(' ') : undefined}
aria-level={level}
aria-expanded={(isSubTreeEmpty && (!isExpanded || !hasSubTree)) || expanded === null ? undefined : isExpanded}
aria-current={isCurrentItem ? 'true' : undefined}