From 522e652e8dcb2225c8228d4a313d4652ab525692 Mon Sep 17 00:00:00 2001
From: banaanihillo <banaanihillo@noreply.codeberg.org>
Date: Tue, 23 Jul 2024 15:37:19 +0000
Subject: [PATCH] [accessibility] Add keyboard support for test actions (#4490)

- Existing gear icon keyup handler fixed:
moved the handler onto its descendant button,
to prevent it from incorrectly firing on the check-box elements
- Check-box elements: keyup elements for space and enter added,
as well as tabindex elements to make them able to gain focus

<!--
Before submitting a PR, please read the contributing guidelines:
https://codeberg.org/forgejo/forgejo/src/branch/forgejo/CONTRIBUTING.md
-->

To test the check boxes:
- Set up an action, and visit the action's job page
- Navigate onto the job container (via Tab et al.)
- Use the gear icon with Space or Enter
- Tick the check-box items with Space or Enter

To test the elements beside the chevron icons:
- Navigate onto the element via Tab et al.
- Open/close them via Space or Enter

I have not had a chance to test the latter fix (https://codeberg.org/forgejo/forgejo/issues/4476#issuecomment-2092312) myself yet; feel free to reject this one in case the latter fix does not work as it should, and I will break this up into two separate pull requests.

<!--start release-notes-assistant-->

## Draft release notes
<!--URL:https://codeberg.org/forgejo/forgejo-->
- User Interface bug fixes
  - [PR](https://codeberg.org/forgejo/forgejo/pulls/4490)</a>: <!--number 4490 --><!--line 0 --><!--description W2FjY2Vzc2liaWxpdHldIEFkZCBrZXlib2FyZCBzdXBwb3J0IGZvciB0ZXN0IGFjdGlvbnM=-->[accessibility] Add keyboard support for test actions<!--description-->
<!--end release-notes-assistant-->

Reviewed-on: https://codeberg.org/forgejo/forgejo/pulls/4490
Reviewed-by: Earl Warren <earl-warren@noreply.codeberg.org>
Co-authored-by: banaanihillo <banaanihillo@noreply.codeberg.org>
Co-committed-by: banaanihillo <banaanihillo@noreply.codeberg.org>
---
 web_src/js/components/RepoActionView.vue | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/web_src/js/components/RepoActionView.vue b/web_src/js/components/RepoActionView.vue
index 4f2af3ac6..c807c7daf 100644
--- a/web_src/js/components/RepoActionView.vue
+++ b/web_src/js/components/RepoActionView.vue
@@ -464,20 +464,20 @@ export function initRepositoryActionView() {
             </p>
           </div>
           <div class="job-info-header-right">
-            <div class="ui top right pointing dropdown custom jump item" @click.stop="menuVisible = !menuVisible" @keyup.enter="menuVisible = !menuVisible">
+            <div class="ui top right pointing dropdown custom jump item" @click.stop="menuVisible = !menuVisible">
               <button class="btn gt-interact-bg tw-p-2">
                 <SvgIcon name="octicon-gear" :size="18"/>
               </button>
               <div class="menu transition action-job-menu" :class="{visible: menuVisible}" v-if="menuVisible" v-cloak>
-                <a class="item" @click="toggleTimeDisplay('seconds')">
+                <a class="item" tabindex="0" @click="toggleTimeDisplay('seconds')" @keyup.space="toggleTimeDisplay('seconds')" @keyup.enter="toggleTimeDisplay('seconds')">
                   <i class="icon"><SvgIcon :name="timeVisible['log-time-seconds'] ? 'octicon-check' : 'gitea-empty-checkbox'"/></i>
                   {{ locale.showLogSeconds }}
                 </a>
-                <a class="item" @click="toggleTimeDisplay('stamp')">
+                <a class="item" tabindex="0" @click="toggleTimeDisplay('stamp')" @keyup.space="toggleTimeDisplay('stamp')" @keyup.enter="toggleTimeDisplay('stamp')">
                   <i class="icon"><SvgIcon :name="timeVisible['log-time-stamp'] ? 'octicon-check' : 'gitea-empty-checkbox'"/></i>
                   {{ locale.showTimeStamps }}
                 </a>
-                <a class="item" @click="toggleFullScreen()">
+                <a class="item" tabindex="0" @click="toggleFullScreen()" @keyup.space="toggleFullScreen()" @keyup.enter="toggleFullScreen()">
                   <i class="icon"><SvgIcon :name="isFullScreen ? 'octicon-check' : 'gitea-empty-checkbox'"/></i>
                   {{ locale.showFullScreen }}
                 </a>
@@ -492,7 +492,7 @@ export function initRepositoryActionView() {
         </div>
         <div class="job-step-container" ref="steps" v-if="currentJob.steps.length">
           <div class="job-step-section" v-for="(jobStep, i) in currentJob.steps" :key="i">
-            <div class="job-step-summary" @click.stop="isExpandable(jobStep.status) && toggleStepLogs(i)" :class="[currentJobStepsStates[i].expanded ? 'selected' : '', isExpandable(jobStep.status) && 'step-expandable']">
+            <div class="job-step-summary" tabindex="0" @click.stop="isExpandable(jobStep.status) && toggleStepLogs(i)" @keyup.enter.stop="isExpandable(jobStep.status) && toggleStepLogs(i)" @keyup.space.stop="isExpandable(jobStep.status) && toggleStepLogs(i)" :class="[currentJobStepsStates[i].expanded ? 'selected' : '', isExpandable(jobStep.status) && 'step-expandable']">
               <!-- If the job is done and the job step log is loaded for the first time, show the loading icon
                 currentJobStepsStates[i].cursor === null means the log is loaded for the first time
               -->