@sakura-ui/sakura-ui 0.4.2 → 0.5.0

package/packages/core/tests/Card.test.tsx

@@ -2,46 +2,150 @@ import React from 'react'
 import { describe, expect, it } from 'vitest'
 import { render, screen } from '@testing-library/react'
 
-import { Card, CardBody, CardHeader } from '../src'
+import { Card, CardBody, CardFooter, CardHeader } from '../src'
 
 describe('Card', () => {
-  it('should labeled text from Card', async () => {
+  it('should render its header and body', async () => {
     render(
       <Card>
-        <CardHeader>Card-Header</CardHeader>
+        <CardHeader as="h3">Card-Header</CardHeader>
         <CardBody>Card-Body</CardBody>
       </Card>
     )
 
-    const text1 = screen.getByText(/Card-Header/)
-    expect(text1).toBeInTheDocument()
+    expect(screen.getByText('Card-Header')).toBeInTheDocument()
+    expect(screen.getByText('Card-Body')).toBeInTheDocument()
+  })
+
+  it('should render the header as the element given by the as property', async () => {
+    render(
+      <Card>
+        <CardHeader as="h4">Card-Header</CardHeader>
+      </Card>
+    )
 
-    const text2 = screen.getByText(/Card-Body/)
-    expect(text2).toBeInTheDocument()
+    // Querying by role rather than by tag name: the point of the change is that
+    // the title is reachable by heading navigation, not that it is an <h4>.
+    expect(
+      screen.getByRole('heading', { level: 4, name: 'Card-Header' })
+    ).toBeInTheDocument()
   })
-  it('should set the role and id correctly', async () => {
+
+  it('should render the header as a paragraph when asked to', async () => {
     render(
       <Card>
-        <CardHeader data-testid="header">Card-Header</CardHeader>
+        <CardHeader as="p">Card-Header</CardHeader>
+      </Card>
+    )
+
+    // Lists of many cards use 'p' so that the headings do not pollute the outline.
+    expect(screen.queryByRole('heading')).toBeNull()
+    expect(screen.getByText('Card-Header')).toBeInTheDocument()
+  })
+
+  it('should render the root as the element given by the as property', async () => {
+    render(
+      <Card as="article">
+        <CardHeader as="h3">Card-Header</CardHeader>
+      </Card>
+    )
+
+    expect(screen.getByRole('article')).toBeInTheDocument()
+  })
+
+  it('should not generate any id or aria reference of its own', async () => {
+    const { container } = render(
+      <Card as="article">
+        <CardHeader as="h3" data-testid="header">
+          Card-Header
+        </CardHeader>
         <CardBody data-testid="body">Card-Body</CardBody>
       </Card>
     )
 
     const card = screen.getByRole('article')
-    expect(card).toBeInTheDocument()
+    // A generated id can only ever dangle or collide, so the library emits none.
+    // Callers that want the card named do it themselves, see the test below.
+    expect(card).not.toHaveAttribute('aria-labelledby')
+    expect(card).not.toHaveAttribute('aria-describedby')
+    expect(screen.getByTestId('header')).not.toHaveAttribute('id')
+    expect(screen.getByTestId('body')).not.toHaveAttribute('id')
+    expect(container.querySelector('[id=""]')).toBeNull()
+  })
+
+  it('should not repeat an id when more than one body is rendered', async () => {
+    render(
+      <Card>
+        <CardBody data-testid="body1">Body-1</CardBody>
+        <CardBody data-testid="body2">Body-2</CardBody>
+      </Card>
+    )
+
+    expect(screen.getByTestId('body1')).not.toHaveAttribute('id')
+    expect(screen.getByTestId('body2')).not.toHaveAttribute('id')
+  })
+
+  it('should let the caller name the card explicitly', async () => {
+    render(
+      <Card as="article" aria-labelledby="card-title" aria-describedby="card-desc">
+        <CardHeader as="h3" id="card-title">
+          Card-Header
+        </CardHeader>
+        <CardBody id="card-desc">Card-Body</CardBody>
+      </Card>
+    )
+
+    const card = screen.getByRole('article')
+    expect(card).toHaveAccessibleName('Card-Header')
+    expect(card).toHaveAccessibleDescription('Card-Body')
+  })
 
-    const header = screen.getByTestId('header')
-    expect(header).toBeInTheDocument()
-    expect(header).toHaveAttribute('id')
+  it('should render a card without a header', async () => {
+    render(
+      <Card as="article">
+        <CardBody>Card-Body</CardBody>
+      </Card>
+    )
+
+    // Used to leave aria-labelledby pointing at an element that was never rendered.
+    const card = screen.getByRole('article')
+    expect(card).not.toHaveAttribute('aria-labelledby')
+    expect(card).toHaveAccessibleName('')
+  })
 
-    const headerText = screen.getByLabelText('Card-Header')
-    expect(headerText).toBeInTheDocument()
+  it('should say which property is missing when as is left out', async () => {
+    // React would otherwise report an invalid element type and suggest a missing
+    // export, which points nowhere near the actual mistake.
+    const Header = CardHeader as unknown as React.ComponentType<{
+      children: React.ReactNode
+    }>
 
-    const body = screen.getByTestId('body')
-    expect(body).toBeInTheDocument()
-    expect(body).toHaveAttribute('id')
+    expect(() =>
+      render(
+        <Card>
+          <Header>Card-Header</Header>
+        </Card>
+      )
+    ).toThrow(/CardHeader: the "as" property is required/)
+  })
+
+  it('should pass unknown properties through to the elements', async () => {
+    render(
+      <Card>
+        <CardHeader as="h3" data-testid="header" data-kind="title">
+          Card-Header
+        </CardHeader>
+        <CardBody data-testid="body" data-kind="desc">
+          Card-Body
+        </CardBody>
+        <CardFooter data-testid="footer" data-kind="meta">
+          Card-Footer
+        </CardFooter>
+      </Card>
+    )
 
-    const bodyText = screen.getByRole('article', { description: 'Card-Body' })
-    expect(bodyText).toBeInTheDocument()
+    expect(screen.getByTestId('header')).toHaveAttribute('data-kind', 'title')
+    expect(screen.getByTestId('body')).toHaveAttribute('data-kind', 'desc')
+    expect(screen.getByTestId('footer')).toHaveAttribute('data-kind', 'meta')
   })
 })

package/packages/core/tests/Faq.test.tsx

@@ -0,0 +1,75 @@
+import React from 'react'
+import { describe, expect, it } from 'vitest'
+import { render, screen } from '@testing-library/react'
+
+import { Answer, Faq, Question } from '../src'
+
+describe('Faq', () => {
+  it('should render the questions and the answers', async () => {
+    render(
+      <Faq>
+        <Question>Question-1</Question>
+        <Answer>Answer-1</Answer>
+        <Question>Question-2</Question>
+        <Answer>Answer-2</Answer>
+      </Faq>
+    )
+
+    expect(screen.getByText('Question-1')).toBeInTheDocument()
+    expect(screen.getByText('Answer-1')).toBeInTheDocument()
+    expect(screen.getByText('Question-2')).toBeInTheDocument()
+    expect(screen.getByText('Answer-2')).toBeInTheDocument()
+  })
+
+  it('should keep the Q and A markers out of the accessibility tree', async () => {
+    render(
+      <Faq>
+        <Question data-testid="question">Question-1</Question>
+        <Answer>Answer-1</Answer>
+      </Faq>
+    )
+
+    // The letters are there for the eye only; a reader gets the question text.
+    const marker = screen.getByTestId('question').firstElementChild
+    expect(marker).toHaveTextContent('Q')
+    expect(marker).toHaveAttribute('aria-hidden', 'true')
+  })
+
+  it('should render a plain definition list', async () => {
+    const { container } = render(
+      <Faq>
+        <Question>Question-1</Question>
+        <Answer>Answer-1</Answer>
+        <Question>Question-2</Question>
+        <Answer>Answer-2</Answer>
+      </Faq>
+    )
+
+    // The schema.org markup described the whole list as one Question carrying a
+    // name and an answer per pair, and it wrapped everything in an article that
+    // nothing could name. Both are gone.
+    expect(container.querySelector('[itemscope]')).toBeNull()
+    expect(container.querySelector('[itemprop]')).toBeNull()
+    expect(container.querySelector('article')).toBeNull()
+    expect(container.querySelector('dl')).toBeInTheDocument()
+    expect(container.querySelectorAll('dt')).toHaveLength(2)
+    expect(container.querySelectorAll('dd')).toHaveLength(2)
+  })
+
+  it('should pass unknown properties through to the elements', async () => {
+    render(
+      <Faq data-testid="faq" data-kind="list">
+        <Question data-testid="question" data-kind="q">
+          Question-1
+        </Question>
+        <Answer data-testid="answer" data-kind="a">
+          Answer-1
+        </Answer>
+      </Faq>
+    )
+
+    expect(screen.getByTestId('faq')).toHaveAttribute('data-kind', 'list')
+    expect(screen.getByTestId('question')).toHaveAttribute('data-kind', 'q')
+    expect(screen.getByTestId('answer')).toHaveAttribute('data-kind', 'a')
+  })
+})

package/packages/core/tests/LinkCard.test.tsx

@@ -0,0 +1,151 @@
+import React from 'react'
+import { describe, expect, it, vi } from 'vitest'
+import { render, screen } from '@testing-library/react'
+
+import { CardBody, LinkCard, LinkCardFooter, LinkCardHeader } from '../src'
+
+describe('LinkCard', () => {
+  it('should render the title as a link', async () => {
+    render(
+      <LinkCard>
+        <LinkCardHeader as="h3" href="/readme">
+          Link-Card-Header
+        </LinkCardHeader>
+        <CardBody>Link-Card-Body</CardBody>
+      </LinkCard>
+    )
+
+    const link = screen.getByRole('link')
+    expect(link).toHaveAttribute('href', '/readme')
+  })
+
+  it('should take the accessible name of the link from the title alone', async () => {
+    render(
+      <LinkCard>
+        <LinkCardHeader as="h3" href="/readme">
+          Link-Card-Header
+        </LinkCardHeader>
+        <CardBody>Link-Card-Body</CardBody>
+        <LinkCardFooter>June 27th, 2026</LinkCardFooter>
+      </LinkCard>
+    )
+
+    // Asserting the accessible name rather than the link text: when the anchor
+    // wrapped the whole card, the body and the footer were read out as part of
+    // the link name before it was announced as a link.
+    const link = screen.getByRole('link')
+    expect(link).toHaveAccessibleName('Link-Card-Header')
+    expect(link).not.toHaveAccessibleName(/Link-Card-Body/)
+  })
+
+  it('should keep the title reachable by heading navigation', async () => {
+    render(
+      <LinkCard>
+        <LinkCardHeader as="h3" href="/readme">
+          Link-Card-Header
+        </LinkCardHeader>
+      </LinkCard>
+    )
+
+    expect(
+      screen.getByRole('heading', { level: 3, name: 'Link-Card-Header' })
+    ).toBeInTheDocument()
+  })
+
+  it('should tell that the link opens in a new tab', async () => {
+    render(
+      <LinkCard>
+        <LinkCardHeader as="h3" href="https://example.com" target="_blank">
+          Link-Card-Header
+        </LinkCardHeader>
+      </LinkCard>
+    )
+
+    // The icon itself is aria-hidden, so without the alternative text the fact
+    // that the link opens elsewhere reached sighted users only.
+    expect(screen.getByRole('link')).toHaveAccessibleName(
+      /新しいタブで開きます/
+    )
+  })
+
+  it('should not tell about a new tab for a link that stays in the tab', async () => {
+    render(
+      <LinkCard>
+        <LinkCardHeader as="h3" href="/readme">
+          Link-Card-Header
+        </LinkCardHeader>
+      </LinkCard>
+    )
+
+    expect(screen.getByRole('link')).toHaveAccessibleName('Link-Card-Header')
+  })
+
+  it('should render the link with the component given by linkAs', async () => {
+    const NextLinkLike = ({
+      to,
+      children,
+      ...rest
+    }: { to: string; children: React.ReactNode }) => (
+      <a href={to} {...rest}>
+        {children}
+      </a>
+    )
+
+    render(
+      <LinkCard>
+        <LinkCardHeader as="h3" linkAs={NextLinkLike} to="/readme">
+          Link-Card-Header
+        </LinkCardHeader>
+      </LinkCard>
+    )
+
+    expect(screen.getByRole('link')).toHaveAttribute('href', '/readme')
+  })
+
+  it('should pass unknown properties through to the link and the footer', async () => {
+    render(
+      <LinkCard data-testid="card">
+        <LinkCardHeader as="h3" href="/readme" data-kind="title">
+          Link-Card-Header
+        </LinkCardHeader>
+        <LinkCardFooter data-testid="footer" data-kind="meta">
+          June 27th, 2026
+        </LinkCardFooter>
+      </LinkCard>
+    )
+
+    // These used to be dropped: both components declared that they accept the
+    // properties of a div but never spread them onto an element.
+    expect(screen.getByRole('link')).toHaveAttribute('data-kind', 'title')
+    expect(screen.getByTestId('footer')).toHaveAttribute('data-kind', 'meta')
+    expect(screen.getByTestId('card')).toBeInTheDocument()
+  })
+
+  it('should say which property is missing when as is left out', async () => {
+    const Header = LinkCardHeader as unknown as React.ComponentType<{
+      href: string
+      children: React.ReactNode
+    }>
+
+    expect(() =>
+      render(
+        <LinkCard>
+          <Header href="/readme">Link-Card-Header</Header>
+        </LinkCard>
+      )
+    ).toThrow(/LinkCardHeader: the "as" property is required/)
+  })
+
+  it('should pass an object to the ref property', async () => {
+    const ref = vi.fn()
+    render(
+      <LinkCard ref={ref}>
+        <LinkCardHeader as="h3" href="/readme">
+          Link-Card-Header
+        </LinkCardHeader>
+      </LinkCard>
+    )
+
+    expect(ref).toHaveBeenCalledTimes(1)
+  })
+})

package/packages/forms/.turbo/turbo-build.log

@@ -9,4 +9,4 @@ rendering chunks...
 computing gzip size...
 dist/index.es.js  24.36 kB │ gzip: 6.13 kB
 dist/index.cjs.js  16.94 kB │ gzip: 5.27 kB
-✓ built in 582ms
+✓ built in 375ms

package/packages/helper/.turbo/turbo-build.log

@@ -9,4 +9,4 @@ rendering chunks...
 computing gzip size...
 dist/index.es.js  2.90 kB │ gzip: 1.00 kB
 dist/index.cjs.js  2.72 kB │ gzip: 0.99 kB
-✓ built in 247ms
+✓ built in 168ms

package/packages/markdown/.turbo/turbo-build.log

@@ -1,12 +1,12 @@
 $ rimraf dist
 $ run-p build:*
 $ vite build
-vite v7.3.6 building client environment for production...
 $ tsc && tsc-alias
+vite v7.3.6 building client environment for production...
 transforming...
 ✓ 365 modules transformed.
 rendering chunks...
 computing gzip size...
-dist/index.es.js  554.27 kB │ gzip: 141.23 kB
-dist/index.cjs.js  377.84 kB │ gzip: 117.18 kB
-✓ built in 4.31s
+dist/index.es.js  554.82 kB │ gzip: 141.39 kB
+dist/index.cjs.js  378.23 kB │ gzip: 117.29 kB
+✓ built in 2.18s