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

Make aria-describedby able to reference both the placeholder and the description #1741

Open
wants to merge 3 commits into
base: main
Choose a base branch
from
Open

Make aria-describedby able to reference both the placeholder and the description #1741

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
32a4002
Make aria-describedby able to reference both the placeholder and the …
afercia Apr 24, 2018
a23a161
Fix flow.
afercia Apr 25, 2018
1f33588
Make prettier happy.
afercia Sep 10, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
2 changes: 1 addition & 1 deletion meta/bundle-size-stats/Draft.js.json
View file
Open in desktop

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion meta/bundle-size-stats/Draft.min.js.json
View file
Open in desktop

Large diffs are not rendered by default.

18 changes: 14 additions & 4 deletions src/component/base/DraftEditor.react.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -152,7 +152,7 @@ class DraftEditor extends React.Component<DraftEditorProps, State> {
_dragCount: number;
_internalDrag: boolean;
_editorKey: string;
_placeholderAccessibilityID: string;
_placeholderAccessibilityID: ?string;
_latestEditorState: EditorState;
_latestCommittedEditorState: EditorState;
_pendingStateFromBeforeInput: void | EditorState;
Expand Down Expand Up @@ -302,9 +302,21 @@ class DraftEditor extends React.Component<DraftEditorProps, State> {

return <DraftEditorPlaceholder {...placeHolderProps} />;
}
this._placeholderAccessibilityID = null;
return null;
}

_getAriaDescribedByIDs(): ?string {
const ariaDescribedByIDs = [
this._placeholderAccessibilityID,
this.props.ariaDescribedBy,
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Without type safety, I'm concerned that folks might pass in either a string or an Array for this prop value. Is there a way to guarantee a string? Or, if not, you should run this prop through Array.isArray and spread it (or join it) before joining with the placeholder id.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I understand the concern. On the other hand, should this apply also to other props, for example ariaLabelledBy? I couldn't find in the codebase other examples of checking for a prop value this way, and it would look a bit overkill to me. If you strongly feel it's necessary, please do let me know.

]
.filter(Boolean)
.join(' ');

return ariaDescribedByIDs ? ariaDescribedByIDs : null;
}

render(): React.Node {
const {
blockRenderMap,
Expand Down Expand Up @@ -370,9 +382,7 @@ class DraftEditor extends React.Component<DraftEditorProps, State> {
}
aria-autocomplete={readOnly ? null : this.props.ariaAutoComplete}
aria-controls={readOnly ? null : this.props.ariaControls}
aria-describedby={
this.props.ariaDescribedBy || this._placeholderAccessibilityID
}
aria-describedby={this._getAriaDescribedByIDs()}
aria-expanded={readOnly ? null : ariaExpanded}
aria-label={this.props.ariaLabel}
aria-labelledby={this.props.ariaLabelledBy}
Expand Down
2 changes: 1 addition & 1 deletion src/component/base/DraftEditorPlaceholder.react.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,7 @@ const React = require('React');
const cx = require('cx');

type Props = {
accessibilityID: string,
accessibilityID: ?string,
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Rather than making the value nullable, make the property optional. If the property is defined, it must be a string.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looking better at this, I think it should be nullable. When the placeholder prop is not set, it's necessary to avoid to render the HTML attribute aria-describedby that would point to a non-existing element.

editorState: EditorState,
text: string,
textAlignment: DraftTextAlignment,
Expand Down