Elements behind modal card view can be accessed by keyboard

KalleOlaviNiemitalo commented 8 months ago

Jenkins and plugins versions report

Environment

```text 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

Navigate to a run page.
Click the "Pipeline Overview" button in the left sidebar.
Click the bidirectional arrow button at the top right corner of the "Pipeline" graph.
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.
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 commented 8 months ago

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

KalleOlaviNiemitalo commented 7 months ago

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 commented 7 months ago

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

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

jenkinsci / pipeline-graph-view-plugin