Prośba o opinię dewelopera: focusgroup

Jacques Newman

Opublikowano: 5 marca 2026 r.

Atrybut HTML focusgroup to proponowany deklaratywny sposób dodawania nawigacji za pomocą klawiszy strzałek do złożonych widżetów, takich jak paski narzędzi, listy kart, menu, listy wyboru itp., bez pisania kodu JavaScript roving-tabindex. Jeden atrybut zastępuje setki wierszy kodu. Zanim to zrobimy, chcemy poznać Twoją opinię.

Wypróbuj tę funkcję i przekaż nam swoją opinię

Możesz wypróbować focusgroup w Chrome, Edge i innych przeglądarkach opartych na Chromium, włączając ją na jeden z 2 sposobów:

1. Testowanie lokalne: w przeglądarce otwórz stronę about://flags i włącz flagę Experimental Web Platform features (Eksperymentalne funkcje platformy internetowej). Możesz też uruchomić przeglądarkę z wiersza poleceń, używając parametru wiersza poleceń --enable-blink-features=Focusgroup.
2. Testowanie origin: zarejestruj się w programie Origin Trial dla grupy fokusowej, aby przetestować go w swojej witrynie z udziałem prawdziwych użytkowników.

Następnie zapoznaj się z interaktywnymi wersjami demonstracyjnymi, aby zobaczyć każdy wzorzec w działaniu.

Potrzebujemy Twojej opinii. Zgłoś problem dotyczący grupy fokusowej, aby podzielić się z nami swoją opinią.

Jest to działanie obejmujące różne przeglądarki:propozycja pochodzi od firmy Microsoft i została zgłoszona w ramach grupy społeczności OpenUI. Ma ona silne poparcie ze strony Google. Kształt interfejsu API może się zmienić na podstawie Twoich opinii. Przyjrzyjmy się problemowi, który rozwiązuje grupa fokusowa, i sposobowi działania interfejsu API.

Problem: ręczne przenoszenie fokusu za pomocą atrybutu tabindex

Jeśli kiedykolwiek tworzyłeś pasek narzędzi, listę kart, menu lub pole listy, napisałeś już jakąś wersję tego kodu. W przewodniku ARIA Authoring Practices Guide (APG) zaleca się, aby widżety złożone miały jeden punkt zatrzymania i umożliwiały użytkownikom poruszanie się między elementami za pomocą klawiszy strzałek. Ten wzorzec jest znany jako „wędrujący indeks tabulacji”. Wiele platform interfejsu użytkownika implementuje to od nowa:

<div role="toolbar" aria-label="Text formatting" id="toolbar">
  <button type="button" tabindex="0">Bold</button>
  <button type="button" tabindex="-1">Italic</button>
  <button type="button" tabindex="-1">Underline</button>
  <button type="button" tabindex="-1">Strikethrough</button>
</div>

Deweloperzy muszą teraz użyć kodu JavaScript, który nasłuchuje naciśnięcia klawiszy strzałek, aby przenieść fokus, i dostosować atrybut tabindex dla wszystkich elementów. To jest uproszczona wersja. Wdrożenie produkcyjne musi też obsługiwać:

• Tryb pisania i tekst od prawej do lewej: dostosuj kierunek klawiszy strzałek na podstawie kierunku treści.
• Zapamiętywanie ostatniego zaznaczonego elementu: przywracanie zaznaczenia wcześniej aktywnego elementu, gdy użytkownik ponownie przechodzi do niego za pomocą klawisza Tab.
• Wyłączone i ukryte elementy: pomijaj je podczas przeglądania.
• Elementy dynamiczne: aktualizuj indeks ruchomy, gdy dodajesz lub usuwasz elementy.

Większość bibliotek interfejsu, w tym React, Angular CDK i Fluent UI, zawiera własną wersję tej logiki. To dużo powielonej pracy, aby uzyskać coś, co mogłoby być podstawowym elementem platformy.

Rozwiązanie: atrybut focusgroup

W przypadku focusgroup ten sam pasek narzędzi wygląda tak:

<div focusgroup="toolbar" aria-label="Text formatting">
  <button type="button">Bold</button>
  <button type="button">Italic</button>
  <button type="button">Underline</button>
  <button type="button">Strikethrough</button>
</div>

Wypróbuj: Wzorzec paska narzędzi > Podstawowy pasek narzędzi. To wszystko. Brak JavaScriptu do nawigacji za pomocą klawiszy strzałek. Nie wymaga ręcznego zarządzania atrybutem tabindex. Oto co przeglądarka teraz robi za Ciebie:

• Nawigacja za pomocą klawiszy strzałek: przechodzenie między elementami z uwzględnieniem trybu pisania i kierunku.
• Jeden przystanek karty: przeglądarka automatycznie zwija uczestniczące elementy do jednego przystanku karty. Deweloperzy nie muszą ustawiać wartości tabindex="-1" w przypadku nieaktywnych produktów.
• Zapamiętywanie ostatnio zaznaczonego elementu: gdy użytkownik opuści grupę fokusową i do niej wróci, zaznaczenie zostanie przywrócone do elementu, który opuścił.
• Semantyka ARIA: przeglądarka udostępnia odpowiednie role (np.role="toolbar") na podstawie zachowania wybranego podczas używania ogólnych elementów.

Deweloperzy zachowują tylko logikę unikalną dla swoich funkcji, np. przełączanie stanu naciśnięcia, otwieranie menu, zarządzanie wyborem lub dowolne polecenia niestandardowe.

Przegląd interfejsów API

Atrybut focusgroup przyjmuje listę tokenów rozdzielonych spacjami. Pierwszy token to zawsze token zachowania, który deklaruje wzorzec widżetu. Opcjonalne tokeny modyfikatorów: focusgroup="<behavior> [inline|block] [wrap] [nomemory]".

Tokeny zachowań

Token zachowania jest wymagany (chyba że używasz parametru none, aby zrezygnować z udziału w grupie fokusowej elementu nadrzędnego). Deklaruje wzorzec widżetu złożonego, dzięki czemu można wywnioskować odpowiednie role, jeśli nie zostały określone w inny sposób. Tokeny są zgodne ze wzorcami opisanymi w przewodniku Aria Authoring Practices i wymienionymi w tej tabeli:

Pełne informacje o tym, jak działa mapowanie ról, znajdziesz w wyjaśnieniu.

Ograniczenie osi (inline i block)

Jeśli wybrane działanie nie ma domyślnych modyfikatorów, wszystkie 4 klawisze strzałek służą do przenoszenia fokusu. Możesz ograniczyć nawigację do jednej osi logicznej, używając modyfikatora inline lub block:

• inline: Grupa fokusowa reaguje tylko na strzałki w osi wiersza, czyli w większości kontekstów w języku angielskim na strzałki w lewo i w prawo (poziomo, od góry do dołu).
• block: grupa fokusowa reaguje tylko na klawisze strzałek w osi bloku, czyli w większości kontekstów w języku angielskim w górę i w dół (poziomo, od góry do dołu).

Ograniczenie osi jest zgodne z właściwościami logicznymi CSS i automatycznie dostosowuje się do trybu i kierunku pisania.

Nawigacja z zawijaniem

Domyślnie nawigacja za pomocą klawiszy strzałek zatrzymuje się na krawędziach grupy fokusowej. Dodaj modyfikator wrap, aby odtwarzać w pętli od ostatniego elementu do pierwszego (i od pierwszego do ostatniego). Jeśli działanie domyślnie powoduje zawijanie, użyj modyfikatora nowrap, aby je wyłączyć.

Wypróbuj: Wzór listy kart > Pozioma lista kart z zawijaniem. W tym przykładzie, gdy zaznaczona jest karta Najczęstsze pytania, a użytkownik naciśnie klawisz strzałki w prawo, zaznaczenie wróci do karty Omówienie.

Atrybut focusgroupstart

Atrybut focusgroupstart określa, który element otrzymuje fokus, gdy po raz pierwszy (lub za każdym razem, gdy pamięć jest wyłączona) przechodzisz do grupy fokusów za pomocą klawisza Tab:

<div focusgroup="toolbar nomemory" aria-label="Entry point demo">
  <button type="button">First</button>
  <button type="button" focusgroupstart>Middle (Entry)</button>
  <button type="button">Last</button>
</div>

Zarówno Tab, jak i Shift+Tab przenoszą zaznaczenie na „Środkowy (wejście)”, ponieważ zawiera on focusgroupstart, a pamięć jest wyłączona za pomocą modyfikatora nomemory. Wypróbuj na żywo:Wzorzec paska narzędzi > Punkt wejścia z focusgroupstart.

