[Feature Request]: Toggle `[aria-busy]` On Container Being Replaced Instead Of Document Element

by ADMIN 96 views

Describe the Problem

Accessibility is a crucial aspect of web development, and ensuring that our applications are accessible to everyone is essential. The @swup/a11y-plugin is a valuable tool for improving accessibility in our applications, but it has a limitation that can be improved. Currently, the plugin toggles the [aria-busy] attribute on the document element, which may not be the most practical solution, especially when paired with the @swup/forms-plugin.

As mentioned in the issue swup/forms-plugin#81, the [aria-busy] attribute is always applied to the documentElement, regardless of whether the visit is a standard swup navigation or triggered by @swup/fragment-plugin or @swup/forms-plugin. This can be problematic, especially when using the forms plugin, as it would be more practical to have the attribute on the <form> element specifically.

Describe the Proposed Solution

The proposed solution is to allow one to automatically toggle [aria-busy] on a container instead of the documentElement when the navigation occurs on a non-page-level element such as a form. This would enable developers to improve accessibility in their applications by providing a more practical solution for handling [aria-busy] attributes.

Alternatives Considered

One alternative to this feature is to use existing hooks to manually toggle [aria-busy] on the affected container. While this solution is possible, it would require additional development effort and may not be as efficient as having a built-in solution.

How Important is this Feature to You?

This feature is considered a "nice to have" by the developer who submitted the issue. While it is not essential, it would improve the accessibility of the application and provide a more practical solution for handling [aria-busy] attributes.

Checked All These?

Yes, the developer who submitted the issue has checked the following:

  • I have read and searched the official docs: The developer has reviewed the official documentation for @swup/a11y-plugin and @swup/forms-plugin.
  • I have checked discussions and existing issues for related problems: The developer has searched for related issues and discussions on the @swup organization's GitHub page.
  • I agree to follow this project's Code of Conduct: The developer agrees to follow the Code of Conduct for the @swup project.
  • I have provided all necessary information to the best of my knowledge: The developer has provided all necessary information to the best of their knowledge.

Why is this Feature Important?

This feature is important because it would improve the accessibility of applications that use @swup/a11y-plugin and @swup/forms-plugin. By allowing developers to toggle [aria-busy] on a container instead of the documentElement, this feature would provide a more practical solution for handling [aria-busy] attributes.

How Would this Feature be Implemented?

To implement this feature, the following steps would be taken:

  1. Review the existing code: The existing code for @swup/a11y-plugin and @swup/forms-plugin would be reviewed to understand how [aria-busy] attributes are currently handled.
  2. Identify the necessary changes: The necessary changes to allow [aria-busy] to be toggled on a container instead of the documentElement would be identified.
  3. Implement the changes: The changes would be implemented in the code for @swup/a11y-plugin and @swup/forms-plugin.
  4. Test the changes: The changes would be tested to ensure that they work as expected.

Conclusion

In conclusion, the proposed feature to toggle [aria-busy] on a container instead of the documentElement would improve the accessibility of applications that use @swup/a11y-plugin and @swup/forms-plugin. This feature is considered a "nice to have" by the developer who submitted the issue, but it would provide a more practical solution for handling [aria-busy] attributes. By implementing this feature, developers would be able to improve the accessibility of their applications and provide a better experience for users.

Future Work

Future work on this feature could include:

  • Improving the implementation: The implementation of this feature could be improved by adding additional functionality or optimizing the code.
  • Testing and validation: The feature could be tested and validated to ensure that it works as expected in different scenarios.
  • Documentation and support: Documentation and support for this feature could be improved to help developers understand how to use it effectively.

References

Q: What is the current issue with [aria-busy] attribute in @swup/a11y-plugin?

A: The current issue is that the [aria-busy] attribute is always applied to the documentElement, regardless of whether the visit is a standard swup navigation or triggered by @swup/fragment-plugin or @swup/forms-plugin. This can be problematic, especially when using the forms plugin, as it would be more practical to have the attribute on the <form> element specifically.

Q: Why is it more practical to have [aria-busy] attribute on the <form> element?

A: Having the [aria-busy] attribute on the <form> element specifically when using the forms plugin would provide a more practical solution for handling [aria-busy] attributes. This is because the <form> element is the container that is being replaced during navigation, and having the attribute on this element would provide a more accurate representation of the application's state.

Q: What is the proposed solution to this issue?

A: The proposed solution is to allow one to automatically toggle [aria-busy] on a container instead of the documentElement when the navigation occurs on a non-page-level element such as a form. This would enable developers to improve accessibility in their applications by providing a more practical solution for handling [aria-busy] attributes.

Q: How would this feature be implemented?

A: To implement this feature, the following steps would be taken:

  1. Review the existing code: The existing code for @swup/a11y-plugin and @swup/forms-plugin would be reviewed to understand how [aria-busy] attributes are currently handled.
  2. Identify the necessary changes: The necessary changes to allow [aria-busy] to be toggled on a container instead of the documentElement would be identified.
  3. Implement the changes: The changes would be implemented in the code for @swup/a11y-plugin and @swup/forms-plugin.
  4. Test the changes: The changes would be tested to ensure that they work as expected.

Q: What are the benefits of implementing this feature?

A: The benefits of implementing this feature include:

  • Improved accessibility: This feature would improve the accessibility of applications that use @swup/a11y-plugin and @swup/forms-plugin.
  • More practical solution: This feature would provide a more practical solution for handling [aria-busy] attributes.
  • Better user experience: This feature would enable developers to provide a better user experience by providing a more accurate representation of the application's state.

Q: How can I contribute to this feature?

A: If you are interested in contributing to this feature, you can:

  • Review the existing code: Review the existing code for @swup/a11y-plugin and @swup/forms-plugin to understand how [aria-busy] attributes are currently handled.
  • Identify the necessary changes: Identify the necessary changes to allow [aria-busy] to be toggled on a container instead of the documentElement.
  • Implement the changes: Implement the changes in the code for @swup/a11y-plugin and @swup/forms-plugin.
  • Test the changes: Test the changes to ensure that they work as expected.

Q: What are the next steps for this feature?

A: The next steps for this feature include:

  • Implementing the feature: Implementing the feature in the code for @swup/a11y-plugin and @swup/forms-plugin.
  • Testing the feature: Testing the feature to ensure that it works as expected.
  • Documenting the feature: Documenting the feature to provide guidance on how to use it effectively.

Q: How can I stay up-to-date with the progress of this feature?

A: You can stay up-to-date with the progress of this feature by:

  • Following the issue: Following the issue on GitHub to receive updates on the progress of the feature.
  • Subscribing to the project's newsletter: Subscribing to the project's newsletter to receive updates on the progress of the feature.
  • Checking the project's documentation: Checking the project's documentation to see if there are any updates on the feature.