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

Add route announcer #124

Closed
arctic-hen7 opened this issue Jan 25, 2022 · 1 comment
Closed

Add route announcer #124

arctic-hen7 opened this issue Jan 25, 2022 · 1 comment
Labels
A-a11y Area: accessibility A-router Area: router author-willing-to-impl The author of this issue is willing to try to implement the solution themselves. C-enhancement Category: enhancement tribble-reported This issue was reported through Tribble.

Comments

@arctic-hen7
Copy link
Member

This issue is requesting an enhancement to Perseus. Details of the scope will be available in issue labels.
The user described the problem related to this request as follows:

Right now, Perseus route changes aren't great for accessibility at all. The reason for this is that screen readers don't know that a page change has occurred, and users dependent on these technologies would have no idea that such a change had actually occurred.

The user described the issue as follows:

This can be remedied quite simply with a route announcer (similar to the one used by NextJS), which would be a Sycamore component with the appropriate ARIA settings at the root of the app (automatically inserted next to __perseus_content). Then, this could listen for changes to the router state and announce the title of each new page once it loads. Obviously, we shouldn't do this for the first page, because screen readers will get that one right. The way the NextJS system does this is announcing the document title, falling back to the first h1 and then falling back to the page path, which should be trivial with Perseus' router infrastructure. This would all be done once the page loads, and title/h1 extraction would be done with web_sys. Notably, some apps will use their own behavior for this functionality, so this will be able to be disabled with a setting in define_app!. (As a side note, I do want to keep adding config options there, because it can then act as a single source of truth, rather than some custom, and difficult to debug, config file.)

  • The author is willing to attempt an implementation: true
Tribble internal data

dHJpYmJsZS1yZXBvcnRlZCxDLWVuaGFuY2VtZW50LGF1dGhvci13aWxsaW5nLXRvLWltcGw=

@github-actions github-actions bot added author-willing-to-impl The author of this issue is willing to try to implement the solution themselves. C-enhancement Category: enhancement tribble-reported This issue was reported through Tribble. labels Jan 25, 2022
@arctic-hen7 arctic-hen7 added A-router Area: router A-a11y Area: accessibility labels Jan 25, 2022
@arctic-hen7
Copy link
Member Author

Here's the NextJS route announcer for reference (I think this is a pretty good standard to follow in this case).

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
A-a11y Area: accessibility A-router Area: router author-willing-to-impl The author of this issue is willing to try to implement the solution themselves. C-enhancement Category: enhancement tribble-reported This issue was reported through Tribble.
Projects
None yet
Development

No branches or pull requests

1 participant