Allow section-label heading optionally use a strong element

[rhenshaw56]

Is your feature request related to a problem? Please describe.

psammead-section-label currently only renders an H2. We need to be able to choose which element is rendered inside to meet a11y requirements. At the moment, this isn't possible using the Styled Components as= prop, because styles are tightly coupled to the nested elements.

Psammead Section Label

Describe the solution you'd like
We could:

• Pass an as prop value down onto the children components.
• Make SectionLabel accept children and assign the as prop directly.

Describe alternatives you've considered

• consider moving all typography, font and style settings from plain title to the top level h2 that way we don't use lose those if it's overridden with the "as" prop.

• consider if we should override the entire section-label in simorgh for our use case.

Testing notes
Add snapshot tests demonstrating the function.

Dev insight: Will there be any potential regression? etc

• confirm with @greenc05 if we have some other place where section-label uses a strong element and why we need to do that here.

• see where the section label is being used and consider if we could dry up the logic in the section-label component to distinguish if we render a link or plain title.

• This feature is expected to need manual testing.

[greenc05]

I don't believe we have designs for this to be a link? "see where the section label is being used and consider if we could dry up the logic in the section-label component to distinguish if we render a link or plain title."

[greenc05]

"confirm with @greenc05 if we have some other place where section-label uses a strong element and why we need to do that here." We only use the 'section-label' component on index pages, h2's are apporpriate for a index page. A h2 is not appropriate for the recommendations component, as this is to be used on story pages within the story body. Users don't expect headings within the story body that aren't related to the story, and also any content below this component would sit under this heading if one was used for it, which would not be correct. Therefore a strong element should be used in this situation. Note that the recommendations component should also not have a 'see all' link as section-label can do, are we sure that repurposing the 'section-label' is the right way to go here?

[rhenshaw56]

A h2 is not appropriate for the recommendations component, as this is to be used on story pages within the story body. Users don't expect headings within the story body that aren't related to the story, and also any content below this component would sit under this heading if one was used for it, which would not be correct. Therefore a strong element should be used in this situation

Thanks for clarifying @greenc05, this makes sense now.

Since we now have a requirement to use section labels in the main story body, would it be worth adding support to export a StrongTitle that uses a strong element instead of totally re-purposing the section-label ?

[greenc05]

I don't think we should be re-purposing the 'section label' that is used on index pages, it's too different. Is 'section-label' actualy in storybook? I can't see it...

[rhenshaw56]

@greenc05 here it is

[greenc05]

Ok so it's not that different.... we wouldn't need it 'with a link' or 'bar' and there are a few extra spans that we don't need but I guess you could use it... could just call it 'strong'? instead of 'default'?

[rhenshaw56]

Thanks @greenc05. Are/Would there be cases where we might have links using strong elements ?

[greenc05]

It's possible that a strong element could also be a link, though we don't have a requirement for that, that I have seen.... The 'with a link' adds a 'see more' link currently - it's not just making the h2/strong element a link...