react / react/react

Stop doing data-*, aria-*, start using dataSet

Open
#1,259 33 comments 55 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Component: DOM Partner Resolution: Backlog Type: Feature Request
Dominant language
JavaScript
Stars
251k
Forks
51.4k
Avg merge
2d 4h
Merged PRs (30d)
53

Description

The DOM already exposes data-* as dataset but it's doing transformation from hyphenated to camelCase. From MDN:

<div id="user" data-id="1234567890" data-user="johndoe" data-date-of-birth>John Doe
</div>

var el = document.querySelector('#user');

// el.id == 'user'
// el.dataset.id === '1234567890'
// el.dataset.user === 'johndoe'
// el.dataset.dateOfBirth === ''

el.dataset.dateOfBirth = '1960-10-03'; // set the DOB.

// 'someDataAttr' in el.dataset === false

el.dataset.someDataAttr = 'mydata';
// 'someDataAttr' in el.dataset === true

We should just start supporting dataSet (because camelCase). This will allow a couple things:

  • easier reasoning about data attributes (Object.keys(this.props.dataSet))
  • easier merging (<div dataSet={merge(this.props.dataSet, {extra: 'value', override: 'value'})} />)
  • easier (potentially faster?) updates (just modify node.dataset)

We'll want to do the reverse of what the DOM is doing. eg <div dataSet={{dateOfBirth: 'val', foo: 'bar'}} /> becomes <div data-date-of-birth="val" data-foo="bar"></div>.

To the best of my knowledge, aria-* doesn't have a corresponding API, but we should make it work the same way. I think ariaSet makes sense.

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

No repository file, test, or entry point is named. Start by locating the existing handling of data-* and aria-* attributes and compare it with the dataset examples in the issue. Done means dataSet and ariaSet behavior, including camelCase-to-attribute conversion and merging, is defined and covered by tests.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript, react
Domain
frontend
Issue type
Feature
Difficulty
5/5
Estimated time
Over a week
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.