[SalesForce] Lightning Access Check Failed! Attribute not visible to markup – Summer ’16

Answering this myself, as I found that although the contenteditable attribute seems to be ignored in markup, it's possible to set it in code.

Revised test_ContentEditable.cmp as follows:

<aura:component>
    <aura:attribute name="editMode" type="Boolean" default="false" access="private"/>

    EDIT MODE: {!v.editMode}<br/><br/>

    <button onclick = "{!c.editOnButtonClicked}">EDIT ON</button><br/>
    <button onclick = "{!c.editOffButtonClicked}">EDIT OFF</button><br/><br/>

    <div class="redText" aura:id="sampleText">
        This is some sample text to edit.  Line 1.<br/>
        This is some sample text to edit.  Line 2.<br/>
        This is some sample text to edit.  Line 3.<br/>
        This is some sample text to edit.  Line 4.<br/>
        This is some sample text to edit.  Line 5.
    </div>

</aura:component>

Added test_ContentEditableController.js:

({
    editOnButtonClicked : function(component, event, helper) {
        var sampleTextComponent = component.find('sampleText');
        var sampleTextElement   = sampleTextComponent.getElement();
        sampleTextElement.contentEditable = true;
        component.set('v.editMode', true);
        console.log('DEBUG: contentEditable set to TRUE');
    },

    editOffButtonClicked : function(component, event, helper) {
        var sampleTextComponent = component.find('sampleText');
        var sampleTextElement   = sampleTextComponent.getElement();
        sampleTextElement.contentEditable = false;
        component.set('v.editMode', false);
        console.log('DEBUG: contentEditable set to FALSE');
    },

})

Setting the contentEditable attribute on the element works, so the logic can turn it off and on as needed.

Note I wanted to use contenteditable instead of a textarea, because I didn't want to worry with cols and rows values or writing code to adjust that dynamically as the user was editing the content. I wanted the text area to always match the content, which is how contenteditable seems to work.

Seems to work fine on Winter 18 and Spring 18(upcoming) releases. Here's the code I used to repro the issue.

Apex Controller

public with sharing class AccountController {
    @AuraEnabled
    public static List<Account> findAll() {
    return [SELECT id, name
            FROM Account
            LIMIT 50];
    }
}

App code

<aura:application controller="AccountController">
    <aura:attribute name="accounts" type="Account[]"/>
    <aura:attribute name="account" type="Account" />
     App
    <aura:handler name="init" value="{!this}" action="{!c.doInit}" />
    <c:containerCmp account="{!v.account}" accountList="{!v.accounts}"/>
</aura:application>

App Controller

({
    doInit: function(component, event) {
        var action = component.get("c.findAll");
        action.setCallback(this, function(a) {
            component.set("v.accounts", a.getReturnValue());
            component.set("v.account", a.getReturnValue()[0]);
        });
        $A.enqueueAction(action);
    }
})

c:containerCmp

<aura:component>
  <aura:attribute name="account" type="Account" />
  <aura:attribute name="accountList" type="Account[]" />
  <aura:handler name="init" value="{!this}" action="{!c.doInit}"/>
    container cmp
    {!v.body}
</aura:component>

c:containerCmp controller

({
    doInit : function(cmp) {
        $A.createComponent(
            "c:myComponent",
            {
                "record": cmp.getReference("v.account"),
                "recordList": cmp.getReference("v.accountList")
            },
            function(newInnerCmp, status, errorMessage) {
                if (status === "SUCCESS") {
                    var body = cmp.get("v.body");
                    body.push(newInnerCmp);
                    cmp.set("v.body", body);
                }
            }
        );
    }
})

c:myComponent

<aura:component>
  <aura:attribute name="record" type="Account" />
  <aura:attribute name="recordList" type="Account[]" />
  <ui:button press="{!c.clickHandler}" label="Show account details"/>
  <br/>
  <aura:iteration items="{!v.recordList}" var="recordd">
      {!recordd.Id} : {!recordd.Name} <br/>
  </aura:iteration>
</aura:component>

c:myComponent controller

({
    clickHandler : function(cmp, event, helper) {
        cmp.get("v.record").Name = "Acme";  // Works
        for(var record of cmp.get("v.recordList")) {
            record.Name = "Acme";  // Suppose to fail here, but works fine
        }
        // Optional step to reflect the mutation in the UI
        // cmp.set("v.recordList", cmp.get("v.recordList"));
    }
})