Default Theme

FocusZone

Overview

FocusZones abstract arrow key navigation behaviors. Tabbable elements (buttons, anchors, and elements with data-is-focusable='true' attributes) are considered when pressing directional arrow keys and focus is moved appropriately. Tabbing to a zone sets focus only to the current "active" element, making it simple to use the tab key to transition from one zone to the next, rather than through every focusable element.

Using a FocusZone is simple. Just wrap a bunch of content inside of a FocusZone, and arrows and tabbling will be handled for you! See examples below.

Usage

FocusZone with horizontal movement

<div style="padding: 50px; background-color:yellow;">
    <FocusZone Direction="FocusZoneDirection.Horizontal">
        <DefaultButton Text="First Button" OnClick=@OnInnerClick />
        <DefaultButton Text="Second Button" OnClick=@OnInnerClick />
        <DefaultButton Text="Third Button" OnClick=@OnInnerClick />
    </FocusZone>
</div>
<DefaultButton Text="Outside Button" OnClick=@OnOuterClick />

FocusZone with vertical & circular movement

<div data-is-scrollable="true">
    <FocusZone Direction="FocusZoneDirection.Vertical" IsCircularNavigation="true">
        <List ItemsSource=@items>
            <ItemTemplate>
<div style="display:flex;flex-direction:row;width:100%;" data-is-focusable="true">
    <Image Src="redArrow.jpg" Height="50" Width="50" />
    <Label>This is an item #@context</Label>
</div>
            </ItemTemplate>
        </List>
    </FocusZone>
</div>

FocusZone with bidirectional movement

<FocusZone Direction="FocusZoneDirection.Bidirectional"
           Style="display:inline-block;border:1px solid var(--palette-NeutralTertiary);padding:10px;line-height:0;overflow:hidden;">
    @for (var i = 0; i < photos.Count; i++)
    {
        <li @key=@i
            data-is-focusable="true"
            class="photoCell">
            <Image Src=@photos[i].Url
   Width=@photos[i].Width
   Height=@photos[i].Height />
        </li>
    }
</FocusZone>