a11y: Exit the lexical Editor and button a11y on tab index

[g4rry420]

What does this PR do?

• Lexical Editor in v0.5.0 (by default) has Tab-to-Indent feature enabled. In this pr, I have disabled the tab key to work on lexical editor. However, if we update the lexical to v0.7.0, then by default, they have removed this feature. Ref:- https://github.com/facebook/lexical/issues/2854
• The Continue button in the new event dialog is accessed before the Close button, which seems counter intuitive as per a11y perceptive. Disclaimer: I am not expert in a11y, I might be wrong here

Fixes #7740

Before: https://www.loom.com/share/9486b608c5614246b849bc0cc7109d9b

After: https://www.loom.com/share/b3f39287bfd24a50acdefb6859b1d918

Environment: Staging(main branch) / Production

Type of change

• New feature (might be a breaking change which adds functionality, if current users use tab and shift + tab for indent in the editor)

How should this be tested?

Using the tab, focus on different inputs of new event dialog

Checklist

• I haven't added tests that prove my fix is effective or that my feature works

[vercel[bot]]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
cal	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	May 12, 2023 4:30pm
ui	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	May 12, 2023 4:30pm

[vercel[bot]]

@g4rry420 is attempting to deploy a commit to the cal Team on Vercel.

A member of the Team first needs to authorize it.

[github-actions[bot]]

📦 Next.js Bundle Analysis for @calcom/web

This analysis was generated by the Next.js Bundle Analysis action. 🤖

Eight Pages Changed Size

The following pages changed size from the code in this PR compared to its base branch:

Page	Size (compressed)	First Load	% of Budget (350 KB)
/apps/[slug]/[...pages]	456.81 KB	607.72 KB	173.63% (🟡 +0.17%)
/auth/setup	174.8 KB	325.71 KB	93.06% (🟡 +0.16%)
/event-types	425.82 KB	576.73 KB	164.78% (🟡 +2.63%)
/event-types/[type]	477.93 KB	628.84 KB	179.67% (🟡 +2.82%)
/getting-started/[[...step]]	425.61 KB	576.52 KB	164.72% (🟡 +2.62%)
/settings/my-account/profile	371.31 KB	522.22 KB	149.21% (🟡 +2.62%)
/settings/teams/[id]/profile	366.68 KB	517.59 KB	147.88% (🟡 +2.62%)
/workflows/[workflow]	367.24 KB	518.15 KB	148.04% (🟡 +2.62%)

Details

Only the gzipped size is provided here based on an expert tip.

First Load is the size of the global bundle plus the bundle for the individual page. If a user were to show up to your website and land on a given page, the first load size represents the amount of javascript that user would need to download. If next/link is used, subsequent page loads would only need to download that page's bundle (the number in the "Size" column), since the global bundle has already been downloaded.

Any third party scripts you have added directly to your app using the <script> tag are not accounted for in this analysis

The "Budget %" column shows what percentage of your performance budget the First Load total takes up. For example, if your budget was 100kb, and a given page's first load size was 10kb, it would be 10% of your budget. You can also see how much this has increased or decreased compared to the base branch of your PR. If this percentage has increased by 20% or more, there will be a red status indicator applied, indicating that special attention should be given to this. If you see "+/-

[socket-security[bot]]

New dependency changes detected. Learn more about Socket for GitHub ↗︎

---

👍 No new dependency issues detected in pull request

Bot Commands

To ignore an alert, reply with a comment starting with @SocketSecurity ignore followed by a space separated list of package-name@version specifiers. e.g. @SocketSecurity ignore [email protected] bar@* or ignore all packages with @SocketSecurity ignore-all

Pull request alert summary

Issue	Status
Install scripts	✅ 0 issues
Native code	✅ 0 issues
Bin script shell injection	✅ 0 issues
Unresolved require	✅ 0 issues
Invalid package.json	✅ 0 issues
HTTP dependency	✅ 0 issues
Git dependency	✅ 0 issues
Potential typo squat	✅ 0 issues
Known Malware	✅ 0 issues
Telemetry	✅ 0 issues
Protestware/Troll package	✅ 0 issues

