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

* Add prop "tabIndex" to editor

* Add prop "role"

* Typo

* Adapt rendering tests

docs/reference/components/editor.md

@@ -51,7 +51,7 @@ The top-level React component that renders the Slate editor itself.
 />
 ```
 
-### `className` 
+### `className`
 `String`
 
 An optional class name to apply to the content editable element.
@@ -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
 
@@ -122,7 +129,7 @@ An optional dictionary of styles to apply to the default block type's placeholde
 
 In addition to its own properties, the editor allows passing any of the properties that a [plugin](../plugins/plugin.md) defines as well.
 
-These properties are actually just a convenience—an implicit plugin definition. Internally, they are grouped together and turned into a plugin that is given first priority in the plugin stack. 
+These properties are actually just a convenience—an implicit plugin definition. Internally, they are grouped together and turned into a plugin that is given first priority in the plugin stack.
 
 For example, these two snippets of code are equivalent:
 
@@ -140,7 +147,7 @@ const plugins = [
 
 ```js
 const editorPlugin = {
-  onKeyDown: myKeyHandler 
+  onKeyDown: myKeyHandler
 }
 
 const plugins = [
@@ -179,17 +186,17 @@ Programmatically blur the editor.
 
 Programmatically focus the editor.
 
-### `getSchema` 
+### `getSchema`
 `getSchema() => Schema`
 
 Return the editor's current schema.
 
-### `getState` 
+### `getState`
 `getState() => State`
 
 Return the editor's current state.
 
-### `onChange` 
+### `onChange`
 `onChange(state: State) => Void`
 
 Effectively the same as `setState`. Invoking this method will update the state of the editor, running it through all of it's plugins, and passing it the parent component, before it cycles back down as the new `state` property of the editor.

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>