eAPD
eAPD copied to clipboard
[Accessibility] Re-evaluate subform form submission buttons
When modifying the subforms so they no longer auto-saved we had to use some less-than-ideal solutions to get it to work with with our component structure and React. We should research and determine if there's a more ideal solution that doesn't cause the below errors in WAVE. My gut is that we could tie the visible button to the form submit and we could remove the additional 2 hidden buttons.
More technical bits-
We initially used a hidden button so we could trigger the form submission from the parent component by using a react ref (useRef) hook. This worked but introduced a new issue noted in bug ticket 4047. The resolution I found to it was a stack overflow comment that adds another disabled button. So now we have two hidden inputs/buttons in the markup within the <form>
but the actual visible <button>
is outside of the form in the parent component creating this markup-
I believe we can use the form attribute on the outside button so long as we can give each form a unique ID to tie them together. https://stackoverflow.com/a/6644180/4792284
Referenced WAVE error-
This task is done when...
- [ ] No accessibility errors related to subform
- [ ] If no solution can be found, document a resolution/reason for posterity