---

📊 Modified Dependency Overview:

⬆️ Updated Package	Version Diff	Added Capability Access	+/- Transitive Count	Publisher
@lexical/[email protected]	0.5.0...0.9.2	None	+20/-20	acywatson
[email protected]	0.5.0...0.9.2	None	+0/-0	acywatson

[github-actions[bot]]

📦 Next.js Bundle Analysis for @calcom/web

This analysis was generated by the Next.js Bundle Analysis action. 🤖

Eight Pages Changed Size

The following pages changed size from the code in this PR compared to its base branch:

Page	Size (compressed)	First Load	% of Budget (350 KB)
/apps/[slug]/[...pages]	387.6 KB	620.63 KB	177.32% (🟡 +0.15%)
/auth/setup	80.6 KB	313.63 KB	89.61% (🟡 +0.19%)
/event-types	352.24 KB	585.26 KB	167.22% (🟡 +2.34%)
/event-types/[type]	386.64 KB	619.66 KB	177.05% (🟡 +2.50%)
/getting-started/[[...step]]	312.19 KB	545.21 KB	155.78% (🟡 +2.33%)
/settings/my-account/profile	274.98 KB	508.01 KB	145.15% (🟡 +2.33%)
/settings/teams/[id]/profile	269.68 KB	502.71 KB	143.63% (🟡 +2.33%)
/workflows/[workflow]	294.88 KB	527.9 KB	150.83% (🟡 +2.36%)

Details

Only the gzipped size is provided here based on an expert tip.

First Load is the size of the global bundle plus the bundle for the individual page. If a user were to show up to your website and land on a given page, the first load size represents the amount of javascript that user would need to download. If next/link is used, subsequent page loads would only need to download that page's bundle (the number in the "Size" column), since the global bundle has already been downloaded.

Any third party scripts you have added directly to your app using the <script> tag are not accounted for in this analysis

The "Budget %" column shows what percentage of your performance budget the First Load total takes up. For example, if your budget was 100kb, and a given page's first load size was 10kb, it would be 10% of your budget. You can also see how much this has increased or decreased compared to the base branch of your PR. If this percentage has increased by 20% or more, there will be a red status indicator applied, indicating that special attention should be given to this. If you see "+/-

[CarinaWolli]

@g4rry420 Can you fix the type error? Looks like we need the ErrorBoundary property in RichtTextPlugin

[github-actions[bot]]

📦 Next.js Bundle Analysis for @calcom/web

This analysis was generated by the Next.js Bundle Analysis action. 🤖

Eight Pages Changed Size

The following pages changed size from the code in this PR compared to its base branch:

Page	Size (compressed)	First Load	% of Budget (350 KB)
/apps/[slug]/[...pages]	387.08 KB	620.11 KB	177.17% (🟢 -0.15%)
/auth/setup	79.95 KB	312.98 KB	89.42% (🟢 -0.19%)
/event-types	353.09 KB	586.12 KB	167.46% (🟡 +2.61%)
/event-types/[type]	386.93 KB	619.96 KB	177.13% (🟡 +2.45%)
/getting-started/[[...step]]	313.05 KB	546.08 KB	156.02% (🟡 +2.61%)
/settings/my-account/profile	275.85 KB	508.87 KB	145.39% (🟡 +2.61%)
/settings/teams/[id]/profile	270.54 KB	503.57 KB	143.88% (🟡 +2.60%)
/workflows/[workflow]	295.65 KB	528.68 KB	151.05% (🟡 +2.58%)

Details

Only the gzipped size is provided here based on an expert tip.

First Load is the size of the global bundle plus the bundle for the individual page. If a user were to show up to your website and land on a given page, the first load size represents the amount of javascript that user would need to download. If next/link is used, subsequent page loads would only need to download that page's bundle (the number in the "Size" column), since the global bundle has already been downloaded.

Any third party scripts you have added directly to your app using the <script> tag are not accounted for in this analysis

