Closed AnushriJajoo2019 closed 1 year ago
nicktitchmarsh
commented
2 years ago Hi @AnushriJajoo2019 , please can you provide a codesandbox or reproducible example. Without it we cannot help.
In this example the focus is being set on the Dialog container, where the first focusable element is the Close icon. How are you setting the focus on the ag-grid at the moment?
AnushriJajoo2019
commented
2 years ago We are not using anything special to set the focus on ag-grid Here is the code sandbox with tabbing error
This was working fine with carbon version 106.1.0 but issue is in version 110.0.3
https://codesandbox.io/s/heuristic-germain-dgfw6f?file=/src/index.js
nicktitchmarsh
commented
2 years ago FE-5497
carbonci
commented
1 year ago :tada: This issue has been resolved in version 113.0.1 :tada:
The release is available on:
Your semantic-release bot :package::rocket:
Current behaviour
If focus is in AG grid, then on press of Tab key, instead of focusing on next element within AG grid, focus shifts to next element on screen.
In this, focus shifted to closing icon of dialog.
This was working fine with carbon version 106.1.0 but issue is in version 110.0.3
On inspecting, it seems like issue might be in following code of 'focus-trap.component.tsx', this code seems to have changed
if (ev.key === "Tab") { if (!focusableElements?.length) { / Block the trap / ev.preventDefault(); } else if (ev.shiftKey) { / shift + tab / let elementToFocus; if (activeElement === wrapperRef?.current) { elementToFocus = getNextElement( firstElement as HTMLElement, focusableElements, ev.shiftKey ); } else { elementToFocus = getNextElement( activeElement, focusableElements, ev.shiftKey ); } setElementFocus(elementToFocus); ev.preventDefault(); } else { const elementToFocus = getNextElement( activeElement, focusableElements, ev.shiftKey ); setElementFocus(elementToFocus); ev.preventDefault(); } } }; when focus is on grid element, and on pressing of Tab last else condition is executed. On inspection in dev tool, For AGgrid the activeElement is as follows
Expected behaviour
On tab, focus should shift within AGgrid
CodeSandbox or Storybook URL
-
JIRA Ticket (Sage Only)
No response
Suggested Solution
No response
Carbon Version
110.0.3
Design Tokens Version
2.24.0
What browsers are you seeing the problem on?
Chrome
What Operating System are you seeing the problem on?
Windows
Anything else we should know?
No response
Confidentiality