Use the X-Scroll component along with Panel Nav to provide a horizontal, scrollable list of items on mobile that switches to a standard vertical list on desktop.
Accessibility note: use role="list" on the containing div and role="listitem" on the child items to allow screen readers to announce the number of items in the navigation. See https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/listitem_role. In the future, the Panel Nav component should be rebuilt to allow for semantic <ul> and <li> to negate the need for the aria labels.
Additionally, you should indicate the current item with a fa-angle-right icon and screen reader only text.
<nav
class="filterButtons xScroll xScroll--asPanel"
aria-label="Browse by category"
>
<h2 class="filterButtons__heading xScroll__above">Navigation</h2>
<div class="filterButtons__list xScroll__items" role="list">
<a href="#" class="filterButtons__label" role="listitem">Category 1</a>
<a href="#" class="filterButtons__label" role="listitem">Category 2</a>
<a href="#" class="filterButtons__label" role="listitem">Category 3</a>
<span class="filterButtons__label filterButtons__label--active" role="listitem">
<span class="prependedIcon fa-solid fa-angle-right"></span>
<span class="u-srOnly">Current page: </span>Category 4
</span>
<a href="#" class="filterButtons__label" role="listitem">Category 5</a>
<a href="#" class="filterButtons__label" role="listitem">Category 6</a>
</div>
</nav>