MockupTabletPortrait

Props

• label: string (required) -- accessible label describing the mockup content
• children: slot (required) -- the content displayed inside the tablet screen
• ...restProps: Any additional HTML attributes

Keyboard Interactions

• None -- mockups are decorative, not interactive

ARIA

• role="img" -- presents the mockup as a single image to assistive technologies
• aria-label -- describes the mockup content for screen readers

When to Use

• Use to showcase tablet-optimized designs in portrait orientation.
• Use in documentation or marketing pages to frame tablet content.
• Use for reading apps, vertical scrolling interfaces, or forms designed for portrait tablets.
• Use in e-commerce or content apps where portrait mode is the primary orientation.

When Not to Use

• Do not use for landscape-oriented tablet content -- use MockupTabletLandscape instead.
• Do not use for phone-sized content -- use MockupPhonePortrait instead.
• Do not use for desktop or browser content -- use MockupLaptop or MockupBrowser instead.

Headless

This component provides a <div> with role="img" and aria-label for accessible decorative presentation, with zero visual styling. The consumer is responsible for all CSS including tablet frame appearance, bezel, screen area, and portrait aspect ratio.

Styles

The consumer provides all CSS styling. The component renders with a .mockup-tablet-portrait class for targeting. No default styles are included -- this is a fully headless component.

Testing

• Verify the component renders a <div> element with class mockup-tablet-portrait
• Verify role="img" is present
• Verify aria-label is applied
• Verify child content is rendered
• Verify pass-through attributes are applied

Advice

• Designers: Use a portrait aspect ratio (e.g., 3:4 or 10:16) that matches common tablet displays. Include visible bezel for device recognition.
• Developers: Always provide a descriptive label prop so screen readers can convey the mockup's purpose.

Implementation Notes

• Uses <div> element with role="img" for decorative presentation
• aria-label describes the mockup content for screen readers
• Contains a slot for the tablet screen content area
• Consumer styles the tablet chrome (bezel, home button, screen area)

Related components

• mockup-browser — a box area that looks like a web browser
• mockup-laptop — a box area that looks like a laptop computer
• mockup-phone-landscape — a box area that looks like a mobile phone in landscape orientation
• mockup-phone-portrait — a box area that looks like a mobile phone
• mockup-shell — a box area that looks like a terminal shell
• mockup-tablet-landscape — a box area that looks like a tablet computer in landscape mode

References

• MDN div element