fix: a11y bug on ModalHeader (#231)

stacysun-cb · web-flow · commit d7728ce877bb · 2025-12-10T20:28:26.000-08:00
* fix a11y bug on ModalHeader

* release
diff --git a/packages/common/CHANGELOG.md b/packages/common/CHANGELOG.md
@@ -8,6 +8,10 @@ All notable changes to this project will be documented in this file.
 
 <!-- template-start -->
 
+## 8.28.1 ((12/10/2025, 04:33 PM PST))
+
+This is an artificial version bump with no new change.
+
 ## 8.28.0 ((12/10/2025, 03:41 PM PST))
 
 This is an artificial version bump with no new change.
diff --git a/packages/common/package.json b/packages/common/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@coinbase/cds-common",
-  "version": "8.28.0",
+  "version": "8.28.1",
   "description": "Coinbase Design System - Common",
   "repository": {
     "type": "git",
diff --git a/packages/mcp-server/CHANGELOG.md b/packages/mcp-server/CHANGELOG.md
@@ -8,6 +8,10 @@ All notable changes to this project will be documented in this file.
 
 <!-- template-start -->
 
+## 8.28.1 ((12/10/2025, 04:33 PM PST))
+
+This is an artificial version bump with no new change.
+
 ## 8.28.0 ((12/10/2025, 03:41 PM PST))
 
 This is an artificial version bump with no new change.
diff --git a/packages/mcp-server/package.json b/packages/mcp-server/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@coinbase/cds-mcp-server",
-  "version": "8.28.0",
+  "version": "8.28.1",
   "description": "Coinbase Design System - MCP Server",
   "repository": {
     "type": "git",
diff --git a/packages/mobile/CHANGELOG.md b/packages/mobile/CHANGELOG.md
@@ -8,6 +8,12 @@ All notable changes to this project will be documented in this file.
 
 <!-- template-start -->
 
+## 8.28.1 (12/10/2025 PST)
+
+#### 🐞 Fixes
+
+- Fix a11y bug on ModalHeader.
+
 ## 8.28.0 (12/10/2025 PST)
 
 #### 🚀 Updates
diff --git a/packages/mobile/package.json b/packages/mobile/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@coinbase/cds-mobile",
-  "version": "8.28.0",
+  "version": "8.28.1",
   "description": "Coinbase Design System - Mobile",
   "repository": {
     "type": "git",
diff --git a/packages/mobile/src/overlays/modal/ModalHeader.tsx b/packages/mobile/src/overlays/modal/ModalHeader.tsx
@@ -82,9 +82,11 @@ export const ModalHeader: React.FC<React.PropsWithChildren<ModalHeaderProps>> =
         )}
       </Box>
       <Box alignItems="center" flexBasis={0} flexGrow={6} justifyContent="center">
-        <Text align="center" font="headline">
-          {title}
-        </Text>
+        {title && (
+          <Text align="center" font="headline">
+            {title}
+          </Text>
+        )}
       </Box>
       <Box alignItems="flex-end" flexBasis={0} flexGrow={1}>
         {!hideCloseButton && (
diff --git a/packages/mobile/src/overlays/modal/__tests__/Modal.test.tsx b/packages/mobile/src/overlays/modal/__tests__/Modal.test.tsx
@@ -155,6 +155,15 @@ describe('Modal', () => {
     expect(screen.getByTestId('mock-modal')).toBeAccessible();
   });
 
+  it('passes a11y when title is not provided', () => {
+    render(
+      <DefaultThemeProvider>
+        <MockModal visible testID="mock-modal" title="" />
+      </DefaultThemeProvider>,
+    );
+    expect(screen.getByTestId('mock-modal')).toBeAccessible();
+  });
+
   it('renders React Native Modal', () => {
     render(
       <DefaultThemeProvider>
diff --git a/packages/web/CHANGELOG.md b/packages/web/CHANGELOG.md
@@ -8,6 +8,12 @@ All notable changes to this project will be documented in this file.
 
 <!-- template-start -->
 
+## 8.28.1 (12/10/2025 PST)
+
+#### 🐞 Fixes
+
+- Fix a11y bug on ModalHeader.
+
 ## 8.28.0 (12/10/2025 PST)
 
 #### 🚀 Updates
diff --git a/packages/web/package.json b/packages/web/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@coinbase/cds-web",
-  "version": "8.28.0",
+  "version": "8.28.1",
   "description": "Coinbase Design System - Web",
   "repository": {
     "type": "git",
diff --git a/packages/web/src/overlays/modal/ModalHeader.tsx b/packages/web/src/overlays/modal/ModalHeader.tsx
@@ -103,15 +103,17 @@ export const ModalHeader = ({
         emptyPlaceholder
       )}
       <Box alignItems="center" flexGrow={1} justifyContent="center" paddingX={2}>
-        <Text
-          as="h2"
-          display="block"
-          font="headline"
-          id={accessibilityLabelledBy}
-          textAlign="center"
-        >
-          {title}
-        </Text>
+        {title && (
+          <Text
+            as="h2"
+            display="block"
+            font="headline"
+            id={accessibilityLabelledBy}
+            textAlign="center"
+          >
+            {title}
+          </Text>
+        )}
       </Box>
       {!hideCloseButton && (
         <Box justifyContent="flex-end">
diff --git a/packages/web/src/overlays/modal/__tests__/Modal.test.tsx b/packages/web/src/overlays/modal/__tests__/Modal.test.tsx
@@ -185,6 +185,16 @@ describe('Modal', () => {
     ).toHaveNoViolations();
   });
 
+  it('passes a11y when title is not provided', async () => {
+    expect(
+      await renderA11y(
+        <DefaultThemeProvider>
+          <MockModal visible accessibilityLabel={LABEL} closeAccessibilityLabel="Close" title="" />
+        </DefaultThemeProvider>,
+      ),
+    ).toHaveNoViolations();
+  });
+
   it('has expected default a11y attrs', () => {
     render(
       <DefaultThemeProvider>

Original file line number	Diff line number	Diff line change
`@@ -1,6 +1,6 @@`
`1`	`1`	`{`
`2`	`2`	`"name": "@coinbase/cds-common",`
`3`		`- "version": "8.28.0",`
	`3`	`+ "version": "8.28.1",`
`4`	`4`	`"description": "Coinbase Design System - Common",`
`5`	`5`	`"repository": {`
`6`	`6`	`"type": "git",`
Original file line number	Diff line number	Diff line change
`@@ -1,6 +1,6 @@`
`1`	`1`	`{`
`2`	`2`	`"name": "@coinbase/cds-mcp-server",`
`3`		`- "version": "8.28.0",`
	`3`	`+ "version": "8.28.1",`
`4`	`4`	`"description": "Coinbase Design System - MCP Server",`
`5`	`5`	`"repository": {`
`6`	`6`	`"type": "git",`
Original file line number	Diff line number	Diff line change
`@@ -1,6 +1,6 @@`
`1`	`1`	`{`
`2`	`2`	`"name": "@coinbase/cds-mobile",`
`3`		`- "version": "8.28.0",`
	`3`	`+ "version": "8.28.1",`
`4`	`4`	`"description": "Coinbase Design System - Mobile",`
`5`	`5`	`"repository": {`
`6`	`6`	`"type": "git",`
Original file line number	Diff line number	Diff line change
`@@ -1,6 +1,6 @@`
`1`	`1`	`{`
`2`	`2`	`"name": "@coinbase/cds-web",`
`3`		`- "version": "8.28.0",`
	`3`	`+ "version": "8.28.1",`
`4`	`4`	`"description": "Coinbase Design System - Web",`
`5`	`5`	`"repository": {`
`6`	`6`	`"type": "git",`