Change icon placement in advanced search

[kamerynB]

Problem Description: The icons in the advanced search are confusing where they are currently placed.

Expected Behavior/Solution: Move the icons to the row above, or next to the relationship.

Requirements:

• [ ] Move the icon up a row
• [ ] Add an icon next to the header text "Search for that..."

Needed for promotion: If an item on the list is not needed, it should be crossed off but not removed.

• [x] Wireframe/Mockup - Kam
• [x] ~Committee discussions - Sarah~
• [x] ~Feasibility/Team discussion - Sarah~
• [x] ~Backend requirements - TBD~
• [x] Frontend requirements - Kam
• [x] ~Are new regression tests required for QA - Amy~
• [x] ~Questions~
• List of questions for discussions. Answers should be documented within the issue.

UAT/LUX Examples:

• https://lux-front-tst.collections.yale.edu/view/results/objects?q=%7B%22AND%22%3A%5B%7B%22carries%22%3A%7B%22aboutPlace%22%3A%7B%22OR%22%3A%5B%7B%22name%22%3A%22california%22%7D%2C%7B%22partOf%22%3A%7B%22OR%22%3A%5B%7B%22name%22%3A%22california%22%7D%2C%7B%22partOf%22%3A%7B%22name%22%3A%22california%22%7D%7D%5D%7D%7D%5D%7D%7D%7D%2C%7B%22classification%22%3A%7B%22name%22%3A%22painting%22%7D%7D%2C%7B%22producedBy%22%3A%7B%22startAt%22%3A%7B%22OR%22%3A%5B%7B%22name%22%3A%22europe%22%7D%2C%7B%22partOf%22%3A%7B%22OR%22%3A%5B%7B%22name%22%3A%22europe%22%7D%2C%7B%22partOf%22%3A%7B%22name%22%3A%22europe%22%7D%7D%5D%7D%7D%5D%7D%7D%7D%2C%7B%22producedDate%22%3A%221800%22%2C%22_comp%22%3A%22%3E%22%7D%2C%7B%22producedDate%22%3A%221900%22%2C%22_comp%22%3A%22%3C%22%7D%5D%7D

Dependencies/Blocks: N/A

Related Github Issues: N/A

Related links:

• https://www.bugherd.com/projects/284041/tasks/2495

Wireframe/Mockup:

[jffcamp]

Interactions approve this design change as long as the accessibility issues can be addressed. Will need to pay attention to how it is read aloud (screen reader). This placement could be problematic. Can the icon be read out after the words? Could the icon be part of the dropdown? May not be technically possible. Is it possible to have the screen reader reverse the order of the line? eg field then icon

[kamerynB]

@jffcamp I'm certain there are ways to ensure accessibility. You can add the icon to the dropdown but at that point, I'm really not sure how it would be read by a screen reader. See screenshot below of a mock of that though.