Improve accessibility of FreeTube input elements #2709

ChunkyProgrammer · 2022-10-11T04:43:06Z

Improve accessibility of FreeTube input elements

Pull Request Type

Bugfix

Related issue

Implements part of #1525 (removes jquery)
#693

Description

Makes generic ft-(input) items more accessible. Future PRs will tackle more components.

Testing

FtDropdown:

Find a Playlist
Tab to the "Share" bar (clicking on the description then clicking tab might be easier)
Press enter on the "Share"
Press enter on copy link

FtNotificationBanner:

modify version in package.json to a previous version (0.16.0)(verify that check for app updates is enabled in the setting as well)
Tab to notification banner
Press enter
(Repeat but instead of pressing enter, tab to the close button then press enter)

FtPrompt:

go to data settings
tab to "Export Subscriptions"
press enter
click tab then press enter

FtIconButon

navigate to a video
tab to the share button
press enter
tab to different options in list
press enter

FtSelect

go to settings
go to download settings
tab to "Download Behavior"
press arrow keys up/down
see that value changes
press enter
list of values opens up

Desktop

OS: Windows
OS Version: 11
FreeTube version: 0.17.2

Additional context

Co-Authored-By: Jason [email protected]

Co-Authored-By: Jason <[email protected]>

ChunkyProgrammer

Some small changes i need to make

src/renderer/components/ft-list-dropdown/ft-list-dropdown.vue

src/renderer/components/ft-prompt/ft-prompt.js

PikachuEXE · 2022-10-11T08:41:10Z

Can I wave white flag so many things to test ._.

PikachuEXE

Tested

FtDropdown
FtPrompt - however if I press tab "export YT(csv)" is highlighted, is it expected
FtIconButon
FtSelect

Not tested (lazy ._.)

FtNotificationBanner

ChunkyProgrammer · 2022-10-11T12:35:19Z

FtPrompt - however if I press tab "export YT(csv)" is highlighted, is it expected

Fixed, made first focus visible

PikachuEXE · 2022-10-12T01:05:52Z

Tested updated FtPrompt

How do I escape from Select Export Type with keyboard only?

ChunkyProgrammer · 2022-10-12T04:35:55Z

Tested updated FtPrompt

How do I escape from Select Export Type with keyboard only?

Just added a close button

src/renderer/components/ft-prompt/ft-prompt.vue

src/renderer/components/ft-prompt/ft-prompt.js

src/renderer/components/ft-prompt/ft-prompt.vue

src/renderer/components/ft-icon-button/ft-icon-button.vue

src/renderer/components/ft-list-dropdown/ft-list-dropdown.js

absidue · 2022-10-12T16:26:57Z

Tested updated FtPrompt
How do I escape from Select Export Type with keyboard only?

Just added a close button

Would probably be good to make the Escape key close it too (add an event listener to the document in mounted and remove it in beforeDestroy).

Co-authored-by: absidue <[email protected]>

ChunkyProgrammer · 2022-10-13T02:20:21Z

@absidue i believe that I addressed your concerns

PikachuEXE

Escape!!!

efb4f5ff-1298-471a-8973-3d47447115dc · 2022-10-13T12:06:50Z

Hi @RastislavKish Is it possible for u to help out with testing this PR? This PR only implements a part of #1525 but we want to make sure the things implemented in this PR behaves the same for u as #1525.

efb4f5ff-1298-471a-8973-3d47447115dc · 2022-10-14T06:45:25Z

i think this closes #1580

src/renderer/helpers/accessibility.js

PikachuEXE · 2022-12-01T02:35:57Z

What stuff is changed that should be tested ._.

ChunkyProgrammer · 2022-12-01T02:45:58Z

What stuff is changed that should be tested ._.

It's a pretty small change, just check that playlist sharing options work as expected . You should test it with a language like Korean, Faroese, Chinese, Japanase, Arabic or Hebrew

PikachuEXE

FtDropdown re-tested with zh-tw

github-actions · 2022-12-07T14:28:47Z

This pull request has conflicts, please resolve those before we can evaluate the pull request.

github-actions · 2022-12-07T19:37:51Z

Conflicts have been resolved. A maintainer will review the pull request shortly.

PikachuEXE · 2022-12-08T00:55:13Z

@efb4f5ff-1298-471a-8973-3d47447115dc @absidue
Let's not make this PR hanging too long?

src/renderer/components/ft-select/ft-select.vue

src/renderer/components/ft-prompt/ft-prompt.vue

improve accessibility of FreeTube input elements

0841bf3

Co-Authored-By: Jason <[email protected]>

github-actions bot added PR: dependencies Pull requests that update a dependency file PR: waiting for review For PRs that are complete, tested, and ready for review labels Oct 11, 2022

FreeTubeBot enabled auto-merge (squash) October 11, 2022 04:43

ChunkyProgrammer requested review from PikachuEXE, absidue and efb4f5ff-1298-471a-8973-3d47447115dc October 11, 2022 04:43

ChunkyProgrammer commented Oct 11, 2022

View reviewed changes

src/renderer/components/ft-list-dropdown/ft-list-dropdown.vue Outdated Show resolved Hide resolved

src/renderer/components/ft-prompt/ft-prompt.js Outdated Show resolved Hide resolved

PikachuEXE previously approved these changes Oct 11, 2022

View reviewed changes

make focus visible for prompt

7ff59cb

ChunkyProgrammer dismissed PikachuEXE’s stale review via 7ff59cb October 11, 2022 12:34

ChunkyProgrammer requested a review from PikachuEXE October 11, 2022 12:35