Wyłączanie pamięci (nomemory)

Domyślnie grupy fokusowe zapamiętują ostatnio zaznaczony element i przywracają go po ponownym wejściu za pomocą klawisza Tab. W przypadku wzorców, w których fokus powinien zawsze wracać do stałego punktu wejścia (jak w poprzednim przykładzie), użyj modyfikatora nomemory w atrybucie focusgroup, aby go wyłączyć.

Ten modyfikator można też połączyć z programowym przesuwaniem elementu focusgroupstart, aby uzyskać pełną kontrolę nad elementem, który jest zaznaczany po wejściu do grupy. Pamięć jest czyszczona, gdy zapamiętany element staje się niedostępny, np. gdy zostanie usunięty, ukryty, wyłączony, nieaktywny lub wykluczony z grupy fokusowej.

Rezygnacja (focusgroup="none")

Użyj focusgroup="none", aby wykluczyć element i jego poddrzewo z nawigacji strzałkami w grupie fokusowej elementu nadrzędnego. Element, z którego zrezygnowano, i jego poddrzewo pozostają dostępne za pomocą klawisza Tab, ale klawisze strzałek je pomijają:

<div focusgroup="toolbar" aria-label="Segmented toolbar">
  <button type="button">New</button>
  <button type="button">Open</button>
  <button type="button">Save</button>
  <span focusgroup="none">
    <button type="button">Help</button>
    <button type="button">Shortcuts</button>
  </span>
  <button type="button">Close</button>
  <button type="button">Exit</button>
</div>

Użycie klawisza strzałki w prawo powoduje przejście do opcji Nowy, a następnie Otwórz, Zapisz, Zamknij i Zakończ, pomijając przyciski Pomoc i Skróty. Użytkownik może jednak nadal przejść do sekcji pomocy za pomocą klawisza Tab, aby uzyskać dostęp do tych przycisków. Wypróbuj na żywo: Dodatkowe pojęcia > Segmenty rezygnacji z udziału z parametrem focusgroup="none".

Typowe wzorce

Tablist

Element sterujący kartami z nawigacją za pomocą klawiszy strzałek.

<div focusgroup="tablist nomemory" aria-label="Sections">
  <button type="button" aria-selected="true" aria-controls="panel-overview" id="tab-overview" focusgroupstart>Overview</button>
  <button type="button" aria-selected="false" aria-controls="panel-features" id="tab-features">Features</button>
  <button type="button" aria-selected="false" aria-controls="panel-pricing" id="tab-pricing">Pricing</button>
  <button type="button" aria-selected="false" aria-controls="panel-faq" id="tab-faq">FAQ</button>
</div>
<div role="tabpanel" id="panel-overview" aria-labelledby="tab-overview" tabindex="0">...</div>
<div role="tabpanel" id="panel-features" aria-labelledby="tab-features" tabindex="0">...</div>
<div role="tabpanel" id="panel-pricing" aria-labelledby="tab-pricing" tabindex="0">...</div>
<div role="tabpanel" id="panel-faq" aria-labelledby="tab-faq" tabindex="0">...</div>

Wypróbuj: Wzór listy kart > Pozioma lista kart z zawijaniem.

Na co zwrócić uwagę:

• Atrybut focusgroupstart znajduje się na karcie wybrane, więc fokus zawsze jest tam ustawiany.
• Modyfikator nomemory zapewnia, że nawet jeśli użytkownik wcześniej skupił się na innej karcie, ponowne wejście zawsze następuje na wybranej karcie.
• Modyfikator inline ogranicza nawigację za pomocą strzałek tylko do klawiszy w lewo i w prawo. Jest to zgodne z oczekiwanym działaniem opisanym we wzorcu kart APG.
• Modyfikator wrap umożliwia użytkownikom ciągłe korzystanie z klawiszy strzałek na wszystkich kartach.
• Kod dewelopera, pominięty ze względu na zwięzłość, obsługuje rzeczywisty wybór: aktualizacjęaria-selected, przełączanie widoczności panelu i przenoszenie atrybutu focusgroupstart po zmianie wyboru.

Menu i pasek menu

Proste menu pionowe z nawigacją za pomocą strzałek w górę i w dół.

