Add alt attribute to logo

* Adds alt attribute with a value of the `mobile-frontend-sitename`
(previously called `mobile-frontend-footer-sitename`). The message was
changed because this affects both the footer and the header's logo.

* Adds a `minerva-footer-logo` class to the logo in footer.mustache in
preparation for changing that element from an h2 to a div. Given caching
issues (old CSS with new HTML; new CSS with old HTML are both
possibilities), we need to do this in two separate deploy cycles.

Bug: T288362
Change-Id: I3ecbf8fdcae72a0ded7f60c559259f312b8ef15d

i18n/en.json

@@ -11,7 +11,6 @@
 	"mobile-frontend-editor-redlink-create": "Create page",
 	"mobile-frontend-editor-redlink-explain": "This page has not yet been created.",
 	"mobile-frontend-editor-redlink-leave": "No, thanks.",
-	"mobile-frontend-footer-sitename": "{{SITENAME}}",
 	"mobile-frontend-history": "View edit history of this page.",
 	"mobile-frontend-home-button": "Home",
 	"mobile-frontend-language-article-heading": "Language",
@@ -35,6 +34,7 @@
 	"mobile-frontend-placeholder": "Search {{SITENAME}}",
 	"mobile-frontend-random-button": "Random",
 	"mobile-frontend-redirected-from": "Redirected from \"[[$1]]\"",
+	"mobile-frontend-sitename": "{{SITENAME}}",
 	"mobile-frontend-talk-back-to-filepage": "Return to the file \"$1\".",
 	"mobile-frontend-talk-back-to-page": "Return to \"$1\" page.",
 	"mobile-frontend-talk-back-to-projectpage": "Return to the project page \"$1\".",

i18n/qqq.json

@@ -25,7 +25,6 @@
 	"mobile-frontend-editor-redlink-create": "Label for a create page button.\n{{Identical|Create page}}",
 	"mobile-frontend-editor-redlink-explain": "Question for the user, if he want to edit a page, which link he clicked and that does not exist yet, or not.",
 	"mobile-frontend-editor-redlink-leave": "Used as a label for a button which the user can click to avoid editing a page which does not exist yet (red link): the question/alternative button is {{msg-mw|mobile-frontend-editor-redlink-create}}\n----\n{{Identical|No thanks}}",
-	"mobile-frontend-footer-sitename": "{{notranslate}}\nName of site",
 	"mobile-frontend-history": "Used as label for the link which points to the \"Edit history\" page.\n\nThis is shown on the Main Page in place of a last modified label to avoid confusion caused by transclusions.\n\nIf not the Main Page, the following message is used:\n* {{msg-mw|Mobile-frontend-last-modified-date}}",
 	"mobile-frontend-home-button": "This is the label of one of the buttons that appear if you click the wiki logo near the search box.\n\nThis buttons takes the user to the home page.\n{{Identical|Home}}",
 	"mobile-frontend-language-article-heading": "In the secondary page menu, a short label that describes the button that displays a list of available languages\n{{Identical|Language}}",
@@ -49,6 +48,7 @@
 	"mobile-frontend-placeholder": "Phrase used to prompt user to use search interface for mobile full screen search\n{{Identical|Search}}",
 	"mobile-frontend-random-button": "This is the label of one of the buttons that appear if you click the wiki logo near the search box.\n\nThis buttons takes the user to a random page.\n{{Identical|Random}}",
 	"mobile-frontend-redirected-from": "Toast message informing the user that they were redirected from their original page. Parameters:\n* $1 - the original page title from which the user was redirected",
+	"mobile-frontend-sitename": "{{notranslate}}\nName of site",
 	"mobile-frontend-talk-back-to-filepage": "Used as label for link from file talk page to file page. Parameters:\n* $1 - page title",
 	"mobile-frontend-talk-back-to-page": "Used as generic label for link from talk page to subject page. Parameters:\n* $1 - page title",
 	"mobile-frontend-talk-back-to-projectpage": "Used as label for link from project talk page to project page. Parameters:\n* $1 - page title",

includes/Skins/Logo.mustache

@@ -1,5 +1,5 @@
 {{#data-logos}}
-{{#wordmark}}<img src="{{src}}" width="{{width}}" height="{{height}}"
+{{#wordmark}}<img src="{{src}}" alt="{{msg-mobile-frontend-sitename}}" width="{{width}}" height="{{height}}"
 	style="{{style}}"/>{{/wordmark}}
-{{^wordmark}}{{msg-mobile-frontend-footer-sitename}}{{/wordmark}}
+{{^wordmark}}{{msg-mobile-frontend-sitename}}{{/wordmark}}
 {{/data-logos}}

includes/Skins/SkinMinerva.php

@@ -59,7 +59,7 @@ class SkinMinerva extends SkinMustache {
 			'name' => 'minerva',
 			'templateDirectory' => __DIR__,
 			'messages' => [
-				'mobile-frontend-footer-sitename'
+				'mobile-frontend-sitename'
 			],
 			'responsive' => true
 		] );

includes/Skins/footer.mustache

@@ -4,7 +4,7 @@
 {{{html-minerva-lastmodified}}}
 	<div class="post-content footer-content">
 	{{{html-after-content}}}
-	<h2>{{>Logo}}</h2>
+	<h2 class="minerva-footer-logo">{{>Logo}}</h2>
 	<div class="license">{{{html-minerva-license}}}</div>
 	{{#data-info}}{{>footerItemList}}{{/data-info}}
 	{{#data-places}}{{>footerItemList}}{{/data-places}}

resources/skins.minerva.base.styles/footer.less

@@ -33,7 +33,9 @@
 			margin-bottom: 9px;
 		}
 
-		> h2 {
+		// FIXME: H2 selector can be removed when .minerva-footer-logo appears in anon HTML.
+		> h2,
+		.minerva-footer-logo {
 			border-bottom: solid 1px @footerBorderColor;
 			padding-bottom: 10px;
 			margin-top: 42px;

stories/footer.stories.js

@@ -10,7 +10,7 @@ export default {
 };
 
 const FOOTER_TEMPLATE_DATA = {
-	'msg-mobile-frontend-footer-sitename': 'Site title OR Logo',
+	'msg-mobile-frontend-sitename': 'Site title OR Logo',
 	'html-minerva-license': 'Content is available under <a rel="nofollow" href="#">Reading Web 3.0 License</a> unless otherwise noted.',
 	'html-after-content': placeholder( 'Extensions can add here e.g. Related Articles.' ),
 	'data-places': [