LG-7150 add login icon alt text

[svalexander]

Ticket

What: This pr adds alt text to the Login.gov logo in order to allow screen reader users to hear text that describes the logo image in emails.

How: Alt tag added to image_tag in the base email used by other emails.
Note: Did not add this text to the i18l files as the text is the same in the 3 languages we support.

Testing:

• Go to one of the emails, can use ready to verify email for example. http://localhost:3000/rails/mailers/user_mailer/in_person_verified.html?locale=en
• Open finder
• Navigate to VoiceOver and enable
• Navigate the email using VoiceOver to ensure that "Login.gov logo" is read out when highlighting the logo

Screenshot

changelog: Improvement, Accessibility, add alt text for login.gov logo

[NavaTim]

I believe we conventionally use the APP_NAME constant for this rather than hardcoding Login.gov.

Suggested change

	alt: 'Login.gov logo',
	alt: "#{APP_NAME} logo",

I noticed that the only place this is hardcoded are the error pages.

[aduth]

Note: Did not add this text to the i18l files as the text is the same in the 3 languages we support.

I think we should still use the localization tools even if the text is the same, in case we need to make revisions to one language in the future, and to prevent confusion if a future maintainer assumes that this text is untranslated.

[svalexander]

that makes sense, i just updated it

[aduth]

For the build failure, you can bypass the error by adding to the list here as being the same translation across all locales:

identity-idp/spec/i18n_spec.rb

Lines 15 to 32 in 399e9bb

	# List of keys allowed to be untranslated or are the same as English
	ALLOWED_UNTRANSLATED_KEYS = [
	{ key: 'account.navigation.menu', locales: %i[fr] }, # "Menu" is "Menu" in French
	{ key: 'doc_auth.headings.photo', locales: %i[fr] }, # "Photo" is "Photo" in French
	{ key: 'components.status_page.icons.error', locales: %i[es] }, # "Error" is "Error" in Spanish
	{ key: 'components.status_page.icons.question', locales: %i[fr] }, # "Question" is "Question" in French
	{ key: 'errors.alt.error', locales: %i[es] }, # "Error" is "Error" in Spanish
	{ key: /^i18n\.locale\./ }, # Show locale options translated as that language
	{ key: /^countries/ }, # Some countries have the same name across languages
	{ key: 'links.contact', locales: %i[fr] }, # "Contact" is "Contact" in French
	{ key: 'simple_form.no', locales: %i[es] }, # "No" is "No" in Spanish
	{ key: 'simple_form.required.html' }, # No text content
	{ key: 'simple_form.required.mark' }, # No text content
	{ key: 'time.am' }, # "AM" is "AM" in French and Spanish
	{ key: 'time.pm' }, # "PM" is "PM" in French and Spanish
	{ key: 'datetime.dotiw.minutes.one' }, # "minute is minute" in French and English
	{ key: 'datetime.dotiw.minutes.other' }, # "minute is minute" in French and English
	].freeze

[aduth]

LGTM 👍

I see you added "[skip changelog]", but this seems like something which would be good to highlight in the release notes as an accessibility improvement / fix. You could still add a changelog as part of the editable textarea when merging.

[aduth]

While this probably passes, it'd be good to make this assertion locale-independent.

Suggested change

	expect(rendered).to have_css("img[alt='Login.gov logo']")
	expect(rendered).to have_css("img[alt='#{t('mailer.logo', app_name: APP_NAME)}']")