Add parameter to localise mobile menu toggle button

[domoscargin]

Adds the menuButtonText parameter to customise the text of the menu toggle button that appears on narrow screens.

Cherry picked this from @querkmachine's spike [#2614] as the minimum changes required.

Fixes #1904

[36degrees]

HTML?

We've allowed for text replacement. I can't immediately think of any good reason to allow for HTML here - there may be an aspect of the i18n work I'm missing though?

I'd suggest using menuButtonText so that if we need to introduce the HTML option in the future we can do so whilst being consistent with the other options and components.

(Also works if we find we need to add e.g. menuButtonClasses or menuButtonAttributes)

[querkmachine]

In my redo of the footer parameters I did end up changing them from taking strings to following the whole html/text separation, as it let me merge some related parameters (like copyright link, image toggles) into the options.

I agree with @domoscargin that being able to set HTML here probably isn't needed. The main counterpoint I can think of is a situation where a language may have quite a long word(s) for navigation menu, so they opt to abbreviate it but then want a title/aria-label/visually-hidden text to expand upon it.

[36degrees]

Just noticed we now have a navigationLabel and a menuButtonText that In most cases I suspect should be the same, and both default to 'Menu'. Suspect the navigationLabel might easily be missed when translating as it's not visible text.

Wondering if it might make sense to make navigationLabel default to whatever menuButtonText is, so that they stay in sync unless someone intentionally sets navigationLabel to something different? 🤔

[domoscargin]

@36degrees, I've defaulted navigationLabel to menuButtonText.

I've also had a go at writing a changelog entry, but it feels a bit meh to just say "don't make it too long". Do we have any character length restrictions on other parameters?

[36degrees]

Changes all look sensible to me – my only suggestion is that it'd be good to have a test that the aria-label on the nav changes when menuButtonText is set.

[domoscargin]

I'm thinking it'd be enough documentation-wise to edit the header.yaml menuButtonText description to something like:

Text for the button that toggles the navigation. This should be [the shortest useful text that describes the button's purpose][a maximum of 30 characters]. Defaults to 'Menu'.

[querkmachine]

To parrot what I've already said on Slack, for the permanent record:

I’m not sure of what guidance should go with this. There is a limit, but the limit is a visual one—you can’t really describe it as ‘max n characters’, especially in a localisation context

It’s heavily dependent on the width of the device too. If we use 320px as a baseline then you have a decent amount of space, at least.

[domoscargin]

@christopherthomasdesign What do you think? Does this require more design work? Or will some kind of guidance do?

[christopherthomasdesign]

@christopherthomasdesign What do you think? Does this require more design work? Or will some kind of guidance do?

I don't think so, long as we make it clear this is specifically to accommodate different languages. There seems to be enough space for a long-ish word to go alongside the logo. We just want to make sure users check the word they use still looks ok on smaller screens and at different zoom levels.

[vanitabarrett]

Looks good! Let's hold off merging until 4.3.1 is done

[querkmachine]

Moved the changelog entry as it was in the wrong location now that 4.3.1 has released.