Elements behind modal card view can be accessed by keyboard

[KalleOlaviNiemitalo]

Jenkins and plugins versions report

Environment

Jenkins: 2.426.2
OS: Windows Server 2012 R2 - 6.3
Java: 17.0.8.1 - Eclipse Adoptium (OpenJDK 64-Bit Server VM)
---
Office-365-Connector:4.20.2
analysis-model-api:11.15.0
ansicolor:1.0.4
antisamy-markup-formatter:162.v0e6ec0fcfcf6
apache-httpcomponents-client-4-api:4.5.14-208.v438351942757
atlassian-bitbucket-server-integration:4.0.0
authentication-tokens:1.53.v1c90fd9191a_b_
authorize-project:1.7.1
azure-ad:449.v92b_39a_d8e523
azure-sdk:157.v855da_0b_eb_dc2
basic-branch-build-strategies:81.v05e333931c7d
bitbucket-server-checks:1.0-SNAPSHOT (private-49d94041-kalle)
bootstrap5-api:5.3.2-3
bouncycastle-api:2.30.1.77-225.v26ea_c9455fd9
branch-api:2.1144.v1425d1c3d5a_7
buildtriggerbadge:251.vdf6ef853f3f5
caffeine-api:3.1.8-133.v17b_1ff2e0599
checks-api:2.0.2
cloudbees-bitbucket-branch-source:856.v04c46c86f911
cloudbees-disk-usage-simple:203.v3f46a_7462b_1a_
cloudbees-folder:6.858.v898218f3609d
command-launcher:107.v773860566e2e
commons-httpclient3-api:3.1-3
commons-lang3-api:3.13.0-62.v7d18e55f51e2
commons-text-api:1.11.0-95.v22a_d30ee5d36
compress-artifacts:98.vb_20f3c77ddf7
configuration-as-code:1763.vb_fe9c1b_83f7b
copyartifact:722.v0662a_9b_e22a_c
credentials:1311.vcf0a_900b_37c2
credentials-binding:642.v737c34dea_6c2
customizable-header:69.v36de0f11b_d00
data-tables-api:1.13.8-2
display-url-api:2.200.vb_9327d658781
dtkit-api:3.0.2
durable-task:543.v262f6a_803410
echarts-api:5.4.3-2
extended-read-permission:53.v6499940139e5
fast-track:1.0.0
font-awesome-api:6.5.1-1
forensics-api:2.3.0
git:5.2.1
git-client:4.6.0
git-forensics:2.0.0
gson-api:2.10.1-15.v0d99f670e0a_7
handy-uri-templates-2-api:2.1.8-30.v7e777411b_148
hudson-wsclean-plugin:1.0.8
instance-identity:185.v303dc7c645f9
ionicons-api:56.v1b_1c8c49374e
jackson2-api:2.16.1-373.ve709c6871598
jakarta-activation-api:2.0.1-3
jakarta-mail-api:2.0.1-3
javax-activation-api:1.2.0-6
javax-mail-api:1.6.2-9
jaxb:2.3.9-1
jdk-tool:73.vddf737284550
jersey2-api:2.41-133.va_03323b_a_1396
jira:3.12
job-restrictions:0.8
joda-time-api:2.12.6-21.vca_fd74418fb_7
jquery3-api:3.7.1-1
json-api:20231013-17.v1c97069404b_e
json-path-api:2.8.0-21.v8b_7dc8b_1037b_
junit:1252.vfc2e5efa_294f
lockable-resources:1228.v1b_2379444670
mailer:463.vedf8358e006b_
manage-permission:1.0.1
matrix-auth:3.2.1
matrix-project:822.v01b_8c85d16d2
metrics:4.2.18-442.v02e107157925
mina-sshd-api-common:2.11.0-86.v836f585d47fa_
mina-sshd-api-core:2.11.0-86.v836f585d47fa_
okhttp-api:4.11.0-157.v6852a_a_fa_ec11
pipeline-build-step:540.vb_e8849e1a_b_d8
pipeline-graph-analysis:202.va_d268e64deb_3
pipeline-graph-view:209.ve8c2e5305867
pipeline-groovy-lib:689.veec561a_dee13
pipeline-input-step:477.v339683a_8d55e
pipeline-milestone-step:111.v449306f708b_7
pipeline-model-api:2.2168.vf921b_4e72c73
pipeline-model-definition:2.2168.vf921b_4e72c73
pipeline-model-extensions:2.2168.vf921b_4e72c73
pipeline-rest-api:2.34
pipeline-stage-step:305.ve96d0205c1c6
pipeline-stage-tags-metadata:2.2168.vf921b_4e72c73
pipeline-stage-view:2.34
pipeline-utility-steps:2.16.0
plain-credentials:143.v1b_df8b_d3b_e48
plugin-util-api:3.8.0
prism-api:1.29.0-10
resource-disposer:0.23
scm-api:683.vb_16722fb_b_80b_
script-security:1313.v7a_6067dc7087
sidebar-link:2.4.1
simple-queue:1.4.4
snakeyaml-api:2.2-111.vc6598e30cc65
ssh-credentials:308.ve4497b_ccd8f4
sshd:3.312.v1c601b_c83b_0e
structs:325.vcb_307d2a_2782
timestamper:1.26
token-macro:400.v35420b_922dcb_
trilead-api:2.133.vfb_8a_7b_9c5dd1
variant:60.v7290fc0eb_b_cd
warnings-ng:10.7.0
workflow-aggregator:596.v8c21c963d92d
workflow-api:1283.v99c10937efcb_
workflow-basic-steps:1042.ve7b_140c4a_e0c
workflow-cps:3837.v305192405b_c0
workflow-durable-task-step:1313.vcb_970b_d2a_fb_3
workflow-job:1385.vb_58b_86ea_fff1
workflow-multibranch:770.v1a_d0708dd1f6
workflow-scm-step:415.v434365564324
workflow-step-api:639.v6eca_cd8c04a_a_
workflow-support:865.v43e78cc44e0d
ws-cleanup:0.45
xunit:3.1.3

