adobe / adobe/react-spectrum

Breadcrumbs lose focus when a breadcrumb link is clicked to become the current page

Open
#2,592 0 comments 0 reactions 0 assignees View on GitHub
Breadcrumbs bug
Dominant language
TypeScript
Stars
15.9k
Forks
1.6k
Avg merge
3d 9m
Merged PRs (30d)
59

Description

# 🐛 Bug Report

In Breadcrumbs, when a breadcrumb link with focus gets triggered, the link becomes `disabled` and `tabIndex` is removed, which means focus gets lost to the `document.body`. Also, since the blur event does not get fired for the breadcrumb link when it becomes `disabled`, the FocusRing may still be rendered.

## 🤔 Expected Behavior

The current, `disabled` Breadcrumb link should probably have `tabIndex="-1"`, so that it will still be focusable when its state changes.

## 😯 Current Behavior

In Breadcrumbs, when a breadcrumb link with focus gets triggered, the link becomes `disabled` and `tabIndex` is removed, which means focus gets lost to the `document.body`.

## 💁 Possible Solution

## 🔦 Context

This was identified as an issue testing a quarry component that uses breadcrumbs to track position within folders. When the Breadcrumb for an ancestor of the current folder was activated to become the new current folder, focus within the app would get lost to the `document.body`.

## 💻 Code Sample

## 🌍 Your Environment

| Software | Version(s) |
| ---------------- | ---------- |
| react-spectrum | @react-spectrum/breadcrumbs@3.2.3
| Browser | All
| Operating System | All

## 🧢 Your Company/Team

Adobe/Accessibility

## 🕷 Tracking Issue (optional)

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.