Add attr to modal dialog if it is a top modal

Is your feature request related to a problem? Please describe

In previous version 1.x the dialog what was not on the top has an attribute aria-hidden="true" and we use it to add opacity:0 to the not top dialog. But in the new version, we are unable to determinate which modal is on the top.

In our app we have chaining modals, eg. you do a step in the first modal and you need to load some data from API, so new modal is open with “loading…”, the first one has aria-hidden="true", so by CSS property opacity we hide it. But now we have to do quit a huge refactor to keep visible only the last one modal, so we prefer to get it know from the dialog attribute.

Describe the solution you’d like

The dialog element will have eg. data-top="true/false" attribute. Or return back aria-hidden attribute as it was in version 1.x when was used react-overlays library https://github.com/react-bootstrap/react-overlays/blob/v5.2.1/src/ModalManager.ts#L107

Thank you.

Describe alternatives you’ve considered

No response

Additional context

No response

[kyletsang]

Hey @martinadamec, there is no way to override it globally, so the way you’re doing it is correct.

[martinadamec]

for others who miss old aria-hidden attribute, you can do it like this

export class CustomModalManager extends BootstrapModalManager {
	
	resetModalsAttributes() {
		this.modals.forEach(modal => {
			if ( this.isTopModal(modal) ) {
				modal.dialog.removeAttribute('aria-hidden');
				modal.backdrop.removeAttribute('aria-hidden');
			}
			else {
				modal.dialog.setAttribute('aria-hidden', 'true');
				modal.backdrop.setAttribute('aria-hidden', 'true');
			}
		});
	}
	
	setModalAttributes(modal: ModalInstance) {
		super.setModalAttributes(modal);
		this.resetModalsAttributes();
	}

	removeModalAttributes(modal: ModalInstance) {
		super.removeModalAttributes(modal);
		this.resetModalsAttributes();
	}
}

const manager = new CustomModalManager({ ownerDocument: window.document });
export const CustomModal = (props: ModalProps) => {
	return <Modal manager={manager} {...props} />;
};