Sheet

7.0.22

A sheet allows some of the parent view to remain visible, helping people retain their original context as they interact with the sheet.

Demo

Props

Se fullständing dokumentation(öppnas i ny flik)

Namn	Typ	Beskrivning
content	`ReactNode`	Main content to be displayed in the sheet. This content will be rendered below the `contentAboveFold` section. When the sheet is in "full" detent, this content becomes scrollable.
contentAboveFold	`ReactNode`	Content that determines the minimum height of the sheet when in "compact" detent. This content is always visible and is used to calculate the compact detent height.
customAttribute	`{ attribute: string; value: string \| number }`	Used for tests. Clickable and requested subcomponents will be suffixed with "-[ComponentName]".
detent	`DetentType`	Determines the initial height state (detent) of the sheet when it first renders.
lang	`"sv" \| "en"`	Language used for internal translations.
customAttribute	`{ attribute: string; value: string \| number }`	Used for tests. Clickable and requested subcomponents will be suffixed with "-[ComponentName]".
disableAppBarMargin	`boolean`	Remove default spacing inside the Sheet caused by the AppBar. Useful for Sheet with hero image.
disableFocusHeading	`boolean`	If true, the Sheet will not automatically focus the first heading
height *	`"auto" \| "cover"`	Height "Auto" adjust sheet to fit content with a max height of 800px. "Cover" makes sheet cover screen, regardless of content.
shouldCloseOnBackdropClick	`boolean`	When true, clicking the backdrop (area outside the dialog) will close it.
width *	`"medium" \| "large"`	Sheet width is 664px for "medium" and 1104px for "large".

Installation

npm install @sj-ab/component-library.ui.sheet

Länkar

Tillgänglighet

WAI-ARIA

Sheet-komponenten baseras till stor del på designmönstret "Dialog (Modal)" från WAI-ARIA Authoring practices guide.

Läs mer om "Dialog (modal)" hos WAI-ARIA Authoring Practices Guide

Det innebär att komponenten flyttar och begränsar användarens fokus till enbart det som finns i Sheetet när det öppnas. Användaren ska inte kunna tabba till dolt innehåll i bakgrunden, eller hitta dolt innehåll med skärmläsare.

Sheet-komponenten använder bland annat:

role="dialog" på behållaren för att berätta för hjälpmedel att det är en dialog.
aria-label på behållaren för att ge den ett unikt namn
aria-hidden="true" på allt innehåll i bakgrunden för att dölja det för skärmläsare (sker automatiskt)
Ett inbyggt "fokuslås" som loopar tangentbordsfokus inom Sheetet (sker automatiskt)

Scroll med tangentbord

Användare som navigerar med tangentbord måste kunna skrolla innehållet som visas i en Sheet. Om vi använder ett Sheet med mycket text men utan några interaktiva objekt som till exempel länkar så kan det bli ett problem, eftersom det inte finns något för användaren att fokusera på. Det går då inte att skrolla med piltangenterna.

För att lösa problemet måste vi antingen

Undvika att ha för mycket innehåll i ett Sheet
Se till att det finns minst ett interaktivt element i innehållet som kan fokuseras med tangentbordet

Change log

Statistik

Importer av Sheet

Repos med Sheet

38%

Senaste installerade version av Sheet

7.3.16

Äldsta installerade version av Sheet

4.1.25