Add heading component

[mjbp]

To codify the solution to the known VoiceOver (VO) issue, where an <h1> is announced as two <h1>s because the copy had additional markup inside.

For example: VO reads <h1>AX <em>for all</em></h1> as "AX heading level 1, for all heading level 1"

The solution is to wrap the inner content of the <h1> in a span like this:
<h1><span role="text">AX <em>for all</em></span></h1> which VO then announces as "AX for all heading level 1"

References
https://axesslab.com/text-splitting/
https://dequeuniversity.com/rules/axe/4.3/aria-text

The component could be a single Heading accepting a level prop:

import { h, toChildArray } from 'preact';

const Heading = ({ level = 1, children, className }) => {

    const Tag = `h${level}`;
    return  <Tag class={className}>
            {
                toChildArray(children).length > 1
                    ? <span role="text">{children}</span>
                    : children
                
            }
        </Tag>;
};
export default Heading;

or 6 separate Headings <H1>, <H2>, etc:

const H1 = ({ children, className }) => <h1 class={className}>
            {
                toChildArray(children).length > 1
                    ? <span role="text">{children}</span>
                    : children
                
            }
        </h1>;

export default H1 ;

or both with H1, H2, etc as higher order components that use Heading:

import { h } from 'preact';
import Heading from '@components/heading';

const H1 = ({ className, children }) => <Heading level={1} className={className}>{children}</Heading>;

export default H1;

[Nick-StormID]

I prefer the single Heading approach, to more clearly distinguish this component from standard markup.
I think this would make the initial decision to use the component more conscious and, in support, make it more transparent that a component, not standard markup, was being used.

[mjbp]

Closed with #99