FocusTrapZone is used to trap the focus in any html element. Pressing tab will circle focus within the inner focusable elements of the FocusTrapZone.
Note: Trapping focus will restrict interaction with other elements in the website such as the side nav. Turn off the "Use trap zone" toggle control to allow this interaction to happen again.
>
<Checkbox @bind-Checked=@isFocusTrapped @bind-Checked:event="CheckedChanged" Label="Enable FocusTrapZone" />
<div style="padding: 50px; background-color:yellow;">
<FocusTrapZone Disabled=@(!isFocusTrapped) FirstFocusableSelector="ftselected">
<DefaultButton Text="First Button" OnClick=@OnInnerClick />
<DefaultButton Text="Second Button" OnClick=@OnInnerClick />
<DefaultButton ClassName="ftselected" Text="Third Button" OnClick=@OnInnerClick />
</FocusTrapZone>
</div>
<DefaultButton Text="Outside Button" OnClick=@OnOuterClick />