Skip to content
This repository has been archived by the owner on Feb 6, 2023. It is now read-only.

Commit

Permalink
aria-haspopup and aria-expanded are null if role is textbox
Browse files Browse the repository at this point in the history
Summary: `aria-haspopup` and `aria-expanded` should not be present (not even with a false value), when the role of the editor is not combobox.  Having these attributes present causes a screen reader to announce that the element is expandable.

Reviewed By: spicyj

Differential Revision: D5475018

fbshipit-source-id: bb5067619f8728503baaed4ef963860ddaa8a070
  • Loading branch information
jessebeach authored and facebook-github-bot committed Jul 28, 2017
1 parent eb79fb0 commit 3494d45
Showing 1 changed file with 13 additions and 3 deletions.
16 changes: 13 additions & 3 deletions src/component/base/DraftEditor.react.js
Original file line number Diff line number Diff line change
Expand Up @@ -228,6 +228,16 @@ class DraftEditor extends React.Component {
wordWrap: 'break-word',
};

// The aria-expanded and aria-haspopup properties should only be rendered
// for a combobox.
const ariaRole = this.props.role || 'textbox';
const ariaExpanded = ariaRole === 'combobox'
? !!this.props.ariaExpanded
: null;
const ariaHasPopup = ariaRole === 'combobox'
? !!this.props.ariaHasPopup
: null;

return (
<div className={rootClass}>
{this._renderPlaceholder()}
Expand All @@ -242,8 +252,8 @@ class DraftEditor extends React.Component {
aria-describedby={
this._showPlaceholder() ? this._placeholderAccessibilityID : null
}
aria-expanded={readOnly ? null : this.props.ariaExpanded}
aria-haspopup={readOnly ? null : this.props.ariaHasPopup}
aria-expanded={readOnly ? null : ariaExpanded}
aria-haspopup={readOnly ? null : ariaHasPopup}
aria-label={this.props.ariaLabel}
aria-multiline={this.props.ariaMultiline}
aria-owns={readOnly ? null : this.props.ariaOwneeID}
Expand Down Expand Up @@ -281,7 +291,7 @@ class DraftEditor extends React.Component {
onPaste={this._onPaste}
onSelect={this._onSelect}
ref="editor"
role={readOnly ? null : (this.props.role || 'textbox')}
role={readOnly ? null : ariaRole}
spellCheck={allowSpellCheck && this.props.spellCheck}
style={contentStyle}
suppressContentEditableWarning
Expand Down

0 comments on commit 3494d45

Please sign in to comment.