Re: Support/help with a breadcrumb implementation

Hi,
    Looks like currently the contextual sub-menu only appears only on mouse
hover and not keyboard/tab focus which is an issue.
More about this:
   https://knowbility.org/blog/2018/wcag21-1413contenthoverfocus/

https://www.a11y-collective.com/blog/mastering-web-accessibility-making-drop-down-menus-user-friendly/
   https://www.w3.org/WAI/tutorials/menus/flyout/


Thanks
Ashraf

Totally separate issue with:
1. Hierarchy (WCAG 1.3.1) I think you are aware of the H2 missing  and I
see H3, I guess you have a plan to have "Dairy Products" or "Plant-based
drinks" be the H2.

 2. Product titles(which again you might be aware of):
Content Before the Heading, Logical Reading Order Issue (WCAG 1.3.2 &
2.4.6) :
In your code, the <div> containing the product price (1,799 HUF) is placed
before the <h3> containing the product name ("Aroy-D Original Coconut Milk")
<div class="@container flex min-h-[30px] w-full flex-wrap..."
data-test="productCard-body-price">
  ... <span>1,799</span> <span>HUF</span> ...
</div>
<h3 class="wrap-break-word m-0 line-clamp-2..." title="Aroy-D Original
Coconut Milk">
  Aroy-D Original Coconut Milk
</h3>

Screenreader users often navigate pages using headings(using the "H" key).
Headings act as landmarks indicating a new topic or item.
If a user jumps directly to the <h3> for "Aroy-D Original Coconut Milk,"
the screen reader will start reading from that point downward. Because the
price is located above the heading in the HTML structure, the user will
completely miss the price unless they realize they need to navigate
backward up the DOM. A heading should introduce the content that follows
it, not the other way around.
If your visual design dictates that the price must appear visually above
the product title, use Separate Visual Order from DOM Order:  you will
still put the <h3> first in the HTML code. You can then use CSS (like
Flexbox or Grid) to visually rearrange them.

Here is how you can correct the DOM order while using Flexbox (flex-col and
order) to maintain your visual layout:
<a class="flex w-full flex-col gap-50 text-inherit no-underline
cursor-pointer" to="/..." href="/...">
  <h3 class="order-2 wrap-break-word m-0 line-clamp-2 flex-[100%]
hyphens-auto p-0 text-left font-normal text-100 text-primary
leading-normal" data-test="productCard-body-name" title="Aroy-D Original
Coconut Milk">
    Aroy-D Original Coconut Milk
  </h3>
  <div class="order-1 @container flex min-h-[30px] w-full flex-wrap
items-baseline gap-x-200 gap-y-100" data-test="productCard-body-price">
    <div class="flex items-baseline gap-50 rounded-small"
data-test="productCard-body-price-price" style="color: var(--grey-90);
background-color: transparent;">
      <span class="font-bold text-400 leading-[30px]
[@container(min-width:180px)]:text-600
[@container(min-width:180px)]:leading-[32px]">1,799</span>
      <span class="text-80 leading-[30px]
[@container(min-width:180px)]:text-100
[@container(min-width:180px)]:leading-[30px]">HUF</span>
    </div>
  </div>
</a>
if you are using Tailwind's order-1 on the price and order-2 on the heading
to swap them visually


On Thu, Apr 16, 2026 at 2:25 AM Bianchi, Cezar <
Cezar.Bianchi@gehealthcare.com> wrote:

> Hello there,
>
> My name is Cezar, I work at GE Healthcare design system and have a
> question regarding the breadcrumb component.
>
> Take a look at the example below
> https://www.kifli.hu/en-HU/c300121581-noevenyi-alapu-italok
> [image: Screenshot 2026-04-15 at 9.39.08 AM.png]
>
> We are trying same behavior:
>
> - Hover-triggered contextual popover
>
>    - When a user hovers over any non-terminal breadcrumb node, a popover
>    is displayed showing all navigable destinations available within that level
>    of the information hierarchy.
>    - This pattern extends traditional breadcrumb navigation by revealing
>    sibling and child pages without requiring a page change, reducing
>    navigation friction in deep hierarchies
>       - At the last interactive level, pressing tab will change focus to
>       the next interactive element on the page.
>       - At the first interactive level, pressing shift+tab will change
>       focus to the previous interactive element on the page.
>       - To select a page, press enter when breadcrumb is in focus.
>       Navigate to selected page and reset focus to page level.
>       - Breadcrumb will inherit focused, focused hovered and focused
>       pressed states.
>
>
> We have some questions about keyboard interactions:
>
> “Tab" will move to the next interaction available, “Enter" will navigate
> to/open the breadcrumb page. How should the user move from breadcrumb to
> popover options?
>
> Thank you very much
>