<div focusgroup="menu" aria-label="File actions" class="menu-vertical">
    <button type="button" class="menu-item">New</button>
    <button type="button" class="menu-item">Open…</button>
    <button type="button" class="menu-item">Save</button>
    <button type="button" class="menu-item">Exit</button>
</div>

Wypróbuj: Menu i pasek menu > Proste menu pionowe. Z modyfikatorem block do poruszania się między elementami służą tylko klawisze strzałek w górę i w dół. Klawisze strzałek w lewo i w prawo są dostępne do zdefiniowanych przez Ciebie działań (np. otwierania podmenu). W przypadku paska menu z zagnieżdżonymi podmenu każdy poziom jest niezależną grupą fokusową. Wypróbuj:Menu i pasek menu > Pasek menu z podmenu wysuwanymi

<ul role="menubar" focusgroup="menubar"
     aria-label="Application Menu" class="menubar">
    <li role="none">
        <button role="menuitem" type="button" class="menubar-item"
             aria-haspopup="menu" aria-expanded="false"
             popovertarget="filemenu">File</button>
        <ul role="menu" focusgroup="menu"
             id="filemenu" popover aria-label="File submenu" class="submenu">
            <li role="none"><button type="button" class="submenu-item"
                 autofocus>New</button></li>
            <li role="none"><button type="button" class="submenu-item">Open</button></li>
            <li role="none"><button type="button" class="submenu-item">Save</button></li>
        </ul>
    </li>
    <!-- More menu items... -->
</ul>

Wypróbuj na żywo: Menu i pasek menu > pasek menu z podmenu wysuwanymi. Pasek menu używa modyfikatora inline do nawigacji w lewo i w prawo, a podmenu – modyfikatora block do nawigacji w górę i w dół. Zagnieżdżone grupy fokusowe są od siebie całkowicie niezależne, więc nie przeszkadzają sobie nawzajem.

Radiogroup

Niestandardowa grupa przycisków opcji z nawigacją za pomocą klawiszy strzałek i pełną kontrolą nad stylem.

<div focusgroup="radiogroup" aria-label="Favorite color">
  <span aria-checked="false" tabindex="0">Red</span>
  <span aria-checked="false" tabindex="0">Green</span>
  <span aria-checked="true" tabindex="0" focusgroupstart >Blue</span>
  <span aria-checked="false" tabindex="0">Purple</span>
</div>

Wypróbuj na żywo: Wzorzec grupy przycisków radiowych > Porównanie: reklama natywna a grupa fokusowa

Atrybut focusgroup obsługuje nawigację za pomocą klawiszy strzałek, ale musisz zaimplementować kod wyboru. W tej wersji demonstracyjnej kod JavaScript zarządza stanem zaznaczenia (za pomocą atrybutu aria-checked).

Kluczowych pojęć

Udział w grupie fokusowej

Wszystkie potomne elementy, na których można kolejno ustawiać fokus elementu z atrybutem focusgroup ustawionym na prawidłowe zachowanie są uznawane za uczestniczące w tej grupie fokusów. Oznacza to, że elementy z ujemną wartością tabindex nie są brane pod uwagę, ale elementy, na których można się skupić w sposób natywny, takie jak <button>, są uwzględniane, podobnie jak elementy, w których określono nieujemną wartość tabindex.

Tabulator

Nie musisz zarządzać wartościami tabindex. Nawet jeśli wiele elementów podrzędnych można naturalnie zaznaczać za pomocą klawisza Tab (np. kilka elementów <button>), element focusgroup zwija je do jednego punktu zatrzymania. Przeglądarka określa, który element jest w danym momencie dostępny do zaznaczenia za pomocą klawisza Tab. Wypróbuj na żywo:Toolbar Pattern > No tabindex Management Needed (Wzorzec paska narzędzi > Nie wymaga zarządzania indeksem).

Ostatnio używane wspomnienie

Domyślnie, gdy użytkownik naciśnie klawisz Tab, aby opuścić grupę elementów, a następnie ponownie naciśnie klawisz Tab, zaznaczenie wraca do ostatnio zaznaczonego elementu. Jest to szczególnie ważne w przypadku dużych list i pasków narzędzi, aby użytkownicy nie gubili się na stronie. Użyj modyfikatora nomemory, aby wyłączyć to działanie, gdy chcesz, aby fokus zawsze był przywracany do pierwszego elementu, lub jeśli używasz modyfikatora focusgroupstart, aby kontrolować początkowo wybrany element.

