Skip to content

Add aria-pressed attribute to Show/Hide post toggle buttons #3050

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
Open
4 tasks done
travis-jeans opened this issue Apr 2, 2025 · 0 comments
Open
4 tasks done

Add aria-pressed attribute to Show/Hide post toggle buttons #3050

travis-jeans opened this issue Apr 2, 2025 · 0 comments
Labels
bug Something isn't working

Comments

@travis-jeans
Copy link
Contributor

travis-jeans commented Apr 2, 2025 •
edited
Loading

Requirements

  • This is a bug report, and if not, please post to https://lemmy.ml/c/lemmy_support instead.
  • Please check to see if this issue already exists.
  • It's a single bug. Do not report multiple bugs in one issue.
  • It's a frontend issue, not a backend issue; Otherwise please create an issue on the backend repo instead.

Summary

This relates to the show hide post button immediately after post headings on the home feed.

Details

The Show/Hide buttons are basically toggle buttons, so for them to behave properly using screenreaders and report when they are opened or closed they need to have the aria-pressed attribute added to them set to "false" as the default then set to "true" when opened.

The file which needs editing is /src/shared/components/post/post-listing.tsx starting at the button element on L803 in the ShowPreviewButton() function. The state should switch depending on whether "plus-square" or "minus-square" is used.

aria-pressed (MDN Docs)

You can set the button to have aria-pressed="false" quite easily but it will not automatically switch to "true" when selected unless it is coded to do it using Typescript or Javascript. There is some information about this on the Bootstrap page on Buttons (Toggle States). Bootstrap says this will need to be added manually.

Steps to Reproduce

  1. Turn on Orca
  2. Go to the homepage
  3. Tab to element <button class="btn btn-sm btn-link link-dark link-opacity-75 link-opacity-100-hover py-0 align-baseline" type="button">...</button>
  4. Press Space Bar or Enter to toggle the button. There is no audio feedback on the button state.

Technical Details

Linux Ubuntu Jammy
On local instance or on the rblind.com instance

Lemmy Instance Version

BE: 0.19.10

Lemmy Instance URL

https://rblind.com/
@travis-jeans travis-jeans added the bug Something isn't working label Apr 2, 2025
travis-jeans added a commit to travis-jeans/lemmy-ui that referenced this issue Apr 6, 2025
@travis-jeans
Added an aria-pressed attribute to the Show Content toggle button whi…
b5d8249 
…ch will switch depending on state. Addresses issue LemmyNet#3050.
@travis-jeans travis-jeans mentioned this issue Apr 6, 2025
Merged
dessalines added a commit that referenced this issue Apr 7, 2025
@travis-jeans @dessalines @SleeplessOne1917
Add aria-pressed attribute to Show Content toggle button (#3068)
1cf5ac2 
* Changed the definition of colorList to include CSS variables named like comment-node-#-color in _variables.scss. The values are currently the default values from hsl(#) so the look is the same, but this gives theme developers a way to edit the colour of comment borders. CSS themes would need to be re-exported. Importing hsl removed from color-list as it is no longer used.

* Ran pnpm themes:build.

* Ran prettier with -w on the variables file which corrected white space formatting.

* Added an aria-pressed attribute to the Show Content toggle button which will switch depending on state. Addresses issue #3050.

---------

Co-authored-by: travis-jeans <[email protected]>
Co-authored-by: Dessalines <[email protected]>
Co-authored-by: SleeplessOne1917 <[email protected]>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
bug Something isn't working
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
1 participant
@travis-jeans