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.

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

Fix/ Improve accessibility of playlist icon buttons #4943

Merged
merged 5 commits into from
Apr 14, 2024
Merged

Fix/ Improve accessibility of playlist icon buttons #4943

merged 5 commits into from
Apr 14, 2024

Conversation

sossost
Copy link
Contributor

@sossost sossost commented Apr 13, 2024

Title

Improve accessibility of playlist icon buttons

Pull Request Type

  • Bugfix
  • Feature Implementation
  • Documentation
  • Other

Related issue

closes #4940

Description

The aria-pressed attribute has been added to playlist icon buttons.
In addition, the line thickness when the icon is deactivated has been adjusted to be slightly thinner, and when activated, the line thickness has been adjusted to be slightly thicker, so that it is possible to tell whether the icon is activated through not only the color but also the thickness of the icon.

Screenshots

before before

after after

Testing

Desktop

  • OS: macOs
  • OS Version: Sonoma 14.4.1
  • FreeTube version: v0.20.0 Beta

Additional context

@github-actions github-actions bot added the PR: waiting for review For PRs that are complete, tested, and ready for review label Apr 13, 2024
@FreeTubeBot FreeTubeBot enabled auto-merge (squash) April 13, 2024 14:57
Comment on lines 58 to 64
.playlistIcon:hover {
background-color: var(--side-nav-hover-color);
color: var(--side-nav-hover-text-color);
stroke-width: 10;
stroke: var(--side-nav-hover-text-color);
transition: background 0.2s ease-in;
}
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
.playlistIcon:hover {
background-color: var(--side-nav-hover-color);
color: var(--side-nav-hover-text-color);
stroke-width: 10;
stroke: var(--side-nav-hover-text-color);
transition: background 0.2s ease-in;
}
.playlistIcon:hover {
background-color: var(--side-nav-hover-color);
color: var(--side-nav-hover-text-color);
transition: background 0.2s ease-in;
}

This looks great @sossost, thanks for doing this so quickly! My only suggestion is that we keep the inactive hover state the same, as otherwise this makes it seem like it's active.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks for the feedback, @jasonhenriquez! I appreciate your quick review. I agree with keeping the inactive hover state unchanged to avoid confusion about its activity status.
In this case, need to change the stroke color to the hover background color without deleting the style from the hover properties.
I used stroke color to make the icons thin without changing them.
스크린샷 2024-04-14 오전 1 24 13
스크린샷 2024-04-14 오전 1 23 57

I'll make the necessary adjustments and update the pull request shortly.

Copy link
Collaborator

@kommunarr kommunarr Apr 13, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks for the update! However, It's now not keeping the wider stoke width on active hover. You can add an additional rule for .playlistIconActive:hover. I think it's a mistake in the existing implementation that the active color is lost on hover.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks for pointing that out! I missed updating the stroke width for the active hover state. I'll add a rule for .playlistIconActive:hover to ensure the wider stroke width and active color are maintained during hover. I'll make this change and update the pull request shortly.

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks @sossost! This is working perfectly now. My last thought is that while we're here, can you make the .playlistIconActive:hover's stroke & color be --accent-color-hover? I think this was another pre-existing bug I didn't even notice.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks, @ jasonhenriquez! I'm glad to hear it's working well now. I agree with your suggestion to update the .playlistIconActive:hover stroke and color to --accent-color-hover. It sounds like a good catch on a pre-existing issue. I'll make these changes and push the update soon.

auto-merge was automatically disabled April 13, 2024 16:29

Head branch was pushed to by a user without write access

@FreeTubeBot FreeTubeBot enabled auto-merge (squash) April 13, 2024 16:29
auto-merge was automatically disabled April 13, 2024 17:02

Head branch was pushed to by a user without write access

@FreeTubeBot FreeTubeBot enabled auto-merge (squash) April 13, 2024 17:02
auto-merge was automatically disabled April 14, 2024 00:37

Head branch was pushed to by a user without write access

@FreeTubeBot FreeTubeBot enabled auto-merge (squash) April 14, 2024 00:38
Copy link
Collaborator

@kommunarr kommunarr left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Awesome stuff. This looks much better to use and is now far more accessible to our disabled users as well. LGTM

@sossost
Copy link
Contributor Author

sossost commented Apr 14, 2024

@jasonhenriquez Thank you so much for taking the time to review and for your positive feedback! I'm happy to hear that the changes improve usability and accessibility. I love working together to improve the experience for all our users.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks for addressing this @sossost :)

@FreeTubeBot FreeTubeBot merged commit e087008 into FreeTubeApp:development Apr 14, 2024
6 checks passed
@github-actions github-actions bot removed the PR: waiting for review For PRs that are complete, tested, and ready for review label Apr 14, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

[Bug]: Playlist action icon accessibility issues
5 participants