Implement accessible tabs #1
Conversation
|
Probably travis fails due to misconfiguration https://docs.cypress.io/guides/guides/continuous-integration.html#Travis. You can try to fix it or I will do it later myself |
|
Code looks reasonable. It can happen that I wrote wrong tests. Need to investigate |
|
@stereobooster I have been looking at the tests, and it seems like they should pass, but I am not familiar with the Cypress API, so I don't know why it can't find the elements it's looking for. |
|
in the first console in the second console and see tests running in the browser |
|
Here is one of the ways how to fix it 3aca842 UPD I fixed tests in master. Remove latest commit from this PR (so you would not have conflicts) and rebase |
|
@stereobooster I added the delete function and changed a few of the the timeouts in the tests |
| break; | ||
| case "Delete": | ||
| e.preventDefault(); | ||
| setActiveTab(activeTab === 0 ? content.length - 1 : activeTab - 1); |
There was a problem hiding this comment.
Why make tab active before deleting it? I wonder where focus will go after we delete element from the DOM 🤔
| key={i} | ||
| index={i} | ||
| selected={activeTab === i} | ||
| id={tab.title.split(" ").join("-")} |
There was a problem hiding this comment.
if tabs will have the same names (why not?) it will result in duplicate IDs
| type="button" | ||
| aria-selected={selected} | ||
| aria-controls={`${id}-tab`} | ||
| id={`${id}-tab`} |
There was a problem hiding this comment.
aria-controls={`${id}-tab`}
id={`${id}-tab`}
button controls itself 🤔
This is a very basic implementation with no bells and whistles whatsoever. In response to https://dev.to/stereobooster/can-you-create-react-accessible-component-45j1.