Make icons accessible.

[chrisrolfe198]

Describe the feature you'd like

The ability to select icons through accessible means. For example in a current codebase we have a duplicate of the download icon like this:

const DownloadIcon = ({
    color = Colors.ACTION_BLUE_900,
    className,
    title = 'download icon',
    titleId,
}: {
    color?: string
    className?: string
    title?: string
    titleId: string
}) => {
    return (
        <svg
            xmlns='http://www.w3.org/2000/svg'
            width='25'
            height='24'
            viewBox='0 0 25 24'
            className={className}
            aria-labelledby={titleId}
            role='img'
        >
            <title id={titleId}>{title}</title>
            <path
                fill={color}
                fillRule='nonzero'
                d='M19.5 19v2h-14v-2h14zm-6-16v10.436l5-4.445v2.676L12.5 17l-6-5.333V8.991l5 4.445V3h2z'
            />
        </svg>
    )
}

This allows you to specify a title for the icon and then reference it accessibly, it might be nice if instead of passing an id for the title it could be autogenerated.

Describe alternatives you've considered

Wrapping the parent components in the accessible attributes, this might work for buttons but there might be other states where icons are displayed only as informative.