eAPD icon indicating copy to clipboard operation
eAPD copied to clipboard

[Accessibility] Re-evaluate subform form submission buttons

Open tbolt opened this issue 2 years ago • 0 comments

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- Screen Shot 2022-06-23 at 11.06.28 AM.png 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- Screen Shot 2022-06-23 at 10.10.35 AM.png

This task is done when...

  • [ ] No accessibility errors related to subform
    element
  • [ ] If no solution can be found, document a resolution/reason for posterity

tbolt avatar Jun 23 '22 15:06 tbolt