Froala Editor w/ Label Tag

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/froala-editor/2.6.4/css/froala_editor.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/froala-editor/2.6.4/css/froala_style.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/froala-editor/2.6.4/js/froala_editor.min.js"></script>
<!-- Label that works with accessibility -->
<label for="froala-input">Froala Editor Label</label><br>
<textarea id="froala-editor"><p>Foobar</p></textarea>

<br>
<hr>
<br>

<!-- Native input for comparison -->
<label for="native-input">Native Editor Label</label><br>
<textarea id="native-input"></textarea>

JavaScript

$('#froala-editor').froalaEditor(); // init Froala

// Pull the Froala element
const $froala = $('div.fr-element.fr-view');

// Add an ID for our <label> to targe
$froala.attr('id', 'froala-input');

// Froala should be using the textbox role for a11y,
// but it does not seem to impact <label> behavior
$froala.attr('role', 'textbox');