Remove tabIndex from scrollable containers to fix keyboard scroll issue #9140
Conversation
openshift-ci
bot
added
component/core
|
/assign @rhamilto |
|
I debugged this issue with Rohit and agree that the tabindex should be removed. Having a tabindex on a container essentially breaks focus and keyboard scroll for all non-focusable containers below it. eg topology details side panel. Any contributions to the main content should not have to deal with adding their own tabindex attribute to their scroll containers. |
frontend/public/components/app.jsx
Outdated
There was a problem hiding this comment.
@jcaianirh Do you know why PatternFly is defaulting to tabIndex -1?
rohitkrai03
force-pushed
the
keyboard-scroll-fix
branch
from
97df3c9 to
2083908
Compare
|
/lgtm |
|
[APPROVALNOTIFIER] This PR is APPROVED This pull-request has been approved by: rhamilto, rohitkrai03 The full list of commands accepted by this bot can be found here. The pull request process is described here DetailsNeeds approval from an approver in each of these files:
Approvers can indicate their approval by writing |
|
/retest Please review the full test history for this PR and help us cut down flakes. |
1 similar comment
|
/retest Please review the full test history for this PR and help us cut down flakes. |
|
/retest |
|
/retest Please review the full test history for this PR and help us cut down flakes. |
10 similar comments
|
/retest Please review the full test history for this PR and help us cut down flakes. |
|
/retest Please review the full test history for this PR and help us cut down flakes. |
|
/retest Please review the full test history for this PR and help us cut down flakes. |
|
/retest Please review the full test history for this PR and help us cut down flakes. |
|
/retest Please review the full test history for this PR and help us cut down flakes. |
|
/retest Please review the full test history for this PR and help us cut down flakes. |
|
/retest Please review the full test history for this PR and help us cut down flakes. |
|
/retest Please review the full test history for this PR and help us cut down flakes. |
|
/retest Please review the full test history for this PR and help us cut down flakes. |
|
/retest Please review the full test history for this PR and help us cut down flakes. |
|
/retest Please review the full test history for this PR and help us cut down flakes. |
8 similar comments
|
/retest Please review the full test history for this PR and help us cut down flakes. |
|
/retest Please review the full test history for this PR and help us cut down flakes. |
|
/retest Please review the full test history for this PR and help us cut down flakes. |
|
/retest Please review the full test history for this PR and help us cut down flakes. |
|
/retest Please review the full test history for this PR and help us cut down flakes. |
|
/retest Please review the full test history for this PR and help us cut down flakes. |
|
/retest Please review the full test history for this PR and help us cut down flakes. |
|
/retest Please review the full test history for this PR and help us cut down flakes. |
|
/hold |
openshift-ci
bot
added
the
do-not-merge/hold
|
/hold cancel |
openshift-ci
bot
removed
the
do-not-merge/hold
|
/retest |
|
/retest Please review the full test history for this PR and help us cut down flakes. |
6 participants
Analysis / Root cause:
max-heightfrom the container.scrollTowouldn't work anymore.tabIndex=-1onPagecomponent mentioned intabIndexin<Page>should be an optional prop patternfly/patternfly-react#4180. This caused all the child containers to explicitly settabIndex={-1}in order to enable keyboard scrolling.Solution Description:
tabIndex={-1}from scrollable container.mainTabIndex={null}toPagecomponent.Browser conformance: