Add lang attribute to the brand component

[ghost]

Is your feature request related to a problem? Please describe.
We currently don't have a lang attribute defined for the Brand Component which would help screen readers to announce brand name in the correct accent. i.e `BBC News’ is announced with an English accent.

Describe the solution you'd like
Add a lang attribute to the Brand component.

Describe alternatives you've considered
N/A

Testing notes
[Tester to complete]

Dev insight: Will Cypress tests be required or are unit tests sufficient? Will there be any potential regression? etc

Additional context
Add any other context or screenshots about the feature request here.

[greenc05]

Would this be better as 2 Issues? One for the lang attribute and one for the visually hidden text?

[greenc05]

Testing notes on brand with 2 languages if that is useful @sadick254 https://docs.google.com/document/d/14A0JcYeBvIbg2aHa_4b3eQIG768U9GaCHnNameDKMQ8/edit?usp=sharing

[dr3]

const BrandContainer = () => {
  const { brandName, brandSVG } = useContext(ServiceContext);

  return <Brand brandName={brandName} svg={brandSVG} />;
};

to

const BrandContainer = () => {
  const { brandName, brandSVG } = useContext(ServiceContext);

  if (it doesnt have a serviceLocaisedName like bbc news) {
	return brandName;
  }

  const brandNameThing = (
	<Fragment>
		<span lang="en">{brandName (e.g. BBC News)}</span>
		{serviceLocaisedName (e.g. Yorùbá)}
	</Fragment>
  )

  return <Brand brandName={brandNameThing} svg={brandSVG} />;
};

[ghost]

Is serviceLocalizedName same as serviceName found in the config.

[DenisHdz]

Is serviceLocalizedName same as serviceName found in the config.

I believe so, but the serviceLocalizedName will be accentuated.

[greenc05]

Lets not forget the comma please "BBC News, Yorùbá"