Zagnieżdżone grupy fokusowe

Każda deklaracja focusgroup tworzy niezależny zakres. Zagnieżdżona grupa fokusowa automatycznie rezygnuje z nawigacji strzałkami elementu nadrzędnego. Używaj klawisza Tab, aby przechodzić między grupami zaznaczenia, a klawiszy strzałek, aby poruszać się w obrębie bieżącej grupy zaznaczenia. Wypróbuj na żywo: Dodatkowe koncepcje > Zagnieżdżone grupy fokusowe

Obsługa Shadow DOM

Domyślnie focusgroup ma zastosowanie w przypadku granic modelu Shadow DOM. Grupa fokusowa zadeklarowana w cieniowym hoście zawiera elementy, które można zaznaczyć w drzewie cieni tego hosta. Jeśli chcesz zrezygnować z tej funkcji, możesz użyć focusgroup="none" w drzewie cienia komponentu.

Obsługa konfliktów kluczy

Niektóre elementy w grupie fokusowej, takie jak <input>, <textarea> i inne elementy sterujące, używają klawiszy strzałek do własnych celów. Gdy wystąpi konflikt między klawiszami nawigacyjnymi grupy fokusowej a działaniem klawiszy strzałek elementu natywnego:

• Klawisze strzałek są używane przez element interaktywny (np. do przesuwania kursora tekstu), a grupa fokusów nie przeszkadza.
• Tab lub Shift+Tab to domyślny mechanizm wyjścia, który umożliwia użytkownikowi „ponowne wejście” do grupy fokusowej za pomocą nawigacji za pomocą klawisza Tab.

Te zachowania ucieczki mają zastosowanie tylko wtedy, gdy występuje rzeczywisty konflikt klawiszy; nie mają wpływu na osie, które nie powodują konfliktu. Możesz też wywoływać zdarzenia preventDefault() on keydown, aby zastąpić działanie klawiszy strzałek w grupie fokusowej w przypadku konkretnych elementów. Oznacza to, że możesz umieszczać elementy input i textarea wewnątrz elementu focusgroup bez zakłócania ich działania.

Jeśli dodasz do własnych elementów, które uczestniczą w grupie fokusowej, obsługę klawiszy, zadbaj o zapewnienie podobnego mechanizmu wyjścia, aby użytkownicy mogli uzyskać dostęp do pozostałych elementów grupy.

Odkrywanie dalekich potomków

Elementy focusgroup nie muszą być bezpośrednimi elementami podrzędnymi kontenera focusgroup.

Przeglądarka uznaje wszystkie kolejno fokusowalne elementy podrzędne (nieujemne tabindex) za uczestniczące w grupie fokusowania, chyba że znajdują się w zagnieżdżonej grupie fokusowania lub zostały wykluczone za pomocą atrybutu focusgroup="none".

<div focusgroup="toolbar" aria-label="Nested wrappers">
  <div>
    <span>
      <button type="button">Alpha</button>
    </span>
    <span>
      <button type="button">Beta</button>
    </span>
    <span>
      <button type="button">Gamma</button>
    </span>
  </div>
</div>

Nawigacja za pomocą klawiszy strzałek działa, mimo że przyciski są zagnieżdżone w elementach <div> i <span>. Nie ma wymogu płaskiej listy, więc elementy opakowujące do stylizacji są w porządku.

Wypróbuj na żywo: Dodatkowe koncepcje > Głębokie elementy podrzędne.

Integracja z usługą reading-flow

Zarówno nawigacja sekwencyjna (klawisz Tab), jak i kierunkowa (klawisze strzałek) uwzględniają właściwość CSS reading-flow, jeśli jest obecna, i podążają za wizualną kolejnością odczytu, a nie kolejnością źródłową DOM.

Dzięki temu nawigacja za pomocą klawiszy strzałek będzie zgodna z układem widocznym na ekranie.

<div focusgroup="toolbar" aria-label="Visual order"
     style="display: flex; flex-direction: row-reverse; reading-flow: flex-visual;">
  <button type="button">A (DOM first)</button>
  <button type="button">B (DOM second)</button>
  <button type="button">C (DOM third)</button>
</div>

Kolejność DOM to A, B, C, ale kolejność wizualna to C, B, A, ponieważ układ korzysta z flex-direction: row-reverse. Ponieważ jednak kod używa też znaku reading-flow: flex-visual, kolejność odczytu wraca do A, B, C, a wartość focusgroup jest zgodna z tą kolejnością.

Naciśnięcie klawisza Tab spowoduje najpierw zaznaczenie elementu C, a następnie naciśnięcie strzałki w prawo spowoduje zaznaczenie elementu B, a potem A. Wypróbuj na żywo: Dodatkowe koncepcje > Integracja z kierunkiem czytania w CSS

Ułatwienia dostępu

Wnioskowanie o rolach ARIA

W grupie fokusowej token zachowania jest używany przez przeglądarkę do określania minimalnej roli zarówno kontenera, jak i jego elementów. Oznacza to, że gdy atrybut focusgroup jest ustawiony w elemencie, który ma ogólną rolę, stosowana jest prawidłowa rola na podstawie wybranego sposobu działania. Elementy składowe elementu, które mają rolę ogólną, lub przyciski, które nie mają określonej roli, będą miały odpowiednio wywnioskowane role. Na przykład ten kod HTML:

<div focusgroup="tablist">
  <button>Tab 1</button>
  <button>Tab 2</button>
  <button>Tab 3</button>
</div>

Tworzy to drzewo ułatwień dostępu, mimo że w przypadku przycisków nie zdefiniowano żadnych ról:

+   tablist
  |
  +   tab
  |
  +   tab
  |
  +   tab

Zawsze możesz kontrolować działanie, ustawiając rolę bezpośrednio.

Względy dotyczące ułatwień dostępu

Pamiętaj, aby zachowywać się zgodnie z wybranym przez siebie zachowaniem podczas tworzenia grupy fokusowej.

Korzystanie z grupy fokusowej powinno być jak najbardziej zbliżone do określonego przez Ciebie zachowania. Jest to ważne, aby użytkownicy korzystający z narzędzi ułatwień dostępu mogli poruszać się po treściach i korzystać z niestandardowych elementów sterujących.

Wnioskowanie o rolach zapewnia dobre wartości domyślne, ale w przypadku elementów z rolami innymi niż ogólne należy zadbać o to, aby miały one odpowiednią rolę ustawioną dla funkcji, które zapewniają.

Pamiętaj, że użytkownicy mogą potrzebować możliwości przewijania treści za pomocą klawiszy strzałek. Użytkownik klawiatury powinien zawsze mieć możliwość odczytania treści na stronie i uzyskania do nich dostępu.

Wykrywanie cech

Aby zacząć korzystać z funkcji focusgroup już dziś, zanim będzie ona w pełni obsługiwana przez przeglądarki, możesz wykryć jej obsługę w JavaScript:

if ('focusgroup' in HTMLElement.prototype) {
  // focusgroup is supported.
} else {
  // fall back to manual roving tabindex.
}

Podsumowanie

Atrybut focusgroup jest obecnie rozwijany przez organizacje normalizacyjne, a my aktywnie tworzymy prototyp w Chromium i ulepszamy interfejs API.

Wypróbuj tę funkcję i zgłoś problem w grupie fokusowej w narzędziu Issue Tracker Open-UI na GitHubie. Szczególnie interesują nas Twoje opinie na temat tych kwestii:

• Czy interfejs API jest odpowiedni do tworzonych przez Ciebie wzorców?
• Czy brakuje nam jakichś wzorców lub scenariuszy?
• Czy są elementy, w przypadku których atrybut focusgroup nie powinien być dozwolony?
• Jak ułatwienia dostępu sprawdzają się w Twoich przypadkach użycia?

Dziękujemy za pomoc w ulepszaniu nawigacji w internecie za pomocą klawiatury.

Więcej informacji

• Focusgroup Explainer
• Interaktywne prezentacje (źródło)
• Problem z HTML WHATWG
• Problemy z grupą fokusową Open UI
• Przewodnik po tworzeniu treści z użyciem ARIA

Dziękujemy Masonowi Freedowi, Sarze Higley, Scottowi O'Harze i pozostałym członkom społeczności Open-UI za pomoc w przywróceniu focusgroup.