Description
Increasing Access
Using standard HTML <a>
tags for links is more semantically correct and allows for standard right-click behavior.
Feature enhancement details
There are multiple places in the app where we use tabs to switch between content. Some of these are coded using the react-tabs
package, while others use <Link>
elements from react-router-dom
.
It is my opinion that we should use the react-router-dom
approach in situations where the tabs have different URLs but I want to open this up for discussion.
Advantages of react-router-dom
- We can use the router to control the content on the page, instead of manually switching based on
pathname
p5.js-web-editor/client/modules/Legal/pages/Legal.jsx
Lines 37 to 45 in 185a0b1
- We don't need any callback function when changing tabs.
p5.js-web-editor/client/modules/Legal/pages/Legal.jsx
Lines 47 to 59 in 185a0b1
- We can automatically highlight the current tab using the
NavLink
component (instead ofLink
) https://reactrouter.com/en/main/components/nav-link - Links render as HTML
<a>
elements which is more semantically correct and allows for standard right-click behavior.
- Screen readers understand links, and they can be focused using Tab navigation.
Current Usage
Legal page - uses react-tabs
https://github.com/processing/p5.js-web-editor/blob/185a0b1ed3cef02957bd9bc04d25b33c33eee11d/client/modules/Legal/pages/Legal.jsx
Dashboard page - uses react-router-dom
(with manual routing and highlighting that I would like to clean up)
https://github.com/processing/p5.js-web-editor/blob/185a0b1ed3cef02957bd9bc04d25b33c33eee11d/client/modules/User/components/DashboardTabSwitcher.jsx
Preferences modal - uses react-tabs
This would stay as-is because there is no URL change involved
https://github.com/processing/p5.js-web-editor/blob/185a0b1ed3cef02957bd9bc04d25b33c33eee11d/client/modules/IDE/components/Preferences/index.jsx