...
| Code Block | ||||||
|---|---|---|---|---|---|---|
| ||||||
<Modal trigger={
<Button as="button"
type="button" aria-label="Open Button" data-tooltip="Open Button" aria-hidden={this.state.modalOpen}
basic onClick={this.handleOpen} > Open Button
</Button>
}
open={this.state.modalOpen}
onClose={this.handleClose}
size="large"
role="dialog"
id="exampleModal"
aria-labelledby="exampleModalHeader"
aria-describedby="exampleModalDescription"
tabIndex="0">
<FocusTrap
id='focus-trap-exampleModal'
className = "header"
active={this.state.activeTrap}
focusTrapOptions={{
onDeactivate: this.unmountTrap,
clickOutsideDeactivates: true,
initialFocus: '#firstElement',
}}>
{/*elements of the modal here*/}
<Modal.Header className="ui center aligned" as="h1" id="exampleModalHeader">
Accesible Modal
</Modal.Header>
<Modal.Content>
<Container>
<Segment color="blue" textAlign="center" padded>
<Segment attached='bottom' textAlign="left">
<TextArea className="sr-only" id="exampleModalDescription" value="This modal only is a an example of how make a modal fully accesible" />
<Label htmlFor="firstElement" as="label" basic color="blue" pointing="right">Input some text</Label>
<Input type="text" id="firstElement" placeholder="You should input something.." tabIndex="0" />
</Segment>;
</Segment>
<Modal.Actions>
<Button color="green" tabIndex="0" type="button" aria-label="Accept" data-tooltip="Accept">
Accept
</Button>
<Button color='red' tabIndex="0" type="button" aria-label="Cancel" data-tooltip="Cancel" onClick={this.handleClose} >
Cancel
</Button>
</Modal.Actions>
</Segment>
</Container>
</Modal.Content>
</FocusTrap>
</Modal> |
...
- <Modal.Header className="ui center aligned" as="h1" id="exampleModalHeader">:
- className="ui center aligned": is the semantic ui class we used in our previous modals
- as="h1": in order it was finally rendered as h1, which is mandatory
- id=exampleModalHeader: the id used in aria-labelledby attribute in the modal (see line 12)
- active={this.state.activeTrap}, controls if the focus is trap or not<Modal.Content>, all the content of the modal should be defined here. It should have a Container inside, which also has at least two segments:
- <Segment color="blue" textAlign="center" padded> : to use the same style than in previous modals
- aria-label="Open Button", it is required. Should contain the name of the button displayed, or it its explanation in case of a icon button.
- focusTrapOptions.onDeactivate:this.unmountTrap, In this property we add the call to the method which ensures the trap component is unmount, even the user exits the modal pressing outside
- focusTrapOptions.clickOutsidesDeactivates:true, also, it is the default value..
- initialFocus:'#firsElement', the id of the element which will receive the focus. I notice that f you don't indicate it, the modal does not receive the focus well
- <Modal.Header className="ui center aligned" as="h1" id="exampleModalHeader">:
...