support focus trapping when bs-dropdown is rendered in wormhole

[seemajune]

Thank you for building this component and for your hard work on making these components accessible.

I've noticed something regarding focus trapping of <BsDropdown> when the menu has renderInPlace={{false}}, focus trapping is not applied to the menu. I've added it manually but it would be great to have this fixed.

In case I am missing something, here is my component markup without the fix:

"ember-bootstrap": "^3.1.0"

<BsDropdown @class="hidden-print" @onHide={{action (mut open) false}} @onShow={{action (mut open) true}} as |dd|>
  <dd.button @class="btn-no-border"
    @title={{if open (t "explore.interactionsDropdown.collapse") (t "explore.interactionsDropdown.expand")}}
    onclick={{action "onDropdownToggle" dd.toggleDropdown}}>
  </dd.button>
  <dd.menu @class="{{styleNamespace}}-explore-card-popover-menu" @align="right" @renderInPlace={{false}} as |ddm|>
      <ddm.item>
        <button class="{{styleNamespace}}-btn-flex btn-link" onclick={{@doSomething}}>
          <div class="{{styleNamespace}}-svg-wrapper">
            <BuIcon @fileName="icon-nav" @className="{{styleNamespace}}-icon-ellipsis" />
          </div>
          some text
        </button>
      </ddm.item>
  </dd.menu>

</BsDropdown>

I fixed it by using ember-focus-trapper and wrapping <FocusTrapper> around the <ddm.item> element.

Thanks again

[jelhan]

Hello @seemajune,

thanks for raising this issue.

To be honest I'm not quite sure if I got you right. Are you expecting the focus to be captured inside the dropdown if it's open? What should happen if the focus is on the last item of the dropdown menu and the user clicks the tab key? Currently the next focusable element outside of the dropdown gets the focus and the dropdown is closed. Are you expecting the first element of the dropdown to be focused? If so: is this supported by plain Bootstrap?

Best Jeldrik

[seemajune]

Hello @seemajune,

thanks for raising this issue.

To be honest I'm not quite sure if I got you right. Are you expecting the focus to be captured inside the dropdown if it's open? What should happen if the focus is on the last item of the dropdown menu and the user clicks the tab key? Currently the next focusable element outside of the dropdown gets the focus and the dropdown is closed. Are you expecting the first element of the dropdown to be focused? If so: is this supported by plain Bootstrap?

Best Jeldrik

If the dropdown is open, the focus should be on the first interactive element (button) inside of the dropdown. The user should be able to tab through the list of interactive elements there-within, press escape to close the dropdown, therefore moving focus back to the element that triggers opening the dropdown. The element within the dropdown never receives keyboard focus at all when in a wormhole.

I hope this helps to note that the <BsModal> component works as expected when rendered in a wormhole (focus is trapped inside of the modal until it is closed or escape key is pressed).

[seemajune]

Hello @seemajune,
thanks for raising this issue.
To be honest I'm not quite sure if I got you right. Are you expecting the focus to be captured inside the dropdown if it's open? What should happen if the focus is on the last item of the dropdown menu and the user clicks the tab key? Currently the next focusable element outside of the dropdown gets the focus and the dropdown is closed. Are you expecting the first element of the dropdown to be focused? If so: is this supported by plain Bootstrap?
Best Jeldrik

If the dropdown is open, the focus should be on the first interactive element (button) inside of the dropdown. The user should be able to tab through the list of interactive elements there-within, press escape to close the dropdown, therefore moving focus back to the element that triggers opening the dropdown. The element within the dropdown never receives keyboard focus at all when in a wormhole.

I hope this helps to note that the <BsModal> component works as expected when rendered in a wormhole (focus is trapped inside of the modal until it is closed or escape key is pressed).

one more thing to note- with the BsModal, I notice that the element inside the wormhole (the modal) receives tabindex="-1" when it opens/gets added to the DOM. this is not the case with BsDropdown

[simonihmig]

Thank you for building this component and for your hard work on making these components accessible.

Thanks! ☺️ And thanks for raising this up, I was able to reproduce this.