Skip to content

Latest commit

 

History

History
53 lines (46 loc) · 2.56 KB

readme.md

File metadata and controls

53 lines (46 loc) · 2.56 KB
Raw

Layer

Creates a new layer of <Pane>s or other UI components for your module. Renders its content via a React Portal.

Usage

import { Layer, Paneset } from '@folio/stripes/components';

// boolean to control the rendering of the layer...
let showLayer = true;

<Paneset>
  // Base Paneset contents ...
  <Layer isOpen={showLayer} contentLabel="demonstration layer">
      <Paneset isRoot>
          //...Layered Paneset contents...
      </Paneset>
  </Layer>
</Paneset>

Props

Name type description default required
autoFocus bool If no layer content is focused via other focus-management methods, the <Layer>'s container will be focused. true
isOpen bool Control rendering of the layer's child components within a div with role "dialog" (A full-module modal). required
container node DOM element or component where the rendered elements should reside. Appends content to the root of the ascendant Paneset by default.
contentLabel string applied as the aria-label attribute on the <Layer>'s containing div. Warns if not applied.
afterClose func Callback for after the <Layer> has closed. Handle focus management for accessible code here! ()=>{}
afterOpen func Callback for after the <Layer> has opened. ()=>{}
enforceFocus bool Whether or not the modal should trap focus within itself (best for accessibility) true
inRootSet bool if no container prop is provided, <Layer> will render into the root of its parent paneset. InRootSet pushes further by rendering the layer to the top-most paneset in the tree. Consider using this if your <Layer> is used within a nested paneset. Modules' settings have this structure.

A11y practices

The <Layer> is very similar to a modal dialog and focus management should be accounted for accordingly. When opened, focus will move to the rendered content div (unless a child element has already assumed focus via autoFocus or some other means.) Focus should be managed appropriately by the application when the <Layer> is closed. The afterClose prop can be used for this.

// send focus back to trigger when layer closes.
focusAfter() {
    this.layerToggle.current.focus();
}

<Paneset>
  // Base Paneset contents ...
  <Button buttonRef={this.layerToggle} onClick={this.toggleLayer}>Toggle Layer</Button>
  <Layer
    isOpen={showLayer}
    afterClose={this.focusAfter}
    contentLabel="demonstration layer"
  >
    {/* Layer contents */}
  </Layer>
</Paneset>