Page Comparison

Adding

...

a semantic-ui-react modal with a self state

1. Requirements for using semantic-ui-react modal

...

1. • <Modal.Header className="ui center aligned" as="h1" id="exampleModalHeader">: 
     • className="ui center aligned": it 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)
   • <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>  : in order to use the same style than in previous modals
     • <TextArea className="sr-only" id="exampleModalDescription"... />: This text is only viewed by screen readers, and it is added to explain the content of the modal. For this reason it has the id=exampleModalDescription, which was previously used in the aria-describedby attributte of the modal (see line 36 ). If the modal contains an explanation to all users, we can use this explanation as a target of the aria-describedby label. 
   • 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

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

...

1. • • <Modal.Actions>: they should be added nested to the firt segment element. The documentation indicates to add them at the same level than content, but when we use the FocusTrap, the final style of the buttons looks horrible. Thus, it is better using them inside the first segment element, because it  has a better appareance.
       
     • <Button color='red' tabIndex="0" type="button" aria-label="Cancel" data-tooltip="Cancel" onClick={this.handleClose} >: This is the button for closing the modal. It has all the aria attributes required: type, aria-label and data-tooltip. Also, its onClick event is associated to the This.handleClose method previously declared. 

What happens if the modal should be controlled from another component?

It that case the component should be connected to an store, and also, we will need to actions to open and close the modal. 

1. The store should contain, at least,  the initial values for openModal and activeTrap states. Also, handlers to modified them to open and close the modal. A simple example:
2. The actions to open and close the modal, only should dispatch the proper instructions to the store. Examples:
3. At the component, we should connect it to the store and modify a little the way in which we manage the state
   1. Connecting to the store:
   2. Changes at the constructor: