Dev 1165 advanced search form

[carylwyatt]

Resolves some of #71 , #72

Fixes for critical advanced search form issues:

• 1727510 radio button does not have role and/or state
  • this was close to being right, so it was an easy fix. the id attribute of the radio <input> and the for attribute of its corresponding <label> not only have to match, they must be unique. they matched before but were not unique, so I added an extra variable to the id/for combo and now we're good 👍
• 1727483 focus indicator missing on select language and select format
  • I added an ugly focus ring on the FilterableSelection lists (language and format) on the advanced search forms, so now if you tab over them, you'll see a darker-orange box as you move through the list, and if you select an item with the space bar, the background of the them item turns orange and the focus ring turns black. Gayathri is working on a better design for all our focus states, butI wanted to fix this for now since it's a critical issue.

Other fixes:

• 1728295 select language/select format contrast issues
  • the FilterableSelection component was still using the inaccessible shade of orange (primary-500), so I updated it to the approved slightly-darker-orange (primary-600)
• in the previous PR for fixing the feedback forms, I didn't realize my linter was yelling at me that role="checkbox" is redundant when used with type="checkbox", so I removed that here

to test

This is staged on dev-3: Advanced Search page, either in Catalog or Full-text.

boolean operators

To test the AND/OR boolean operator radio buttons, you'll need a screen reader. If you test in on prod, it's doing something like this:

Because all the AND buttons had the same id/for attributes, they were all being read together like "AND AND AND" but if you use a screen reader on dev-3 and tab through this version of the form, it should read the ANDs and ORs separately now.

Also, you may notice that the current version has this legend that says "Boolean operator for field 0 and field 1", and I fixed that, too. It will now say "Boolean operator for field 1 and field 2" and 2/3, 3/4 depending on which fieldset you're in.

filterable selection list

You don't need the screen reader for this one, but it doesn't hurt. Tab through the language and format selection lists and select an item using the space bar. There should be a dark orange focus ring around unselected items, and selected items should have a black focus ring.

[netlify[bot]]

✅ Deploy Preview for hathitrust-firebird-common ready!

Name	Link
🔨 Latest commit	e180f0981dc59690e75000cf5b4c280fde675d9d
🔍 Latest deploy log	https://app.netlify.com/sites/hathitrust-firebird-common/deploys/66427eaec482c20008800513
😎 Deploy Preview	https://deploy-preview-81--hathitrust-firebird-common.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[carylwyatt]

Thank you for your review, @mwarin! I'll take a look at the first two screen reader issues. There are more advanced search form issues from deque and I can definitely address these when those are being worked on. (See https://github.com/hathitrust/firebird-common/issues/72 for example "dropdown fields don't have descriptive labels")

As for number three, I agree, there is some wonky margin at play with the focus style. Gayathri will be designing all-new focus styles and I didn't want to spend too much time tinkering with this "placeholder" style that will be replaced probably next week.

I will merge and keep these in mind for future work!