Skip to content

Improve accessibility of page feedback links by using semantic list and ARIA label #40255

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

Merged

Conversation

SilvaEric1
Copy link
Contributor

@SilvaEric1 SilvaEric1 commented Aug 3, 2025

Proposed change

Improve the accessibility and semantics of the page feedback component:

  • Convert the group of links from a generic <div> container to a semantic <ul> list.
  • Add aria-label="Page feedback options" to the list to provide better context for screen reader users.
  • Update link title to be more descriptive (e.g., "Edit this page" instead of "Edit").
  • Add supporting CSS in screen.css:
    .feedback .links ul {
        list-style: none;
    }
    
    .feedback .links li {
        display: inline;
    }

These changes improve semantic structure and relationships for assistive technologies, aligning with WCAG 2.1 A 1.3.1 (Info and Relationships).

Type of change

  • Spelling, grammar or other readability improvements (current branch).
  • Adjusted missing or incorrect information in the current documentation (current branch).
  • Added documentation for a new integration I'm adding to Home Assistant (next branch).
  • Added documentation for a new feature I'm adding to Home Assistant (next branch).
  • Removed stale or deprecated documentation.

Additional information

  • Link to parent pull request in the codebase: N/A
  • Link to parent pull request in the Brands repository: N/A
  • This PR fixes or closes issue: fixes # N/A

Checklist

  • This PR uses the correct branch, based on one of the following:
    • I made a change to the existing documentation and used the current branch.
    • I made a change that is related to an upcoming version of Home Assistant and used the next branch.
  • The documentation follows the Home Assistant documentation standards.

@home-assistant home-assistant bot added the current This PR goes into the current branch label Aug 3, 2025
Copy link

netlify bot commented Aug 3, 2025

Deploy Preview for home-assistant-docs ready!

Name Link
🔨 Latest commit 9c59214
🔍 Latest deploy log https://app.netlify.com/projects/home-assistant-docs/deploys/6891c91c1412140008e687db
😎 Deploy Preview https://deploy-preview-40255--home-assistant-docs.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify project configuration.

Copy link
Contributor

@mrdarrengriffin mrdarrengriffin left a comment

Choose a reason for hiding this comment

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

Thanks for the contribution @SilvaEric1.

I see you have updated screen.css but this is a compiled stylesheet and will be overwritten during build. If you want to make changes to .feedback, please do it in the scss file here

Then run bundle exec rake generate to generate the build files before commiting.

Thanks!

@home-assistant
Copy link

home-assistant bot commented Aug 4, 2025

Please take a look at the requested changes, and use the Ready for review button when you are done, thanks 👍

Learn more about our pull request process.

@home-assistant home-assistant bot marked this pull request as draft August 4, 2025 08:47
@SilvaEric1 SilvaEric1 force-pushed the accessibility-improvements branch from 7b5b327 to 2c03506 Compare August 4, 2025 12:48
@SilvaEric1 SilvaEric1 force-pushed the accessibility-improvements branch from 2c03506 to 6d9864c Compare August 4, 2025 12:53
@SilvaEric1 SilvaEric1 marked this pull request as ready for review August 4, 2025 13:06
@SilvaEric1
Copy link
Contributor Author

Thank you @mrdarrengriffin! I've recommitted using the _overrides.scss.

@mrdarrengriffin mrdarrengriffin merged commit 3652a68 into home-assistant:current Aug 5, 2025
7 checks passed
@github-actions github-actions bot locked and limited conversation to collaborators Aug 6, 2025
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
current This PR goes into the current branch
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants