Bug: Checked attribute does not update in the dom

[stefanylaforest]

React version:

Steps To Reproduce

1. Go to React's code pen example you can find the link in the documentation here
2. Inspect " is going " checkbox element
3. uncheck the checkbox

Link to code example: https://codepen.io/gaearon/pen/wgedvV?editors=0010

The current behavior

dom does not update, the checked attribute stays no matter what.
same goes if the initial state is set to false, the checked attribute never appears on the input element.

The expected behavior

The checked attribute should be removed if not checked.

[gaearon]

The current behavior is correct.

The confusion stems from the browser reporting the attribute values. However, React sets the checked property on the DOM node. Setting a property is the correct way to update something — attributes are primarily meant to reflect the initial HTML that was loaded in the browser.

React does update attribute in some cases, notably for inputs value. However, this has led to a large number of problems, and we're actually planning to switch it back to only update the property.

So the behavior for the checked property is better.

[eps1lon]

For CSS selectors you'd want to use :checked since [checked] wouldn't work for uncontrolled components with plain HTML anyway.

[dkilgore-eightfold]

Isn't this an Accessibility issue? It's impacting a project I'm working on and am curious if there's a recommended work-around to update this attribute?