MDBModal aria-hidden always true

Topic: MDBModal aria-hidden always true

johndoe pro asked 5 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 5 years ago

thanks for the report, we will change it.

Add comment

finleysg answered 2 years ago

0 0 Best answer

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
});

Add comment

Write

Create snippet

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

johndoe

Pro User

99Support score
13Questions 9Answers

0Snippets likes 0Snippets