Update inputs to show accessible names

[hnryjmes]

Aim

This PR makes some changes to resolve issues with accessible labels found in the most recent DAC report - these are listed in the ticket. The problems are generally that an input may appear to a screen reader but it's not clear what the input relates to.

As well as updating some for="" and aria-labelledby="" attributes to make clear what inputs relate to what hint text, the address input for UK based org registration has been updated. This was discussed in the ticket comments and it brings the UK based org registration form for address in line with the GDS design pattern (https://design-system.service.gov.uk/patterns/addresses/) by using "Address line 1" and "Address line 2" instead of "Building and street" and no label. The other inputs for address were also updated (along with the error messages) to keep things consistent with the Address example on the Design System page.

LTD-5172

[kevincarrogan]

I don't think aria-labbelledby should point to a class name and I can't see an element with this id (it would be a weird id as well).

[hnryjmes]

so the id I want to link to is here: id="span-{{ page.single_form_element.name }}-hint"
https://github.com/uktrade/lite-frontend/blob/dev/lite_forms/templates/form.html#L74

but when I viewed this in a browser it just showed as span--hint so I hardcoded that as the reference. presumably that template variable evaluates to nothing when this page is viewed.

actually it works to use aria-labelledby="span-{{ page.single_form_element.name }}-hint" so I'll update to use that instead.

[kevincarrogan]

But won't this still come out as span--hint. I'm viewing the fact that the {{ page.single_form_element.name }} is coming out as blank is a signal that something isn't quite right here and that span--hint is just the wrong thing to set it to.

I think I need to stare at what this is all doing first.

Can you show me an example of a page that you are fixing this for so I can see what is being rendered in context?

[kevincarrogan]

Actually. Found the link in the ticket I'm presuming this is solving for so I'll take a look at that.

[kevincarrogan]

The more I dig through this the more this makes me feel like this isn't the correct fix for this problem.

However there is a question around whether this is something we even want to fix considering this is lite_forms.

One problem that will manifest as a result of this change is that if there is a form that just has a single upload input then it's going to end up with a label and a span that it's aria-labelled-by points to and ultimately this is all a bit confusing because setting {{ page.single_form_element.name }} is almost always going to be a blank string and when it's not a blank string it will do the wrong thing.

[kevincarrogan]

Where is the suggestion that we should be using that description span as the label?

[hnryjmes]

it doesn't need to be that span. the file input just needs some sort of explanation as to what it's for, and that seemed like a good one to choose, alternatively we could use the main heading on the page

[hnryjmes]

in the example here, there is a <label> element which has the attribute for pointing to the file upload input element. https://design-system.service.gov.uk/components/file-upload/

my choice to use that description text was that it seemed like the closest thing to the example from the design system

[hnryjmes]

(and the reason that I can't use a for attribute for the file upload and have to use aria-labelledby instead is because the template form.html has many purposes and is not necessarily just used for that file input)

[currycoder]

Approved pending Kevin's comment.