1
0
mirror of https://github.com/ianstormtaylor/slate.git synced 2025-08-11 17:53:59 +02:00

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

* Add prop "tabIndex" to editor

* Add prop "role"

* Typo

* Adapt rendering tests
This commit is contained in:
Samy Pessé
2017-01-19 02:29:37 +01:00
committed by Ian Storm Taylor
parent ef238b6189
commit 98995e7c08
20 changed files with 41 additions and 26 deletions

View File

@@ -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

View File

@@ -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>

View File

@@ -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}
/>
)
}

View File

@@ -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>

View File

@@ -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>

View File

@@ -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>

View File

@@ -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>

View File

@@ -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>

View File

@@ -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>

View File

@@ -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>

View File

@@ -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>

View File

@@ -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>

View File

@@ -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>

View File

@@ -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>

View File

@@ -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>

View File

@@ -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>

View File

@@ -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>

View File

@@ -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>

View File

@@ -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>

View File

@@ -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>