add close button to ft-prompt

2eb9b61

PikachuEXE previously approved these changes Oct 12, 2022

View reviewed changes

absidue reviewed Oct 12, 2022

View reviewed changes

src/renderer/components/ft-prompt/ft-prompt.vue Outdated Show resolved Hide resolved

src/renderer/components/ft-prompt/ft-prompt.js Outdated Show resolved Hide resolved

src/renderer/components/ft-prompt/ft-prompt.vue Outdated Show resolved Hide resolved

absidue reviewed Oct 12, 2022

View reviewed changes

src/renderer/components/ft-icon-button/ft-icon-button.vue Outdated Show resolved Hide resolved

src/renderer/components/ft-icon-button/ft-icon-button.vue Outdated Show resolved Hide resolved

src/renderer/components/ft-list-dropdown/ft-list-dropdown.js Outdated Show resolved Hide resolved

ChunkyProgrammer dismissed PikachuEXE’s stale review via 3d4d4b4 October 12, 2022 20:35

ChunkyProgrammer and others added 2 commits October 12, 2022 16:35

Update src/renderer/components/ft-icon-button/ft-icon-button.vue

3d4d4b4

Co-authored-by: absidue <[email protected]>

make suggested changes

669839e

ChunkyProgrammer requested review from PikachuEXE and absidue October 13, 2022 02:20

PikachuEXE previously approved these changes Oct 13, 2022

View reviewed changes

ChunkyProgrammer added the PR: waiting for review For PRs that are complete, tested, and ready for review label Nov 16, 2022

PikachuEXE previously approved these changes Nov 17, 2022

View reviewed changes

absidue reviewed Nov 30, 2022

View reviewed changes

src/renderer/helpers/accessibility.js Outdated Show resolved Hide resolved

only escape whitespace in ids

935903b

ChunkyProgrammer dismissed PikachuEXE’s stale review via 935903b November 30, 2022 16:01

Merge branch 'development' into accessibility-inputs

9383022

ChunkyProgrammer requested review from PikachuEXE and absidue November 30, 2022 16:38

PikachuEXE previously approved these changes Dec 1, 2022

View reviewed changes

github-actions bot added PR: merge conflicts / rebase needed and removed PR: waiting for review For PRs that are complete, tested, and ready for review labels Dec 7, 2022

Merge branch 'development' into accessibility-inputs

9b40faf

ChunkyProgrammer dismissed PikachuEXE’s stale review via 9b40faf December 7, 2022 19:37

github-actions bot removed the PR: merge conflicts / rebase needed label Dec 7, 2022

PikachuEXE previously approved these changes Dec 8, 2022

View reviewed changes

absidue reviewed Dec 9, 2022

View reviewed changes

src/renderer/components/ft-select/ft-select.vue Outdated Show resolved Hide resolved

src/renderer/components/ft-prompt/ft-prompt.vue Outdated Show resolved Hide resolved

use computed properties

5611cc5

ChunkyProgrammer dismissed PikachuEXE’s stale review via 5611cc5 December 9, 2022 18:06

absidue approved these changes Dec 10, 2022

View reviewed changes

PikachuEXE approved these changes Dec 10, 2022

View reviewed changes

absidue added the PR: waiting for review For PRs that are complete, tested, and ready for review label Dec 10, 2022

efb4f5ff-1298-471a-8973-3d47447115dc approved these changes Dec 11, 2022

View reviewed changes

FreeTubeBot merged commit 45953e3 into FreeTubeApp:development Dec 11, 2022

github-actions bot removed the PR: waiting for review For PRs that are complete, tested, and ready for review label Dec 11, 2022

ChunkyProgrammer deleted the accessibility-inputs branch December 11, 2022 13:27

Improve accessibility of FreeTube input elements #2709

Improve accessibility of FreeTube input elements #2709

Uh oh!

Conversation

ChunkyProgrammer commented Oct 11, 2022 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Improve accessibility of FreeTube input elements

Pull Request Type

Related issue

Description

Testing

Desktop

Additional context

Uh oh!

ChunkyProgrammer left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

PikachuEXE commented Oct 11, 2022

Uh oh!

PikachuEXE left a comment

Choose a reason for hiding this comment

Uh oh!

ChunkyProgrammer commented Oct 11, 2022 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

PikachuEXE commented Oct 12, 2022

Uh oh!

ChunkyProgrammer commented Oct 12, 2022

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

absidue commented Oct 12, 2022 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

ChunkyProgrammer commented Oct 13, 2022

Uh oh!

PikachuEXE left a comment

Choose a reason for hiding this comment

Uh oh!

efb4f5ff-1298-471a-8973-3d47447115dc commented Oct 13, 2022

Uh oh!

efb4f5ff-1298-471a-8973-3d47447115dc commented Oct 14, 2022

Uh oh!

Uh oh!

PikachuEXE commented Dec 1, 2022

Uh oh!

ChunkyProgrammer commented Dec 1, 2022 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

PikachuEXE left a comment

Choose a reason for hiding this comment

Uh oh!

github-actions bot commented Dec 7, 2022

Uh oh!

github-actions bot commented Dec 7, 2022

Uh oh!

PikachuEXE commented Dec 8, 2022

Uh oh!

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

6 participants

ChunkyProgrammer commented Oct 11, 2022 •

edited

Loading

ChunkyProgrammer commented Oct 11, 2022 •

edited

Loading

absidue commented Oct 12, 2022 •

edited

Loading

ChunkyProgrammer commented Dec 1, 2022 •

edited

Loading