aria-labelledby attributes are incorrectly kebab cased and returned as aria-labelled-by

[hu0p]

🐛 Bug Report

aria-labelledby attributes are incorrectly kebab cased (extra hyphen) as aria-labelled-by.

To Reproduce

Include an aria-labelledby attribute in an <svg> tag.

Expected behavior

An <svg> tag with an aria-labelledby attribute should be returned.

Link to repl or repo (highly encouraged)

Please provide a minimal repository on GitHub.

Here's a link to where the issue was discovered.
Here's a link to a repo with the bug in action.

This bug can also be reproduced in the playground by roughly following the steps in the first link above.

For example, in the playground the following input,

<?xml version="1.0" encoding="UTF-8"?>
<svg width="48px" height="1px" viewBox="0 0 48 1" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-labelledby="reactangle">
    <!-- Generator: Sketch 46.2 (44496) - http://www.bohemiancoding.com/sketch -->
    <title id="reactangle">Rectangle 5</title>
    <desc>Created with Sketch.</desc>
    <defs></defs>
    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
        <g id="19-Separator" transform="translate(-129.000000, -156.000000)" fill="#063855">
            <g id="Controls/Settings" transform="translate(80.000000, 0.000000)">
                <g id="Content" transform="translate(0.000000, 64.000000)">
                    <g id="Group" transform="translate(24.000000, 56.000000)">
                        <g id="Group-2">
                            <rect id="Rectangle-5" x="25" y="36" width="48" height="1"></rect>
                        </g>
                    </g>
                </g>
            </g>
        </g>
    </g>
</svg>

returns this output:

import React from 'react'

const SvgComponent = props => (
  <svg width={48} height={1} aria-labelled-by="reactangle" {...props}>
    <title>{'Rectangle 5'}</title>
    <path d="M0 0h48v1H0z" fill="#063855" fillRule="evenodd" />
  </svg>
)

export default SvgComponent

Environment

## System:
 - OS: macOS 10.14.3
 - CPU: (12) x64 Intel(R) Xeon(R) CPU E5-1650 v2 @ 3.50GHz
 - Memory: 9.25 GB / 32.00 GB
 - Shell: 5.3 - /bin/zsh
## Binaries:
 - Node: 11.7.0 - /usr/local/bin/node
 - npm: 6.8.0 - /usr/local/bin/npm

[gregberge]

Hello @hu0p, thanks for the report. It is a good first issue!

[hu0p]

At first, I thought this was going to be related to the kebabCase function in hast-util-to-babel-ast. However, it works as expected in isolation. It's usage here also does not produce the problem. Unless I'm missing something, I'm beginning to suspect this has something to do with babel types.

Unfortunately, I have little experience with typescript/flow, so that stalled my progress. If anyone else would like to pick this up, please feel free to do so!