| commit | 8026797012a0cbdce357a5c47304134fec9eca73 | [log] [tgz] |
|---|---|---|
| author | Derick Montague <derick.montague@ibm.com> | Tue Feb 16 09:47:03 2021 -0600 |
| committer | Derick Montague <derick.montague@ibm.com> | Tue Feb 16 21:27:55 2021 +0000 |
| tree | 8b10dc9cb962d56e8b55c36a955d00a137762be9 | |
| parent | 2f469b9262e0c847746447948f055692b3436fcc [diff] |
Fix skip link 404 error on refresh bug Problem: When a user uses the skip link anchor to skip the navigation, the route was being changed to /#main-content. This route does not exist. If a user were to manually refresh the page, it would return a 404. This link is critical to meet accessibility guidelines and is needed by users that navigate with a keyboard. The challenge is that we need to mirror a full page refresh on all route changes, so we set focus on the app-header element on each route change. When we click the skip to navigation link, there should not be a route change. All we need is to set focus on the <main> element so that the user can tab to the first tabbable element in the main content section. Solution: - Use a native <a> element with an attached click event handler - Prevent the default action of adding the hash to the URL - Create a global mixin to reuse for route changes and skip link activation - Emit an event that can be listened for to call the global mixin Signed-off-by: Derick Montague <derick.montague@ibm.com> Change-Id: I4c2301b02f608eeb376ed2d1bd809f3d5c1bf545
webui-vue is a web-based user interface for the OpenBMC firmware stack built on Vue.js.
phosphor-webui was built on AngularJS and AngularJS goes End of Life June 30, 2021, this repository is its replacement.
Several, mostly minor, features remain for feature parity. See GitHub Issues label:phosphor-webui-feature-parity for the complete list.
As mentioned, this application is built using Vue.js, a modern open-source Model-View-ViewModel JavaScript framework supported by an active community and strong documentation. It has been architected to allow organizations to easily update the theme to support their brand. This rewrite takes advantage of front-end development best practices and does not suffer from some of the anti-patterns that exist in phosphor-webui today.
That is up to you. Several companies have switched.
webui-vue although still missing a few features that were in phosphor-webui, as mentioned above, has the following additional features:
The documentation for coding standards and components is located in the docs directory. It is created using the VuePress static site generator. Information about how to write documentation can be found on the VuePress website.