Separate the Nested Labels and Inputs for Embargo and Lease

[mtribone]

Descriptive summary

In Hyrax 2.0.0 alpha the Save Work widget has nested HTML that is confusing for users of assistive technology when attempting to set the visibility to embargo or lease. Pull inputs out of nested <label> element and refactor HTML for better accessibility.

Rationale

There is too much nested functionality inside of an <li> ; for example, ' with <input> and <span> and <div>. It did not test well with users of assistive technology.

Expected behavior

Expect users of assistive technology to be able to easily create works and set visibility options with a clear understanding of the options.

Actual behavior

Nested code confused users of assistive technology

Steps to reproduce the behavior

1. Test with screen reader user

Related work

https://github.com/psu-stewardship/scholarsphere/pull/452 https://github.com/psu-stewardship/scholarsphere/issues/641

https://github.com/psu-stewardship/scholarsphere/blob/83274485751aaadeff09aa318d9673576f6d867f/app/views/curation_concerns/base/_form_visibility_component.html.erb#L36

[jlhardes]

I don't have access to a screen reader but I tried using Mac's VoiceOver on the Visibility form on a Work on https://dev.nurax.samvera.org/. You can use the arrow keys to work through the radio button options but landing on Embargo and Lease, you don't get any info that there are further options within (changing visibility on a selected date) so there's no way to know that you should use the TAB key to go in beyond that radio selection. The text that explains and encompasses the drop-downs and date pickers is not read as part of the radio button. That seems difficult to overcome with how these 2 radio button options are set up.

If you happen to TAB after arrowing to select Embargo or Lease, you can get to the "inner" form fields to change visibility on a specified date but those instructions aren't read by VoiceOver the same way it looks visually on the screen so it is hard to tell what the different drop-downs are doing.

Nothing connected with either of those radio button options is causing problems for WAVE, axe, or SiteImprove, but that doesn't mean we don't still have accessibility issues for anyone navigating with a screen reader. There is work to do here to improve the accessibility of these Visibility options.