Improve accessibility and some minor css fixes #6470

Merged
btzr-io merged 44 commits from accessibility into master 2021-07-30 03:39:32 +02:00
btzr-io commented 2021-07-13 22:22:46 +02:00 (Migrated from github.com)

PR Checklist

Please check all that apply to this PR using "x":

  • I have checked that this PR is not a duplicate of an existing PR (open, closed or merged)
  • I added a line describing my change to CHANGELOG.md
  • I have checked that this PR does not introduce a breaking change
  • This PR introduces breaking changes and I have provided a detailed explanation below

PR Type

What kind of change does this PR introduce?

  • Bugfix
  • Feature
  • Code style update (formatting)
  • Refactoring (no functional changes)
  • Documentation changes
  • Other - Please describe:

Fixes

Issue Number: #4046, #5991, #6480, #5145, #6483, #6582, #6635, #6602, #6503
Changelog update: #6735

Todo

  • Use aria-hidden for all icons by default ?
  • Use aria-hidden for some images / thumbnails ? ( https://web.dev/aria-hidden-focus/ )
  • Improve tile cards accessibility.
  • Improve header accessibility. ( Skip navigation link https://www.a11ymatters.com/pattern/skip-link/ )
  • Better css style for skip navigation link ?
  • Change focus order of skip nav link ( Make it first element )
  • Fix repost button accessibility
## PR Checklist <!-- For the checkbox formatting to work properly, make sure there are no spaces on either side of the "x" --> Please check all that apply to this PR using "x": - [x] I have checked that this PR is not a duplicate of an existing PR (open, closed or merged) - [x] I added a line describing my change to CHANGELOG.md - [x] I have checked that this PR does not introduce a breaking change - [ ] This PR introduces breaking changes and I have provided a detailed explanation below ## PR Type What kind of change does this PR introduce? - [x] Bugfix - [x] Feature - [x] Code style update (formatting) - [x] Refactoring (no functional changes) - [ ] Documentation changes - [ ] Other - Please describe: ## Fixes Issue Number: #4046, #5991, #6480, #5145, #6483, #6582, #6635, #6602, #6503 Changelog update: #6735 ## Todo - [x] Use aria-hidden for all icons by default ? - [x] Use aria-hidden for some images / thumbnails ? ( https://web.dev/aria-hidden-focus/ ) - [x] Improve tile cards accessibility. - [x] Improve header accessibility. ( Skip navigation link https://www.a11ymatters.com/pattern/skip-link/ ) - [ ] Better css style for skip navigation link ? - [x] Change focus order of skip nav link ( Make it first element ) - [x] Fix repost button accessibility
jessopb (Migrated from github.com) reviewed 2021-07-13 22:22:46 +02:00
tzarebczan commented 2021-07-14 00:11:32 +02:00 (Migrated from github.com)

I haven't filed this one, but I remember someone mention accessibility issues around the playlist feature - somewhere in the pop up menus. Can you take a peek?

I haven't filed this one, but I remember someone mention accessibility issues around the playlist feature - somewhere in the pop up menus. Can you take a peek?
btzr-io commented 2021-07-14 00:59:10 +02:00 (Migrated from github.com)

I haven't filed this one, but I remember someone mention accessibility issues around the playlist feature - somewhere in the pop up menus. Can you take a peek?

What issues ? Need more info

> > > I haven't filed this one, but I remember someone mention accessibility issues around the playlist feature - somewhere in the pop up menus. Can you take a peek? What issues ? Need more info
btzr-io commented 2021-07-14 03:05:53 +02:00 (Migrated from github.com)
https://www.accessibility-developer-guide.com/
btzr-io commented 2021-07-15 05:30:34 +02:00 (Migrated from github.com)

Skip navigation feature: Useful for screen reader users ( tested with NVDA, windows narrator )

SkipNavigationLink

Other apps

Reddit.com

image

Youtube.com

image

Skip navigation feature: Useful for screen reader users ( tested with NVDA, windows narrator ) ![SkipNavigationLink](https://user-images.githubusercontent.com/14793624/125724726-b155ab38-095b-4069-95ca-cea17a2a8f45.gif) ### Other apps Reddit.com ![image](https://user-images.githubusercontent.com/14793624/125725141-9d57ed75-85ce-49b0-900b-0e8266924b60.png) Youtube.com ![image](https://user-images.githubusercontent.com/14793624/125725029-c6994ea2-3262-4412-b060-eead8f3d20fa.png)
btzr-io commented 2021-07-16 01:21:59 +02:00 (Migrated from github.com)

New aria-label format for claim preview links:
This includes additional information of the claim.

See youtube website for reference.

%title% by %channelTitle% %date%, %mediaDuration%

Screen reader example

Narrator: "Link Awesome Cats! by Animals 2 hours ago, one minute (00:10:00)"

Todo

Include more info ? ( file type, price ) ?

New aria-label format for claim preview links: This includes additional information of the claim. See youtube website for reference. ``` %title% by %channelTitle% %date%, %mediaDuration% ``` Screen reader example ``` Narrator: "Link Awesome Cats! by Animals 2 hours ago, one minute (00:10:00)" ``` ### Todo Include more info ? ( file type, price ) ?
btzr-io commented 2021-07-16 09:31:19 +02:00 (Migrated from github.com)

Waiting for review or feedback before any more changes.

Waiting for review or feedback before any more changes.
btzr-io (Migrated from github.com) reviewed 2021-07-16 09:37:36 +02:00
btzr-io (Migrated from github.com) commented 2021-07-16 09:37:36 +02:00

Should I move this component to its own file ?

Should I move this component to its own file ?
infinite-persistence (Migrated from github.com) reviewed 2021-07-21 14:06:12 +02:00
infinite-persistence (Migrated from github.com) commented 2021-07-20 19:25:25 +02:00

Split-strings are hard to translate and is something that we've been actively cleaning up.
https://phrase.com/blog/posts/10-common-mistakes-in-software-localization/#4_Concatenated_Strings

Use full sentences with variables so that translators can shift words as needed.

Split-strings are hard to translate and is something that we've been actively cleaning up. https://phrase.com/blog/posts/10-common-mistakes-in-software-localization/#4_Concatenated_Strings Use full sentences with variables so that translators can shift words as needed.
jessopb (Migrated from github.com) approved these changes 2021-07-22 04:33:09 +02:00
btzr-io (Migrated from github.com) reviewed 2021-07-23 09:24:17 +02:00
@ -236,6 +236,7 @@
&:focus {
box-shadow: none;
background-color: var(--color-button-alt-bg);
btzr-io (Migrated from github.com) commented 2021-07-23 09:24:17 +02:00

Fix #6503

Fix #6503
infinite-persistence commented 2021-07-29 05:40:52 +02:00 (Migrated from github.com)

@btzr-io , can you make one final rebase to resolve the conflicts? Will get this in soon.

@btzr-io , can you make one final rebase to resolve the conflicts? Will get this in soon.
infinite-persistence (Migrated from github.com) requested changes 2021-07-29 09:13:57 +02:00
infinite-persistence (Migrated from github.com) left a comment

One more minor fix needed

One more minor fix needed
@ -0,0 +28,4 @@
}
}
return ariaLabelData;
infinite-persistence (Migrated from github.com) commented 2021-07-29 09:04:50 +02:00

I think we forgot to remove the +=?

I think we forgot to remove the `+=`? <img src="https://user-images.githubusercontent.com/64950861/127447038-08f215ba-663f-4670-bdab-2736eca4215f.png" width="400">
btzr-io commented 2021-07-29 22:43:31 +02:00 (Migrated from github.com)

Changelog update: #6735

Changelog update: #6735
Sign in to join this conversation.
No milestone
No project
No assignees
1 participant
Notifications
Due date
The due date is invalid or out of range. Please use the format "yyyy-mm-dd".

No due date set.

Dependencies

No dependencies set.

Reference: LBRYCommunity/lbry-desktop#6470
No description provided.