Is your feature request related to a problem? Please describe...

When a modal is opened it uses html that are aria landmark equivalents.

<header [role=banner]></header>
....
<footer [role=contentinfo]></footer>

Evidently, it is not appropriate to have more than 1 each of header(banner), main(main), or footer(contentinfo) per html page. I already have header, main, and footer defined on my web page as I would expect many aria compliant websites would. "Axe" accessibility tool is not happy with this. The following web page better describes the issue.

https://dequeuniversity.com/rules/axe/4.1/landmark-no-duplicate-contentinfo?application=AxeChrome

Describe the solution you'd like

Open to ideas really...One idea I have considered is changing the elements to regular divs with some aria roles added?

<div role="region" aria-label="Modal Header">
<div role="region" arial-label="Modal Footer">

https://webaim.org/techniques/aria/#landmarks (there is a section in here that talks about custom regions)

Describe alternatives you've considered

modal-header and modal-footer slots are wrapped with the header and footer elements, plus it would stink to have to define those for all my modals.

Tried this too. But "Axe" still not happy as assistive technologies could be confused what to do since not really sure what takes precedence the html5 element(header) or the role.

this.$root.$on('bv::modal::shown', (bvEvent, modalId) => {
      if(bvEvent && bvEvent.target){
        bvEvent.target.getElementsByClassName("modal-header").forEach((el) => {
          el.setAttribute('aria-label', 'modal header')
          el.setAttribute('role', 'region')
        });
        bvEvent.target.getElementsByClassName("modal-footer").forEach((el) => {
          el.setAttribute('aria-label', 'modal footer')
          el.setAttribute('role', 'navigation')
        });
      }
    });

Additional context