aria-hidden not removed if another instance with ariaHideApp=false is open

[kloots]

Summary:

If you have two modals, one with ariaHideApp set to false, the other with ariaHideApp set to true and you then close the modal with ariaHideApp set to true the aria-hidden attribute will remain set to true on the app element when it should be false.

Steps to reproduce:

1. Create two instances of <Modal> one with ariaHideApp set to false, the other with ariaHideApp set to true
2. Close the <Modal> instance with ariaHideApp set to true
3. Observe the aria-hidden attribute is still applied to the app element

Expected behavior:

The aria-hidden attribute should be removed from the app element when there are no longer any visible instances with ariaHideApp set to true.

Link to example of issue:

Some unit tests I wrote to verify the problem in master

it("removes aria-hidden when closed and another modal with ariaHideApp set to false is open", () => {
  const rootNode = document.createElement("div");
  document.body.appendChild(rootNode);

  const appElement = document.createElement("div");
  document.body.appendChild(appElement);

  Modal.setAppElement(appElement);

  const initialState = (
    <div>
      <Modal isOpen={true} ariaHideApp={false} id="test-1-modal-1" />
      <Modal isOpen={true} ariaHideApp={true} id="test-1-modal-2" />
    </div>
  );

  ReactDOM.render(initialState, rootNode);
  appElement.getAttribute("aria-hidden").should.be.eql("true");

  const updatedState = (
    <div>
      <Modal isOpen={true} ariaHideApp={false} id="test-1-modal-1" />
      <Modal isOpen={false} ariaHideApp={true} id="test-1-modal-2" />
    </div>
  );

  ReactDOM.render(updatedState, rootNode);
  should(appElement.getAttribute("aria-hidden")).not.be.ok();

  ReactDOM.unmountComponentAtNode(rootNode);
});

it("maintains aria-hidden when closed and another modal with ariaHideApp set to true is open", () => {
  const rootNode = document.createElement("div");
  document.body.appendChild(rootNode);

  const appElement = document.createElement("div");
  document.body.appendChild(appElement);

  Modal.setAppElement(appElement);

  const initialState = (
    <div>
      <Modal isOpen={true} ariaHideApp={true} id="test-1-modal-1" />
      <Modal isOpen={true} ariaHideApp={true} id="test-1-modal-2" />
    </div>
  );

  ReactDOM.render(initialState, rootNode);
  appElement.getAttribute("aria-hidden").should.be.eql("true");

  const updatedState = (
    <div>
      <Modal isOpen={true} ariaHideApp={true} id="test-1-modal-1" />
      <Modal isOpen={false} ariaHideApp={true} id="test-1-modal-2" />
    </div>
  );

  ReactDOM.render(updatedState, rootNode);
  appElement.getAttribute("aria-hidden").should.be.eql("true");

  ReactDOM.unmountComponentAtNode(rootNode);
});

it("removes aria-hidden when unmounted without close and second modal with ariaHideApp=false is open", () => {
  const appElement = document.createElement("div");
  document.body.appendChild(appElement);
  Modal.setAppElement(appElement);

  renderModal({ isOpen: true, ariaHideApp: false, id: "test-2-modal-1" });
  should(appElement.getAttribute("aria-hidden")).not.be.ok();

  renderModal({ isOpen: true, ariaHideApp: true, id: "test-2-modal-2" });
  appElement.getAttribute("aria-hidden").should.be.eql("true");

  unmountModal();
  should(appElement.getAttribute("aria-hidden")).not.be.ok();
});

it("maintains aria-hidden when unmounted without close and second modal with ariaHideApp=true is open", () => {
  const appElement = document.createElement("div");
  document.body.appendChild(appElement);
  Modal.setAppElement(appElement);

  renderModal({ isOpen: true, ariaHideApp: true, id: "test-3-modal-1" });
  appElement.getAttribute("aria-hidden").should.be.eql("true");

  renderModal({ isOpen: true, ariaHideApp: true, id: "test-3-modal-2" });
  appElement.getAttribute("aria-hidden").should.be.eql("true");

  unmountModal();
  appElement.getAttribute("aria-hidden").should.be.eql("true");
});

Additional notes: