MDBModal aria-hidden always true

Topic: MDBModal aria-hidden always true

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

thanks for the report, we will change it.

Add comment

finleysg free answered 1 year ago

0 0 Best answer

Please insert min. 20 characters.

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

ForumUser: 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