Making semantic-ui-react modal accesible

Requirements for using semantic-ui-react modal

Add the dependencies to package.json...if they are not:

"semantic-ui-react":"^0.67.1",
 "focus-trap-react":"^2.0.0",

Import all the semantic-ui-modal components needed, the focus trap and react moduls in the new component:

import React from 'react';
import { Button, Icon, Modal, Container, Segment, Menu,Label,Input,Divider} from 'semantic-ui-react';
import FocusTrap from 'focus-trap-react';

Create the modal class, extending from React.Component as usual:
```
class AccesibleModal extends React.Component{
...
}
```
Prepare the constructor with the initial state, which will control if the modal will be displaying or not, and also, if the focus will be trapped to the modal or not, from the begining. For example, in this example the modal will be opened after pressing a button which is located in the same component.
```
class AccesibleModal extends React.Component{
    constructor(props) {
        super(props);

        this.state = {
            openModal: false,           
            activeTrap: false
        };

    }
}
```

Create the methods to open and close the modal. Also, the method needed to unmount the trap focus component.

The method which opens the modal should change the state of the modal component and also set the aria-hidden label of the application to true. In fact, the element #app is the div element which contains all the SlideWiki page. It is defined in the 'components/DefaultHTMLLayout.js' component, at line 26:

DeafultHTMLLayout.js

...
<body>
	<div id="app" aria-hidden = "false" dangerouslySetInnerHTML={{__html: this.props.markup}}></div>
....

Thus, the following method will be enough to open the modal:

handleOpen(){
        $('#app').attr('aria-hidden','true');
        this.setState({
            modalOpen:true,
            activeTrap:true
        });
}

We can bind it at the constructor also:

 constructor(props) {
        super(props);

        this.state = {
            openModal: false,
            activeTrap: false
        };
        this.handleOpen = this.handleOpen.bind(this);
        
  }

The method which close the modal should change the state of the modal component and also set the aria-hidden label of the application to false.

 handleClose(){

        $('#app').attr('aria-hidden','false');

        this.setState({
            modalOpen:false,
            activeTrap: false
        });
 }

The method which unmounts the focus trap compoenent should also change the state of the component. If we don't use it, if the user exits pressing outside the modal, the state of the component could be inconsistent.
```
unmountTrap(){
        if(this.state.activeTrap){
            this.setState({ activeTrap: false });
            $('#app').attr('aria-hidden','false');
        }
}
```

Final constructor method:

constructor(props) {
        super(props);

        this.state = {
            openModal: false,
            activeItem: 'MyDecks',
            activeTrap: false
        };

        this.handleOpen = this.handleOpen.bind(this);
        this.handleClose = this.handleClose.bind(this);
        this.unmountTrap = this.unmountTrap.bind(this);
   }

Add the modal to the render method, adding all the aria-labels required

<Modal trigger={
                    <Button as="button" 
                      type="button" aria-label="Open Button" data-tooltip="Open Button" aria-hidden="false"
                      basic  open={this.state.openModal} 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"
                aria-hidden = {!this.state.modalOpen}
                tabIndex="0">
<Modal>

1. Trigger: Defines the button which will open the modal.You can see different attributes needed for making it fully accesible:
- - as="button", because if not use it, semantic-ui-react render it as a div, and it is problematic
  - 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.
  - data-tooltip="Open Button", extra information displayed when you pass over the button

hh

kk

class AccesibleModal extends React.Component{ constructor(props) { super(props); this.state = { openModal: false, activeTrap: false }; } }