The "Budget %" column shows what percentage of your performance budget the First Load total takes up. For example, if your budget was 100kb, and a given page's first load size was 10kb, it would be 10% of your budget. You can also see how much this has increased or decreased compared to the base branch of your PR. If this percentage has increased by 20% or more, there will be a red status indicator applied, indicating that special attention should be given to this. If you see "+/-

[github-actions[bot]]

📦 Next.js Bundle Analysis for @calcom/web

This analysis was generated by the Next.js Bundle Analysis action. 🤖

Six Pages Changed Size

The following pages changed size from the code in this PR compared to its base branch:

Page	Size (compressed)	First Load	% of Budget (350 KB)
/event-types	353.23 KB	586 KB	167.43% (🟡 +2.58%)
/event-types/[type]	387.35 KB	620.12 KB	177.18% (🟡 +2.58%)
/getting-started/[[...step]]	312.63 KB	545.4 KB	155.83% (🟡 +2.58%)
/settings/my-account/profile	275.79 KB	508.56 KB	145.30% (🟡 +2.58%)
/settings/teams/[id]/profile	270.48 KB	503.25 KB	143.79% (🟡 +2.58%)
/workflows/[workflow]	295.88 KB	528.65 KB	151.04% (🟡 +2.59%)

Details

Only the gzipped size is provided here based on an expert tip.

First Load is the size of the global bundle plus the bundle for the individual page. If a user were to show up to your website and land on a given page, the first load size represents the amount of javascript that user would need to download. If next/link is used, subsequent page loads would only need to download that page's bundle (the number in the "Size" column), since the global bundle has already been downloaded.

Any third party scripts you have added directly to your app using the <script> tag are not accounted for in this analysis

The "Budget %" column shows what percentage of your performance budget the First Load total takes up. For example, if your budget was 100kb, and a given page's first load size was 10kb, it would be 10% of your budget. You can also see how much this has increased or decreased compared to the base branch of your PR. If this percentage has increased by 20% or more, there will be a red status indicator applied, indicating that special attention should be given to this. If you see "+/-

[github-actions[bot]]

📦 Next.js Bundle Analysis for @calcom/web

This analysis was generated by the Next.js Bundle Analysis action. 🤖

Six Pages Changed Size

The following pages changed size from the code in this PR compared to its base branch:

Page	Size (compressed)	First Load	% of Budget (350 KB)
/event-types	357.54 KB	588.54 KB	168.15% (🟡 +2.60%)
/event-types/[type]	394.09 KB	625.09 KB	178.60% (🟡 +2.58%)
/getting-started/[[...step]]	314.31 KB	545.31 KB	155.80% (🟡 +2.59%)
/settings/my-account/profile	277.79 KB	508.79 KB	145.37% (🟡 +2.59%)
/settings/teams/[id]/profile	272.47 KB	503.47 KB	143.85% (🟡 +2.59%)
/workflows/[workflow]	299.56 KB	530.57 KB	151.59% (🟡 +2.59%)

Details

Only the gzipped size is provided here based on an expert tip.

First Load is the size of the global bundle plus the bundle for the individual page. If a user were to show up to your website and land on a given page, the first load size represents the amount of javascript that user would need to download. If next/link is used, subsequent page loads would only need to download that page's bundle (the number in the "Size" column), since the global bundle has already been downloaded.

Any third party scripts you have added directly to your app using the <script> tag are not accounted for in this analysis

The "Budget %" column shows what percentage of your performance budget the First Load total takes up. For example, if your budget was 100kb, and a given page's first load size was 10kb, it would be 10% of your budget. You can also see how much this has increased or decreased compared to the base branch of your PR. If this percentage has increased by 20% or more, there will be a red status indicator applied, indicating that special attention should be given to this. If you see "+/-

[Udit-takkar]

@g4rry420 there are still some conflict in this PR. just tag me after you fix them

[g4rry420]

@Udit-takkar Hi, I have resolved the conflicts, please let me know if you see any issues :)

[felipe-muner]

🚀