What Operating System are you using (both controller, and any agents involved in the problem)?

Windows

Reproduction steps

1. Navigate to a run page.
2. Click the "Pipeline Overview" button in the left sidebar.
3. Click the bidirectional arrow button at the top right corner of the "Pipeline" graph.
4. The "Pipeline" graph expands to almost fill the Web browser window. The elements behind it are blurred and mostly do not react to mouse clicks.
5. Press the TAB key on the keyboard.

Expected Results

The focus should move only within the "Pipeline" pane; it should not be possible to use the keyboard to move the focus out of that pane except by closing it.

Actual Results

The first TAB keypress moves the focus to some hidden link, and a "Skip to content" tooltip appears. Further TAB keypresses move the focus to the search box, logout button, etc.; and it is possible to type to the search box and press Enter to search, even though it is blurred.

Anything else?

These should perhaps be separate issues:

• The corners of the blurring backdrop are rounded, so the backdrop does not quite reach the corners of the web page behind it. If the application navigator button of the Customizable Header plugin has been configured, then it can still receive a mouse click at the top left corner of the page and pop up its menu. The corners of the backdrop should not be rounded.
• The nodes and labels in the graph do not have tab stops; it is not possible to move the focus to them by repeatedly pressing the TAB key. It should be possible to navigate from here to the pipeline console of each node by using only the keyboard.

Are you interested in contributing a fix?

No response

[KalleOlaviNiemitalo]

Perhaps the JavaScript event handler that expands the "Pipeline" pane could reparent it to an HTML dialog and then call showModal.

[KalleOlaviNiemitalo]

react-modal (as used in src/main/frontend/pipeline-console-view/pipeline-console/main/ConsoleLogModal.tsx) apparently solves this by handling the focus and blur events. https://mui.com/material-ui/react-modal/#focus-trap

[timja]

this will probably use https://weekly.ci.jenkins.io/design-library/Dialogs/

or possibly just being converted to a link to a new page