prop casing inconsistency

[paul-thebaud]

Vue version

@fe77e2b (3.2.45)

Link to minimal reproduction

https://sfc.vuejs.org/#eNqVk8tugzAQRX9l5A2bgveURKoqRZVatctuvCHBJE7BY42dpFLEv3cM6SOvKuyYO4/jwb578eBctt1okYvCL8i4AF6HjZsqa1qHFGAPpGvooCZsIeHSRFllF2h9gDIE8jCBvbIAJZnyyVSVtjkkgbjwLspJ1NOmnOsm4cTb8yBH9RFtIGw8yzVi1Lt7ZQs5HISPwEHQrWvKoDkCKCqzhfwXNFEigpToswCvGGCH9GHsEnYmrKBYYKWnlzoK2acALcwM6Rl+9gDJhBNUurrIer/COS3/A5ojl84Jd16Tv4Z7iX9qzGLHDSP26u/k5rWOq8du9X3VYxY76xkLTfmVXqReXfKs4RZkIX8eqbgTg23StnTZ2qNlY/XuUIeEVyIf/BI1tlOMlViF4Hwupa8X0Y5rnyEtJX9ltLHBtDrTvk0PdB6sRO+iwwzJ4lZTStpWmjT9N/Ok9GxuHNuxE0X3BWKTZ9s=

Steps to reproduce

Define props with different attributes and check the HTML result on both Firefox and Chrome (Unix): aria-hidden, etc.

What is expected?

Camel cased props should be always converted to kebab cased props. This behavior should be shared acrosss all browser.

What is actually happening?

On both tested browser, some camel cased attribute (aria-controls) are not kebab cased, but not all.
On Firefox, all camel cased attribute are not kebab cased.

System Info

System:
    OS: Linux 5.15 Ubuntu 22.04.1 LTS 22.04.1 LTS (Jammy Jellyfish)
    CPU: (12) x64 AMD Ryzen 5 4600H with Radeon Graphics
    Memory: 1.27 GB / 15.00 GB
    Container: Yes
    Shell: 5.8.1 - /usr/bin/zsh
  Binaries:
    Node: 16.14.0 - ~/.nvm/versions/node/v16.14.0/bin/node
    Yarn: 1.22.15 - ~/.nvm/versions/node/v16.14.0/bin/yarn
    npm: 8.5.4 - ~/.nvm/versions/node/v16.14.0/bin/npm
  Browsers:
    Chrome: 108.0.5359.98
    Firefox: 108.0.1

Any additional comments?

There is already an issue (#5477) which partially talks about this issue (but dont talk about firefox and chrome different behavior).

IMO, it is very important to fix this issue as a lot of lib are using camel cased properties when using v-bind or JSX (and it impact accessibility a lot as some buttons miss there labels, etc.).

[LinusBorg]

#7401 also is related to this, in a way. I'll try and get an overall perpective on this over the holidays.

[LinusBorg]

Sidenote: I'll verify this, but suspect that the browser-inconsistencies are due to differnt handling when assigning these attributes as element properties el.ariaLabel = .... - I'd guess Firefox simply doesn't provide these properties.

Edit: verified.

• Firefox: 'ariaLabel' in $0 // => false
• Chrome 'ariaLabel' in $0 // => true

Insofar, this issue can be considered a duplicate to #5477 - solving that issue will also solve this one here.

[LinusBorg]

Thanks for resurfacing this though, it admittedly fell below the radar.

[paul-thebaud]

OK. Thanks for the explanation.
No problem to consider this as duplicate.

[LinusBorg]

I'll close this as a duplicate, I also sent a draft PR for #5477

[paul-thebaud]

Thanks a lot @LinusBorg!