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:
committed by
Ian Storm Taylor
parent
ef238b6189
commit
98995e7c08
@@ -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
|
||||
|
||||
|
@@ -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>
|
||||
|
@@ -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}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
@@ -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>
|
||||
|
@@ -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>
|
||||
|
@@ -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>
|
||||
|
@@ -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>
|
||||
|
@@ -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>
|
||||
|
@@ -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>
|
||||
|
@@ -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>
|
||||
|
@@ -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>
|
||||
|
@@ -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>
|
||||
|
@@ -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>
|
||||
|
@@ -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>
|
||||
|
@@ -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>
|
||||
|
@@ -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>
|
||||
|
@@ -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>
|
||||
|
@@ -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>
|
||||
|
@@ -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>
|
||||
|
@@ -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>
|
||||
|
Reference in New Issue
Block a user