Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Add missing labels to increase accessibility #2573

Open
aayyuussh opened this issue Jul 19, 2023 · 8 comments · May be fixed by #2960
Open

Add missing labels to increase accessibility #2573

aayyuussh opened this issue Jul 19, 2023 · 8 comments · May be fixed by #2960
Assignees
@volfiros
Labels
frontend All things frontend development related good first issue Good for newcomers

Comments

@aayyuussh
Copy link

aayyuussh commented Jul 19, 2023 •
edited
Loading

Feature description

I had tested using a screen reader with keyboard only, and found the following problems that can be improved to increase accessibility.

  1. The balance show is not labeled so to check balance we have to go to alby accounts.
    image

  2. Recent Transactions are also not labeled. Outgoing and incoming are not changing with the tab button. We have to select incoming by right arrow key, so if any person who is blind uses it he/she may be unaware about this field and how to select it.

image

  1. Incoming transactions are not labeled. We can make them dynamic also so we can also see who send them.
    image

  2. With keyboard we are unable to select ‘See all Transactions’
    image

  3. On the receiving screen we have only these fields labeled so we can also label qr code to scan and other remaining also.
    image

  4. Here on the send screen there is no label on amount which can help for the amount confirmation and how much amount they are sending.
    image

  5. On the success screen there is no level or any announcement for the success of the transaction.
    image

  6. When we click on these dropdowns then we are not able to select the dropdown option with tab , we have to use arrow keys which make it difficult for any blink user to judge what he/she has to do.
    image

Describe the solution

  1. Every information on the screen or any CTA should be labeled. Here on the home screen the amount should be labeled.
    image 1

  2. To switch between outgoing and incoming we can use tab and to get more detail about individual we can get them by click enter.

  3. 'Recent Transactions' should be labeled and 'See all transactions' should be labeled and clickable.
    Group 2

  4. For incoming tab when we select any particular transaction the transaction should be spelled like: 'Message: XXX'
    Group 3

  5. For receiving screen following should also be labeled
    Group 4

  6. For sending there should be conformation of amount
    Group 5

  7. Also there should be label for the success screen also.
    Group 6

Describe alternatives

No response

Additional context

No response

Are you working on this?

Yes
@aayyuussh aayyuussh added the idea A feature idea that needs to be more specification label Jul 19, 2023
@stackingsaunter stackingsaunter added good first issue Good for newcomers frontend All things frontend development related and removed idea A feature idea that needs to be more specification labels Jul 19, 2023
@stackingsaunter
Copy link
Contributor

@aayyuussh can you propose labels for every part where it's different than copy or for elements without copy (like "Close Button" or QR code)?

@stackingsaunter stackingsaunter changed the title Changes to be done on alby extension to increase accessibility Add missing labels to increase accessibility Jul 24, 2023
@stackingsaunter
Copy link
Contributor

stackingsaunter commented Jul 24, 2023 •
edited
Loading

  1. Re: balance: I think it's better to keep it shorter so it doesn't take that much time If someone uses it, eg.:
    "Balance: XXX satoshi, $0.80"

  2. For incoming tab when we select any particular transaction the transaction should be spelled like: ‘Incoming from Alby invoice’

My recent Incoming transactions look like this:
image

It's not about the sender, but a message attached. So the label could be Message: XXX

  1. For receiving screen following should also be labeled

The label on QR code could be QR code with the invoice.
They copy invoice by clicking the button. Scanning the invoice will just read it in the app (not have it copied in the clipboard).

The rest is good, thanks @aayyuussh!

@volfiros
Copy link
Contributor

volfiros commented Sep 7, 2023

@aayyuussh are u still working on it?
I am ready to work on this @stackingsaunter @rolznz

@stackingsaunter
Copy link
Contributor

Great, go ahead @Rithvik-padma

@volfiros
Copy link
Contributor

Recent Transactions are also not labeled. Outgoing and incoming are not changing with the tab button. We have to select incoming by right arrow key, so if any person who is blind uses it he/she may be unaware about this field and how to select it.

image

@stackingsaunter Here we cannot use the tab key to toggle between Outgoing and Incoming tabs as the default functionality is when the outgoing tab is selected and if the triggers the tab key then the outgoing transactions at the bottom will be focused, if we use the tab key for switching of tabs then this functionality would not be possible.
Instead maybe we can use a custom label for "Recent transactions" text, somewhat like "use arrow keys to switch tabs".
I found that even the tabs in the chrome web store webpage are configured in the same way (arrow keys to switch tabs) - used a screen reader for it.

@stackingsaunter
Copy link
Contributor

@Rithvik-padma hey, actually we will be sunsetting those tabs soon... Sorry I didn't mentioned that earlier. There will be just one list of transactions. So perhaps you can just skip this part

@volfiros
Copy link
Contributor

@Rithvik-padma hey, actually we will be sunsetting those tabs soon... Sorry I didn't mentioned that earlier. There will be just one list of transactions. So perhaps you can just skip this part

For now I am just adding the outline when the tabs are focused just like other buttons

@volfiros volfiros mentioned this issue Sep 16, 2023
Closed
5 tasks
volfiros added a commit to volfiros/lightning-browser-extension that referenced this issue Sep 16, 2023
@volfiros
Merge branch 'master' into getAlby#2573
d903735
volfiros added a commit to volfiros/lightning-browser-extension that referenced this issue Sep 18, 2023
@volfiros
Merge branch 'master' into getAlby#2573
f6d38f2
@volfiros
Copy link
Contributor

As the PR I made before has a lot of merger conflicts and as a lot of changes have to be done I have closed it.
I will make a new PR for the new changes.

volfiros added a commit to volfiros/lightning-browser-extension that referenced this issue Dec 23, 2023
@volfiros
Merge branch 'getAlby#2573' of https://github.com/Rithvik-padma/light…
ab9deaf 
…ning-browser-extension into getAlby#2573
@volfiros volfiros linked a pull request Dec 23, 2023 that will close this issue
Open
4 tasks
volfiros added a commit to volfiros/lightning-browser-extension that referenced this issue Dec 25, 2023
@volfiros
Merge branch 'master' into getAlby#2573
6121ffd
volfiros added a commit to volfiros/lightning-browser-extension that referenced this issue Dec 25, 2023
@volfiros
Merge branch 'master' into getAlby#2573
a8bc616
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@volfiros volfiros

Labels
frontend All things frontend development related good first issue Good for newcomers
Projects
None yet
Milestone
No milestone
3 participants
@stackingsaunter @aayyuussh @volfiros