Add missing labels to increase accessibility

[aayyuussh]

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.
   

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.

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

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

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

6. 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.
   

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

8. 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.
   

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.
   

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.
   

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

5. For receiving screen following should also be labeled
   

6. For sending there should be conformation of amount
   

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

Describe alternatives

No response

Additional context

No response

Are you working on this?

Yes

[stackingsaunter]

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

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:

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

5. 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!

[Rithvik-padma]

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

[stackingsaunter]

Great, go ahead @Rithvik-padma

[Rithvik-padma]

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.

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

@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

[Rithvik-padma]

@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

[Rithvik-padma]

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.