Add props "tabIndex" and "role" (#552)

* Add prop "tabIndex" to editor

* Add prop "role"

* Typo

* Adapt rendering tests

docs/reference/components/editor.md

@@ -91,6 +91,13 @@ A [`State`](../models/state.md) object representing the current state of the edi
 
 An optional dictionary of styles to apply to the content editable element.
 
+### `tabIndex`
+
+Indicates if it should participate to [sequential keyboard navigation](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex).
+
+### `role`
+
+ARIA property to define the role of the editor, it defaults to `textbox` when editable.
 
 ## Placeholder Properties
 

src/components/content.js

@@ -47,10 +47,12 @@ class Content extends React.Component {
     onPaste: React.PropTypes.func.isRequired,
     onSelect: React.PropTypes.func.isRequired,
     readOnly: React.PropTypes.bool.isRequired,
+    role: React.PropTypes.string,
     schema: React.PropTypes.object,
     spellCheck: React.PropTypes.bool.isRequired,
     state: React.PropTypes.object.isRequired,
-    style: React.PropTypes.object
+    style: React.PropTypes.object,
+    tabIndex: React.PropTypes.number
   };
 
   /**
@@ -694,7 +696,7 @@ class Content extends React.Component {
 
   render = () => {
     const { props } = this
-    const { className, readOnly, state } = props
+    const { className, readOnly, state, tabIndex, role } = props
     const { document } = state
     const children = document.nodes
       .map(node => this.renderNode(node))
@@ -747,6 +749,8 @@ class Content extends React.Component {
         onSelect={this.onSelect}
         spellCheck={spellCheck}
         style={style}
+        role={readOnly ? null : (role || 'textbox')}
+        tabIndex={tabIndex}
       >
         {children}
       </div>

src/components/editor.js

@@ -68,10 +68,12 @@ class Editor extends React.Component {
     placeholderStyle: React.PropTypes.object,
     plugins: React.PropTypes.array,
     readOnly: React.PropTypes.bool,
+    role: React.PropTypes.string,
     schema: React.PropTypes.object,
     spellCheck: React.PropTypes.bool,
     state: React.PropTypes.instanceOf(State).isRequired,
-    style: React.PropTypes.object
+    style: React.PropTypes.object,
+    tabIndex: React.PropTypes.number
   };
 
   /**
@@ -250,6 +252,8 @@ class Editor extends React.Component {
         readOnly={props.readOnly}
         spellCheck={props.spellCheck}
         style={props.style}
+        tabIndex={props.tabIndex}
+        role={props.role}
       />
     )
   }

test/rendering/fixtures/custom-block-void/output.html

@@ -1,5 +1,5 @@
 
-<div data-slate-editor="true" contenteditable="true">
+<div data-slate-editor="true" contenteditable="true" role="textbox">
   <div data-slate-void="true" style="position:relative;">
     <span style="position:absolute;top:0px;left:-9999px;text-indent:-9999px;">
       <span>

test/rendering/fixtures/custom-block/output.html

@@ -1,5 +1,5 @@
 
-<div data-slate-editor="true" contenteditable="true">
+<div data-slate-editor="true" contenteditable="true" role="textbox">
   <div style="position:relative;">
     <span>
       <span>word</span>

test/rendering/fixtures/custom-decorator/output.html

@@ -1,5 +1,5 @@
 
-<div data-slate-editor="true" contenteditable="true">
+<div data-slate-editor="true" contenteditable="true" role="textbox">
   <div style="position:relative;">
     <span>
       <span>o</span>

test/rendering/fixtures/custom-inline-void/output.html

@@ -1,5 +1,5 @@
 
-<div data-slate-editor="true" contenteditable="true">
+<div data-slate-editor="true" contenteditable="true" role="textbox">
   <div style="position:relative;">
     <span>
       <span>

test/rendering/fixtures/custom-inline/output.html

@@ -1,5 +1,5 @@
 
-<div data-slate-editor="true" contenteditable="true">
+<div data-slate-editor="true" contenteditable="true" role="textbox">
   <div style="position:relative;">
     <span>
       <span>

test/rendering/fixtures/custom-mark-with-component/output.html

@@ -1,5 +1,5 @@
 
-<div data-slate-editor="true" contenteditable="true">
+<div data-slate-editor="true" contenteditable="true" role="textbox">
   <div style="position:relative;">
     <span>
       <span>one</span>

test/rendering/fixtures/custom-mark-with-function/output.html

@@ -1,5 +1,5 @@
 
-<div data-slate-editor="true" contenteditable="true">
+<div data-slate-editor="true" contenteditable="true" role="textbox">
   <div style="position:relative;">
     <span>
       <span>one</span>

test/rendering/fixtures/custom-mark-with-mixed/output.html

@@ -1,5 +1,5 @@
 
-<div data-slate-editor="true" contenteditable="true">
+<div data-slate-editor="true" contenteditable="true" role="textbox">
   <div style="position:relative;">
     <span>
       <span><span style="font-weight:bold;">one</span></span>

test/rendering/fixtures/custom-mark-with-object/output.html

@@ -1,5 +1,5 @@
 
-<div data-slate-editor="true" contenteditable="true">
+<div data-slate-editor="true" contenteditable="true" role="textbox">
   <div style="position:relative;">
     <span>
       <span>one</span>

test/rendering/fixtures/custom-mark-with-string/output.html

@@ -1,5 +1,5 @@
 
-<div data-slate-editor="true" contenteditable="true">
+<div data-slate-editor="true" contenteditable="true" role="textbox">
   <div style="position:relative;">
     <span>
       <span>one</span>

test/rendering/fixtures/default-block-and-inline/output.html

@@ -1,5 +1,5 @@
 
-<div data-slate-editor="true" contenteditable="true">
+<div data-slate-editor="true" contenteditable="true" role="textbox">
   <div style="position:relative;">
     <span>
       <span>

test/rendering/fixtures/default-block/output.html

@@ -1,5 +1,5 @@
 
-<div data-slate-editor="true" contenteditable="true">
+<div data-slate-editor="true" contenteditable="true" role="textbox">
   <div style="position:relative;">
     <span>
       <span>word</span>

test/rendering/fixtures/empty-text/output.html

@@ -1,5 +1,5 @@
 
-<div data-slate-editor="true" contenteditable="true">
+<div data-slate-editor="true" contenteditable="true" role="textbox">
   <div style="position:relative;">
     <span>
       <span><br></span>

test/rendering/fixtures/multiple-custom-block/output.html

@@ -1,5 +1,5 @@
 
-<div data-slate-editor="true" contenteditable="true">
+<div data-slate-editor="true" contenteditable="true" role="textbox">
   <div style="position:relative;">
     <span>
       <span>word</span>

test/rendering/fixtures/multiple-custom-inline/output.html

@@ -1,5 +1,5 @@
 
-<div data-slate-editor="true" contenteditable="true">
+<div data-slate-editor="true" contenteditable="true" role="textbox">
   <div style="position:relative;">
     <span>
       <span>

test/rendering/fixtures/nested-text-direction/output.html

@@ -1,5 +1,5 @@
 
-<div data-slate-editor="true" contenteditable="true">
+<div data-slate-editor="true" contenteditable="true" role="textbox">
   <div style="position:relative;">
   <div dir="rtl" style="position:relative;">
     <span>

test/rendering/fixtures/text-direction/output.html

@@ -1,5 +1,5 @@
 
-<div data-slate-editor="true" contenteditable="true">
+<div data-slate-editor="true" contenteditable="true" role="textbox">
   <div style="position:relative;">
     <span>
       <span>Hello World</span>