mirrors
/
forgejo
mirror of
1
Fork 0
Code Issues Releases Activity

[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>
This commit is contained in:
banaanihillo 2024-07-23 15:37:19 +00:00 committed by Earl Warren
parent dd9abfcc09
commit 522e652e8d
1 changed files with 5 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
web_src/js/components/RepoActionView.vue
View File

@ -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
-->