Add word matching functionality to search results

[seanprivett]

DataHub search results indicate which part of the returned item matches the search term. Implement this functionality in the custom front end.

The DataHub highlight colours are a WCAG fail (I think it's FG #8C8C8C and BG #E6F4FF). But what they have got right is the semantically correct use of the <mark> tag - I think this is equivalent to, but preferred over the ARIA role="mark" role)

GOV.UK implements this by avoiding a background "highlight" and adjusting the font-weight instead. (Don't know if this is in the SCSS out of the box, or if it's a custom addition)

also noticed DH's post-processing to surround search terms in tags isn't smart enough to handle multiple search terms ("offence" not highlighted in result 3)

check how a screen reader would handle the highlighted search terms

add to alpha assessment deck re usability and accessibility, pref screenshots

GOV.UK publications - search term highlight using font-weight:700

Raise WCAG fail with DataHub

Definition of done

• [ ] Code to parse search results and modify markup
• [ ] CSS change to "highlight" resulting tags
• [ ] Test(s) written

[murdo-moj]

Search searches on name, description, and on column names and descriptions in a dataset. These are the items which should be highlighted/bolded upon searching.

• the dataset name is already bold as part of the govuk class
• search summary is being used rather than description on the search screen
• will we be copying datahub to display information about column names which match the search term?

[murdo-moj]

https://github.com/ministryofjustice/find-moj-data/pull/78

I have slightly got around the issue by surfacing the matched fields returned by the datahub GraphQL API

[murdo-moj]

Highlighted markdown is rendered into a <strong> tag in html. This is theoretically something which screenreaders should be able to use, but when I used the Mac VoiceOver functionality to test it, there wasn't any difference with the surrounding text.