Topic: MDBModal aria-hidden always true

johndoe pro asked 2 years ago


Expected behavior aria-hidden should change to false when modal is open. Noticed it happened on 4.26.0 so updated to 4.26.1 as well.

Actual behavior aria-hidden is always true

Resources (screenshots, code snippets etc.) Tried with and without react portal. Tested with example code as well just to make sure it wasn't something with my modal code.

<MDBModal isOpen={isOpen} toggle={() => toggleModal('myModal')} size="lg" backdrop={backdrop} centered>
<MDBModalHeader toggle={() => toggleModal('myModal')} >My Modal</MDBModalHeader>
<MDBModalBody>
    <MDBRow>
        <MDBCol size={"12"}>
            <p>Hello world</p>
        </MDBCol>
    </MDBRow>
</MDBModalBody>
<MDBModalFooter>
    <MDBBtn color="cancel" onClick={() => toggleModal('myModal')}>Cancel</MDBBtn>
</MDBModalFooter>


Piotr Glejzer staff commented 2 years ago

thanks for the report, we will change it.


finleysg free answered 1 month ago


We are using 4.27 and still see this bug: https://github.com/mdbootstrap/mdb4-react-ui-kit/blob/main/src/components/Modal/Modal.js

It doesn't appear that the aria attribute below is managed. Is there a fix or workaround for those of us still on bootstrap 4?

const modalAttributes = returnAttributes({
  style: {
    display: 'block',
    position: removeBackdropConditions && 'fixed',
    width: removeBackdropConditions && 0
  },
  id,
  tabIndex,
  role,
  'aria-hidden': 'true',
  ...attributes
});


Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue

  • User: Pro
  • Premium support: No
  • Technology: MDB React
  • MDB Version: 4.26.1
  • Device: Desktop
  • Browser: Chrome / Firefox
  • OS: Windows 10
  • Provided sample code: No
  • Provided link: No