Update Media Indicator component

[sareh]

Is your feature request related to a problem? Please describe.
Currently the 'index also' version of the media indicator is fragmented and not easily reusable.

We suggest having a single export within the psammead-media-indicator package that outputs the following example markup, which can be used as a direct child of a link or span, as appropriate.

<span aria-hidden="true">
  <svg ... focusable="false" aria-hidden="true" >
    ...
  </svg>
</span>
<span role="text">
  <VisuallyHiddenText>video, </span>
  <span>{children}<span>
</span>

Note - the first span should have padding-left/padding-right (according to dir) of GEL_SPACING so the icon is not too close to the text.

This is needed for the Desktop layout work. After completed, the Index Alsos within layouts can be updated to use this InlineMediaIndicator variant, since it includes the visually hidden text required for accessibility.

Describe the solution you'd like
Have an export called InlineMediaIndicator.
Usage

import { InlineMediaIndicator } from '@bbc/psammead-media-indicator';

Describe alternatives you've considered
By not making the change here, we will be duplicating work in several places in Simorgh.

Testing notes
[Tester to complete]

Dev insight: Readmes need updating, unit tests/snapshots should be added / storybook examples should be added.

• This feature is expected to need manual testing.

Additional context