Make placeholder accessible

[korbit-ai]

User description

Placeholder won't read to screen readers, it technically can be read but it is not in the expected position in the flow. Instead, it should use placeholder aria-placeholder on the contenteditable.

Placeholder is now part of the ContentEditable (backward compatible for now), for two reasons:

1. It makes sense to couple the contenteditable with the placeholder. That's how native placeholder and input work.
2. This is a common pitfall. By coupling them we can ensure that either these properties are provided or none (when there's no placeholder).

Before, doesn't read, interferes with the flow:

Screen.Recording.2024-05-24.at.3.15.28.PM.mov

After:

Screen.Recording.2024-05-24.at.3.28.28.PM.mov

Description by Korbit AI

Note

This feature is in early access. You can enable or disable it in the Korbit Console.

What change is being made?

Refactor placeholder handling to improve accessibility by integrating placeholder text directly into the ContentEditable component and removing the separate Placeholder component.

Why are these changes being made?

This change ensures that placeholder text is more accessible by using the aria-placeholder attribute and simplifies the codebase by consolidating placeholder logic within the ContentEditable component. This approach also reduces redundancy and potential inconsistencies in placeholder handling across different components.

---

PR Type

enhancement

---

Description

• Refactored placeholder handling across multiple components to improve accessibility by integrating placeholder text directly into the ContentEditable component.
• Removed the separate Placeholder component, simplifying the codebase and reducing redundancy.
• Added aria-placeholder attributes to enhance accessibility.
• Introduced a new ContentEditableElement to manage editable state and placeholder logic.
• Updated CSS to style the integrated placeholder appropriately.

---

Changes walkthrough 📝

Relevant files

Enhancement

10 files App.tsx Integrate placeholder text into ContentEditable component examples/react-rich/src/App.tsx Removed Placeholder component. Integrated placeholder text directly into ContentEditable. Added aria-placeholder attribute for accessibility. +10/-5    Editor.tsx Refactor placeholder handling in Editor component                packages/lexical-playground/src/Editor.tsx Removed Placeholder component. Integrated placeholder text directly into ContentEditable. +3/-7      ImageComponent.tsx Update ImageComponent to use integrated placeholder            packages/lexical-playground/src/nodes/ImageComponent.tsx Removed Placeholder component. Integrated placeholder text directly into ContentEditable. +5/-7      InlineImageComponent.tsx InlineImageComponent refactored for integrated placeholder packages/lexical-playground/src/nodes/InlineImageNode/InlineImageComponent.tsx Removed Placeholder component. Integrated placeholder text directly into ContentEditable. +5/-7      StickyComponent.tsx StickyComponent updated for direct placeholder integration packages/lexical-playground/src/nodes/StickyComponent.tsx Removed Placeholder component. Integrated placeholder text directly into ContentEditable. +5/-7      index.tsx CommentPlugin refactored for direct placeholder use            packages/lexical-playground/src/plugins/CommentPlugin/index.tsx Removed Placeholder component. Integrated placeholder text directly into ContentEditable. +3/-3      ContentEditable.tsx Enhance ContentEditable with integrated placeholder support packages/lexical-playground/src/ui/ContentEditable.tsx Added placeholder and aria-placeholder properties. Integrated placeholder handling within ContentEditable. +20/-4    LexicalContentEditable.tsx Refactor LexicalContentEditable for placeholder integration packages/lexical-react/src/LexicalContentEditable.tsx Refactored to use ContentEditableElement. Integrated placeholder logic within component. +47/-91  LexicalContentEditableElement.tsx Introduce ContentEditableElement for placeholder management packages/lexical-react/src/shared/LexicalContentEditableElement.tsx New file for ContentEditableElement. Handles editable state and placeholder logic. +107/-0  ContentEditable.css Add styling for ContentEditable placeholder                            packages/lexical-playground/src/ui/ContentEditable.css Added styles for ContentEditable__placeholder. +21/-0

---

💡 PR-Agent usage:
Comment /help on the PR to get a list of all available PR-Agent tools and their descriptions

[korbit-ai]

Clone of the PR facebook/lexical#6171

[korbit-ai]

My review is in progress 📖 - I will have feedback for you in a few minutes!

[coderabbitai]

Important

Review skipped

Auto reviews are disabled on this repository.

Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository. To trigger a single review, invoke the @coderabbitai review command.

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

---

Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media?

Share

• X
• Mastodon
• Reddit
• LinkedIn

Tips

Chat

There are 3 ways to chat with CodeRabbit:

• Review comments: Directly reply to a review comment made by CodeRabbit. Example:
  • I pushed a fix in commit <commit_id>.
  • Generate unit testing code for this file.
  • Open a follow-up GitHub issue for this discussion.
• Files and specific lines of code (under the "Files changed" tab): Tag @coderabbitai in a new review comment at the desired location with your query. Examples:
  • @coderabbitai generate unit testing code for this file.
  • @coderabbitai modularize this function.
• PR comments: Tag @coderabbitai in a new PR comment to ask questions about the PR branch. For the best results, please provide a very specific query, as very limited context is provided in this mode. Examples:
  • @coderabbitai generate interesting stats about this repository and render them as a table.
  • @coderabbitai show all the console.log statements in this repository.
  • @coderabbitai read src/utils.ts and generate unit testing code.
  • @coderabbitai read the files in the src/scheduler package and generate a class diagram using mermaid and a README in the markdown format.
  • @coderabbitai help me debug CodeRabbit configuration file.

Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments.

CodeRabbit Commands (invoked as PR comments)

• @coderabbitai pause to pause the reviews on a PR.
• @coderabbitai resume to resume the paused reviews.
• @coderabbitai review to trigger an incremental review. This is useful when automatic reviews are disabled for the repository.
• @coderabbitai full review to do a full review from scratch and review all the files again.
• @coderabbitai summary to regenerate the summary of the PR.
• @coderabbitai resolve resolve all the CodeRabbit review comments.
• @coderabbitai configuration to show the current CodeRabbit configuration for the repository.
• @coderabbitai help to get help.

Additionally, you can add @coderabbitai ignore anywhere in the PR description to prevent this PR from being reviewed.

CodeRabbit Configuration File (.coderabbit.yaml)

• You can programmatically configure CodeRabbit by adding a .coderabbit.yaml file to the root of your repository.
• Please see the configuration documentation for more information.
• If your editor has YAML language server enabled, you can add the path at the top of this file to enable auto-completion and validation: # yaml-language-server: $schema=https://coderabbit.ai/integrations/schema.v2.json

Documentation and Community

• Visit our Documentation for detailed information on how to use CodeRabbit.
• Join our Discord Community to get help, request features, and share feedback.
• Follow us on X/Twitter for updates and announcements.

[korbit-ai]

I have reviewed your code and found 2 potential issues.

[korbit-ai]

I noticed that we're passing aria-placeholder as a prop to the ContentEditable component. While this is a step in the right direction for accessibility, we should verify if ContentEditable supports this attribute directly. If it doesn't, we might need to modify the ContentEditable component to ensure that the aria-placeholder is correctly applied to the underlying HTML element. Could you please check the ContentEditable implementation and make sure this attribute is being correctly utilized?

Chat with Korbit by mentioning @korbit-ai, and give a 👍 or 👎 to help Korbit improve your reviews.

[korbit-ai]

The placeholder prop is currently required, but there's no validation to ensure it's not an empty string. Consider adding a check to prevent rendering an empty placeholder, which could improve the component's robustness and prevent potential rendering issues. You could modify the placeholder rendering logic like this:

placeholder={
  placeholder ? (
    <div className={placeholderClassName ?? 'ContentEditable__placeholder'}>
      {placeholder}
    </div>
  ) : null
}

This change ensures that the placeholder is only rendered when it has content.

Chat with Korbit by mentioning @korbit-ai, and give a 👍 or 👎 to help Korbit improve your reviews.

[furwellness]

/review

[codiumai-pr-agent-free]

PR Reviewer Guide 🔍

(Review updated until commit e94e1e9)

⏱️ Estimated effort to review: 4 🔵🔵🔵🔵⚪

🧪 No relevant tests

🔒 No security concerns identified

⚡ Key issues to review Refactoring Complexity The ContentEditable component has been significantly refactored. It now includes a new Placeholder component and handles aria-placeholder. This change might introduce unexpected behavior and needs thorough testing. New File Introduction A new file LexicalContentEditableElement.tsx has been introduced. This file contains core functionality that was previously in LexicalContentEditable.tsx. The separation of concerns is good, but it requires careful review to ensure all functionality is preserved. API Change The ContentEditable component now accepts new props like placeholder and placeholderClassName. This change in API might break existing implementations and needs to be communicated to users.

[github-actions]

Persistent review updated to latest commit e94e1e9

[furwellness]

@coderabbitai full review

[codiumai-pr-agent-free]

Persistent review updated to latest commit e94e1e9

[coderabbitai]

Actions performed

Full review triggered.

[codiumai-pr-agent-free]

PR Code Suggestions ✨

Category	Suggestion	Score
Enhancement	Simplify conditional logic using optional chaining and nullish coalescing operators Consider using optional chaining and nullish coalescing operators to simplify the conditional logic in the Placeholder component. This can make the code more concise and easier to read. packages/lexical-react/src/LexicalContentEditable.tsx [54-62] -if (!showPlaceholder) { - return null; -} +return showPlaceholder ? (typeof content === 'function' ? content(editable) : content) ?? null; -if (typeof content === 'function') { - return content(editable); -} else { - return content; -} - Apply this suggestion Suggestion importance[1-10]: 8 Why: The suggestion simplifies the conditional logic, making the code more concise and readable without altering its functionality.	8
	Use object destructuring with default values in function parameters to simplify the code Consider using object destructuring with default values in the function parameters to simplify the code and make it more readable. packages/lexical-playground/src/ui/ContentEditable.tsx [20-36] export default function LexicalContentEditable({ - className, + className = 'ContentEditable__root', placeholder, - placeholderClassName, + placeholderClassName = 'ContentEditable__placeholder', }: Props): JSX.Element { return ( <ContentEditable - className={className ?? 'ContentEditable__root'} + className={className} aria-placeholder={placeholder} placeholder={ - <div className={placeholderClassName ?? 'ContentEditable__placeholder'}> + <div className={placeholderClassName}> {placeholder} </div> } /> ); } Apply this suggestion Suggestion importance[1-10]: 7 Why: The use of object destructuring with default values enhances code readability and reduces redundancy, making the function parameters clearer.	7
	Use default parameter values instead of nullish coalescing operators for className and placeholderClassName Consider using default parameter values for className and placeholderClassName to simplify the code and reduce the use of the nullish coalescing operator. packages/lexical-playground/src/ui/ContentEditable.tsx [25-35] return ( <ContentEditable - className={className ?? 'ContentEditable__root'} + className={className} aria-placeholder={placeholder} placeholder={ - <div className={placeholderClassName ?? 'ContentEditable__placeholder'}> + <div className={placeholderClassName}> {placeholder} </div> } /> ); Apply this suggestion Suggestion importance[1-10]: 6 Why: Using default parameter values simplifies the code slightly and reduces the need for nullish coalescing operators, improving readability.	6
Maintainability	Rename the Placeholder component to better reflect its conditional rendering functionality Consider using a more descriptive name for the Placeholder component, such as ConditionalPlaceholder, to better reflect its functionality of conditionally rendering the placeholder content based on the editor's state. packages/lexical-react/src/LexicalContentEditable.tsx [45-62] -function Placeholder({ +function ConditionalPlaceholder({ content, }: { content: ((isEditable: boolean) => null | JSX.Element) | null | JSX.Element; }): null | JSX.Element { const [editor] = useLexicalComposerContext(); const showPlaceholder = useCanShowPlaceholder(editor); const editable = useLexicalEditable(); if (!showPlaceholder) { return null; } - if (typeof content === 'function') { - return content(editable); - } else { - return content; - } + return typeof content === 'function' ? content(editable) : content; } Apply this suggestion Suggestion importance[1-10]: 7 Why: Renaming the component to ConditionalPlaceholder improves code readability and maintainability by making its purpose clearer.	7

[furwellness]

No comment from coderabbit