Material-ui: [Breadcrumbs] Focus goes to top of page after expanding in IE11

Created on 25 Mar 2020 · 5Comments · Source: mui-org/material-ui

[x] The issue is present in the latest release.
[x] I have searched the issues of this repository and believe that this is not a duplicate.

Current Behavior 😯

In Internet Explorer 11, the focus is shifting to the top of the page after expanding the Breadcrumb list via keyboard.

(Note: if it helps to debug - after hitting the expand button, document.activeElement returns the <body> element of the page. This is also the case in Chrome and Firefox, but IE11 seems to handle the situation much differently.)

Expected Behavior 🤔

Focus should remain contained within the Breadcrumb list, possibly going to the next newly-revealed Breadcrumb.

Optionally, if there was some sort of available onExpand handler, this could probably be achieved via user implementation. (Unsure if this would constitute a separate issue all together, or even be a possible breaking change, but figured I'd put out the suggestion anyway.)

Steps to Reproduce 🕹

Using the current live documentation example of Collapsed Breadcrumbs, since I think codesandbox examples don't render in IE11?

Steps:

Navigate to the above example in IE11
Tab to the expand ... button in the "Collapsed breadcrumbs" example
Hit enter
Hit tab again and observe that the focus is now on the "Skip to content" button at the top of the page

Context 🔦

Testing that the Breadcrumb component is adequately accessible for our users (which a decent majority still actively use IE11 😢)

Your Environment 🌎

| Tech | Version |
| ----------- | ------- |
| Material-UI | v4.9.6 |
| React | |
| Browser | IE 11 |
| TypeScript | |
| etc. | |

accessibility Breadcrumbs good to take

Source

malouro

👍1

Most helpful comment

@malouro @oliviertassinari Can I take this issue?

ShehryarShoukat96 on 4 Apr 2020

👍2

All 5 comments

The problem doesn't seem limited to IE 11. What do you think of this diff?

remote: Resolving deltas: 100% (143/143), completed with 29 local objects.
diff --git a/packages/material-ui/src/Breadcrumbs/Breadcrumbs.js b/packages/material-ui/src/Breadcrumbs/Breadcrumbs.js
index d958e5362..c54eeddd2 100644
--- a/packages/material-ui/src/Breadcrumbs/Breadcrumbs.js
+++ b/packages/material-ui/src/Breadcrumbs/Breadcrumbs.js
@@ -63,8 +63,9 @@ const Breadcrumbs = React.forwardRef(function Breadcrumbs(props, ref) {
   const [expanded, setExpanded] = React.useState(false);

   const renderItemsBeforeAndAfter = (allItems) => {
-    const handleClickExpand = () => {
+    const handleClickExpand = (event) => {
       setExpanded(true);
+      event.currentTarget.parentNode.querySelector('a').focus();
     };

     // This defends against someone passing weird input, to ensure that if all