Azure · ruimhu1201 · Dec 23, 2024 · Dec 23, 2024 · Dec 23, 2024 · Dec 23, 2024
diff --git a/samples/javascript/chatapp/nativeapi/public/fancy.html b/samples/javascript/chatapp/nativeapi/public/fancy.html
@@ -87,11 +87,12 @@
         <main role="main" class="col p-md-4 p-2">
             <div class="d-flex flex-column flex-nowrap p-2">
                 <form v-on:submit.prevent="connect(client)" class="py-2">
-                    <div class="input-group">
+                    <div class="input-group align-items-center">
+                        <label for="endpointInput" class="mr-2 font-weight-bold" style="font-size: 1rem;">User Name:</label>
                         <input type="text" class="form-control" v-model="client.endpoint" id="endpointInput"
-                            aria-describedby="endpointHelp" placeholder="Type Your User Name Here">
+                            aria-describedby="endpointHelp">
                         <button type="submit" class="btn btn-primary" style="width: 100px;"
-                            :disabled="!client.endpoint">Connect</button>
+                             :disabled="!client.endpoint">Connect</button>
                     </div>
                 </form>
                 <div class="bg-light chat" v-bind:scrollTop="$attrs.scrollHeight">

diff --git a/samples/javascript/codestream/public/index.html b/samples/javascript/codestream/public/index.html
@@ -22,15 +22,14 @@
 
 <body>
   <nav class="navbar navbar-expand navbar-dark bg-dark">
-    <span class="navbar-brand" aria-label="code stream">CodeStream</span>
     <div class="collapse navbar-collapse" id="navbarSupportedContent">
       <span class="navbar-text" style="color: white">Share the link to others so they can watch you code: </span>
       <ul class="navbar-nav mr-auto">
         <li class="nav-item active">
           <a class="nav-link" id="url" target="_blank" href="#"></a>
         </li>
       </ul>
-      <span id="status" class="navbar-text" style="color: white">  </span>
+      <span id="status" class="navbar-text" style="color: white; display: inline-block; white-space: normal; overflow-wrap: break-word;">  </span>
     </div>
     </nav>
   <div class="contai ner-fluid">

diff --git a/samples/javascript/whiteboard/public/index.html b/samples/javascript/whiteboard/public/index.html
@@ -109,7 +109,7 @@
           <input class="form-control" type="text" placeholder="Type here to chat..." v-model="draft"
             v-on:keypress.enter="sendMessage" aria-label="text input place">
           <div class="input-group-append">
-              <button class="btn btn-outline-success" v-bind:disabled="!draft" v-on:click="sendMessage" aria-label="send message button">
+              <button class="btn btn-outline-success" v-bind:disabled="!draft" v-on:click="sendMessage" aria-label="message sent">
                   <i class="fas fa-arrow-right"></i>
               </button>
           </div>
@@ -127,7 +127,7 @@ <h5 class="modal-title" id="exampleModalLabel">Please input your name</h5>
               v-on:keypress.enter="setName">
           </div>
           <div class="modal-footer">
-            <button type="button" class="btn btn-primary" v-bind:disabled="!name" data-dismiss="modal" aria-label="ok bottom">OK</button>
+            <button type="button" class="btn btn-primary" v-bind:disabled="!name" data-dismiss="modal" aria-label="ok">OK</button>
           </div>
         </div>
       </div>

diff --git a/website/blog/2022-06-29-welcome/index.md b/website/blog/2022-06-29-welcome/index.md
@@ -4,9 +4,12 @@ title: Welcome
 authors: [WangpengL]
 custom_edit_url: null
 ---
+<main>
 
 This is a site dedicated to showing developers what they can build with Azure Web PubSub through live demos. If a picture is worth a thousand words, a live demo is probably worth a lot more than that.
 
 Azure Web PubSub is a cloud service that helps you build real-time messaging web applications using WebSockets and the publish-subscribe pattern easily. This real-time functionality allows publishing content updates between server and connected clients (for example a single page web application or mobile application). The clients do not need to poll the latest updates, or submit new HTTP requests for updates.
 
 Check out the demos on the site and let us know what you think.
+
+</main>
diff --git a/website/blog/2022-11-14-what-is-websockets_part1/index.md b/website/blog/2022-11-14-what-is-websockets_part1/index.md
@@ -4,6 +4,7 @@ title: What is WebSocket? (part 1/2)
 authors: [JialinX, KevinG]
 custom_edit_url: null
 ---
+<main>
 
 ## **Summary**  
 This article is the first of a two-part series that describes the values of WebSocket on a high-level.
@@ -45,3 +46,4 @@ In the second part, we will explore the idea of “full-duplex”.
 The bicycle photograph is taken by __[:link: Philipp M](https://www.pexels.com/@luftschnitzel/)__.  
 The bi-fold door photograph is taken by __[:link: sena](https://www.pexels.com/@sena-124356903/)__.
 
+</main>
diff --git a/website/blog/2022-11-25-what-is-websockets_part2/index.md b/website/blog/2022-11-25-what-is-websockets_part2/index.md
@@ -4,6 +4,7 @@ title: What is WebSocket? (part 2/2)
 authors: [JialinX, KevinG]
 custom_edit_url: null
 ---
+<main>
 
 ## **Summary**  
 This article is the second of a two-part series that describes the values of WebSocket on a high-level.
@@ -46,3 +47,4 @@ The walkie-talkie style of the early web was fine when communication was largely
 **Credits:**  
 The walkie-talkie and the grandma photographs were taken by __[:link: cottonbro studio](https://www.pexels.com/@cottonbro/)__.  
 
+</main>
diff --git a/website/blog/2023-11-20-web-pubsub-for-socket.io-ga/index.md b/website/blog/2023-11-20-web-pubsub-for-socket.io-ga/index.md
@@ -5,6 +5,8 @@ authors: [KevinG]
 custom_edit_url: null
 ---
 
+<main>
+
 ## **TL;DR**  
 Socket.IO library is natively supported on Azure. 
 
@@ -88,4 +90,6 @@ Since public preview, we received positive feedback from developers and now we a
 ## **Resources and references**
 - [:link: Socket.IO library documentation](https://socket.io/)
 - [:link: Quickstarts to migrate an existing Socket.IO app on Azure](https://learn.microsoft.com/azure/azure-web-pubsub/socketio-quickstart)
-- [:link: Internal: how does Azure solve the scalability challenge for Socket.IO developers](https://learn.microsoft.com/azure/azure-web-pubsub/socketio-service-internal)
+- [:link: Internal: how does Azure solve the scalability challenge for Socket.IO developers](https://learn.microsoft.com/azure/azure-web-pubsub/socketio-service-internal)
+
+</main>
diff --git a/website/src/components/Carousel/ButtonNav.js b/website/src/components/Carousel/ButtonNav.js
@@ -7,10 +7,10 @@ function ButtonNav({ direction, onClick, isShow, ariaLabel }) {
   return (
     <button tab="true"
         className={`${isShow
-            ? 'bg-gray-50-300 flex h-12 w-12 cursor-pointer items-center justify-center rounded-full bg-gray-50 opacity-90 hover:opacity-100 active:bg-gray-200'
+            ? '**bg-gray-50-300 flex h-8 w-8 cursor-pointer items-center justify-center rounded-full bg-gray-50 opacity-90 hover:opacity-100 active:bg-gray-200**'
             : 'opacity-0'
             }`}
-        onClick={onClick} tabIndex='0' aria-label={ariaLabel}
+        onClick={onClick} tabIndex='0' aria-label={ariaLabel} style={{ padding: '4px', fontSize: '12px' }}
     >
       {direction === 'left' ? <ChevronLeft /> : <ChevronRight />}
     </button>

diff --git a/website/src/components/Carousel/CarouselSlide.js b/website/src/components/Carousel/CarouselSlide.js
@@ -3,11 +3,11 @@ import React from 'react'
 function CarouselSlide({ title, description, imageSrc }) {
   return (
     <div className="relative w-full">
-      <section className="absolute top-2 left-5 md:top-44 lg:top-56 xl:top-80">
-        <h1 className="max-w-[90%] py-7 text-3xl font-bold text-gray-50 drop-shadow-md md:ml-10 md:max-w-[70%] md:text-5xl lg:ml-14 lg:max-w-[60%] xl:text-6xl">
+      <section className="absolute top-2 left-5 w-full px-2 md:top-44 lg:top-56 xl:top-80">
+        <h1 className="max-w-[90%] py-3 text-2xl font-bold text-gray-50 drop-shadow-md sm:py-7 sm:text-3xl md:ml-10 md:max-w-[70%] md:text-5xl lg:ml-14 lg:max-w-[60%] xl:text-6xl">
           {title}
         </h1>
-        <p className="max-w-3xl text-gray-200 md:ml-10 md:block md:max-w-[70%] lg:ml-14">{description}</p>
+        <p className="max-w-[90%] text-gray-200 sm:text-sm md:ml-10 md:block md:max-w-[70%] lg:ml-14 lg:text-base">{description}</p>
       </section>
       <img src={imageSrc} className="h-[340px] w-full object-cover md:h-[600px] xl:h-[750px]" aria-label={description} alt={description} />
     </div>

diff --git a/website/src/components/Common/ButtonLink.js b/website/src/components/Common/ButtonLink.js
@@ -3,7 +3,7 @@ import React from 'react'
 function ButtonLink({ text, to, children, openInNewTab = true, tabIndex = 0, ariaLabel = "" }) {
     text = text.replace(/ /g, '\u00a0'); 
     return (
-        <a href={to} target={openInNewTab ? '_blank' : ''} className="absolute bottom-4 flex items-center font-semibold justify-center rounded-sm bg-blue-600 px-5 py-2 text-sm text-gray-100 hover:bg-blue-700 gap-2" tabIndex={tabIndex} aria-label={ariaLabel} role="button" >
+        <a href={to} target={openInNewTab ? '_blank' : ''} className="absolute bottom-4 flex items-center font-semibold justify-center rounded-sm bg-blue-600 px-5 py-2 text-sm text-gray-100 hover:bg-blue-700 gap-2 hover:text-gray-100" tabIndex={tabIndex} aria-label={ariaLabel} role="button" >
             {children && <div className="w-5">{children}</div>}
             <div>
                 {text}

diff --git a/website/src/components/Common/Footer.js b/website/src/components/Common/Footer.js
@@ -10,13 +10,13 @@ function Footer() {
     <footer className="flex justify-center bg-gray-100  py-2 text-xs tracking-wider text-gray-600">
       <ul className="flex gap-3">
         <li>
-          <h6><a href="https://privacy.microsoft.com/en-us/privacystatement"><u>Privacy</u></a></h6>
+          <a href="https://privacy.microsoft.com/en-us/privacystatement"><u>Privacy</u></a>
         </li>
         <li>
-          <h6><a href="https://www.microsoft.com/en-us/legal/terms-of-use"><u>Terms of Use</u></a></h6>
+          <a href="https://www.microsoft.com/en-us/legal/terms-of-use"><u>Terms of Use</u></a>
         </li>
         <li>
-          <h6><a href="https://www.microsoft.com/en-us/legal/intellectualproperty/trademarks"><u>Trademarks</u></a></h6>
+          <a href="https://www.microsoft.com/en-us/legal/intellectualproperty/trademarks"><u>Trademarks</u></a>
         </li>
         {visible && (
           <li
@@ -29,7 +29,7 @@ function Footer() {
           </li>
         )}
 
-        <li><h6>{`© Microsoft ${new Date().getFullYear()}`}</h6></li>
+        <li>{`© Microsoft ${new Date().getFullYear()}`}</li>
       </ul>
     </footer>
   )

diff --git a/website/src/components/DemoPage/Chatr/Chatr.js b/website/src/components/DemoPage/Chatr/Chatr.js
@@ -29,7 +29,7 @@ function Chatr() {
 function Overview() {
   return (
     <div>
-      <h2 className="text-4xl">Overview</h2>
+      <h1 className="text-4xl">Overview</h1>
       <TextBlock title="About the app">
         <p>
           This demo is developed by &nbsp;

diff --git a/website/src/components/DemoPage/CodeBlock.js b/website/src/components/DemoPage/CodeBlock.js
@@ -1,11 +1,35 @@
-import React from 'react'
-import { CopyBlock, dracula } from 'react-code-blocks'
+import React, { useEffect } from 'react'
+import { CopyBlock, github } from 'react-code-blocks'
 
 function CodeBlock({ text, language, title }) {
+  useEffect(() => {
+    // Add aria-label dynamically to the button inside the CopyBlock
+    const buttons = document.querySelectorAll('.copy-button-aria button[type="button"]');
+    buttons.forEach((button) => {
+        button.setAttribute('aria-label', 'Copy code to clipboard');
+    });
+  }, []);
+
   return (
-    <div className="mb-3">
+    <div className="mb-3 copy-button-aria">
       {title && <h5 className="font-bold">{title}</h5>}
-      <CopyBlock text={text} language={language} showLineNumbers codeBlock wrapLines theme={dracula} />
+      <CopyBlock text={text} language={language} showLineNumbers codeBlock wrapLines theme={github} />
+        <style>
+          {`
+            /* Target all buttons inside any code block container */
+            .mb-3 button[type="button"]:focus,
+            .mb-3 button[type="button"]:focus-visible {
+            outline: 2px solid #FFD700 !important; /* Bright yellow outline */
+            outline-offset: 4px !important;        /* Space between outline and button */
+            box-shadow: 0 0 6px 2px rgba(255, 215, 0, 0.8) !important; /* Glow effect */
+            border-radius: 4px;                   /* Smooth rounded corners */
+            }
+            /* Optional hover state for better UX */
+            .mb-3 button[type="button"]:hover {
+            box-shadow: 0 0 6px 2px rgba(255, 184, 0, 0.8);
+            }
+          `}
+        </style>
     </div>
   )
 }

diff --git a/website/src/components/DemoPage/CodeStream/CodeStream.js b/website/src/components/DemoPage/CodeStream/CodeStream.js
@@ -38,7 +38,7 @@ function CodeStream() {
 function Overview() {
   return (
     <div>
-      <h2 className="text-4xl">Overview</h2>
+      <h1 className="text-4xl">Overview</h1>
       <TextBlock title="About the app">
         <p>This is a sample application to demonstrate how to use Azure Web PubSub to livestream your code to others.</p>
       </TextBlock>

diff --git a/website/src/components/DemoPage/CollaborativeWhiteboard/CollaborativeWhiteboard.js b/website/src/components/DemoPage/CollaborativeWhiteboard/CollaborativeWhiteboard.js
@@ -38,7 +38,7 @@ function CollaborativeWhiteboard() {
 function Overview() {
   return (
     <div>
-      <h2 className="text-4xl">Overview</h2>
+      <h1 className="text-4xl">Overview</h1>
       <TextBlock title="About the app">
         <p>
           This is a sample project to demonstrate how to build a web application for real time collaboration using Azure, Node.js and other related

diff --git a/website/src/components/DemoPage/DemoTabs.tsx b/website/src/components/DemoPage/DemoTabs.tsx
@@ -12,7 +12,7 @@ function DemoTabs({ overview, local, deploy, resources }) {
 
   return (
     <div>
-      <div className="mb-8 w-full overflow-y-hidden overflow-x-scroll">
+      <div className="mb-8 w-full overflow-visible" style={{ margin: '20px' }}>
         <Pivot aria-label="Details about the demo" selectedKey={selectedKey} onLinkClick={handleLinkClick} headersOnly={true}>
           {overview && <PivotItem headerText="Overview" itemKey="overview" />}
           {local && <PivotItem headerText="Run locally" itemKey="local" />}

diff --git a/website/src/components/DemoPage/Metaverse/Metaverse.js b/website/src/components/DemoPage/Metaverse/Metaverse.js
@@ -32,7 +32,7 @@ function Metaverse() {
 function Overview() {
   return (
     <div>
-      <h2 className="text-4xl">Overview</h2>
+      <h1 className="text-4xl">Overview</h1>
       <TextBlock title="About the app">
         <p>An app demonstrating how Azure Web PubSub can be used to enable multi-player experience in Metaverse (coming soon)</p>
       </TextBlock>

diff --git a/website/src/components/DemoPage/RealtimeScoreboard/RealtimeScoreboard.js b/website/src/components/DemoPage/RealtimeScoreboard/RealtimeScoreboard.js
@@ -38,7 +38,7 @@ function RealtimeScoreboard() {
 function Overview() {
   return (
     <div>
-      <h2 className="text-4xl">Overview</h2>
+      <h1 className="text-4xl">Overview</h1>
       <TextBlock title="About the app">
         <p>This app demonstrates how to push data from server to connected clients using Azure Web PubSub</p>
       </TextBlock>

diff --git a/website/src/components/DemoPage/SimpleChatApp/SimpleChatApp.js b/website/src/components/DemoPage/SimpleChatApp/SimpleChatApp.js
@@ -38,7 +38,7 @@ function SimpleChatApp() {
 function Overview() {
   return (
     <div>
-      <h2 className="text-4xl">Overview</h2>
+      <h1 className="text-4xl">Overview</h1>
       <TextBlock title="About the app">
         <p>A simple real-time chat app demonstrating the use of JavaScript server SDK provided by Azure Web PubSub</p>
       </TextBlock>

diff --git a/website/src/components/DemoPage/SplitDemo.js b/website/src/components/DemoPage/SplitDemo.js
@@ -5,12 +5,13 @@ import ButtonLink from '@site/src/components/Common/ButtonLink'
 import GitHub from '@site/static/logos/github_logo.svg'
 
 function SplitDemo({ alert, leftSrc, rightSrc, description, languages, githubURL }) {
+  // Prevent iframe from being focused by tab, this whiteboard function is designed to be just by mouse
   return (
     <div className="pattern-dots-sm mb-10 relative">
       {alert && <p className="bg-red-100 py-2 text-center font-bold text-red-900 ">{alert}</p>}
       <div className={`flex flex-col items-center ${leftSrc && rightSrc ? 'gap-6' : 'w-full'} py-4 drop-shadow-xl xl:flex-row`}>
-        {leftSrc && <iframe src={leftSrc} title={description} className="h-[400px] w-[95%] xl:h-[600px]"></iframe>}
-        {rightSrc && <iframe src={rightSrc} title={description} className="h-[400px] w-[95%] xl:h-[600px]"></iframe>}
+        {leftSrc && <iframe src={leftSrc} title={description} className="h-[400px] w-[95%] xl:h-[600px]" tabIndex={-1}>></iframe>}
+        {rightSrc && <iframe src={rightSrc} title={description} className="h-[400px] w-[95%] xl:h-[600px]" tabIndex={-1}>></iframe>}
       </div>
       <div className="flex flex-col xl:flex-row xl:items-center xl:justify-around mt-8">
         <ButtonLink text="View source" to={githubURL}>

diff --git a/website/src/components/DemoPage/TextBlock.js b/website/src/components/DemoPage/TextBlock.js
@@ -3,7 +3,7 @@ import React from 'react'
 function TextBlock({ title, children }) {
   return (
     <div className="mt-5 mb-2">
-      <h3 className="mb-1 font-sans font-semibold">{title}</h3>
+      <div className="mb-1 font-sans font-semibold text-lg">{title}</div>
       {children}
     </div>
   )

diff --git a/website/src/components/HomePage/Tagline.js b/website/src/components/HomePage/Tagline.js
@@ -4,8 +4,8 @@ function Tagline() {
   return (
     <section className="bg-gray-50 px-4 py-28">
       <h1 className="py-3 text-center text-4xl font-bold">Azure Web PubSub</h1>
-      <p className="text-center">Easily add real-time capabilities to your apps using your preferred tech stack.</p>
-      <p className="text-center font-semibold">Reliable. Secure. Highly scalable.</p>
+      <h2 className="text-center">Easily add real-time capabilities to your apps using your preferred tech stack.</h2>
+      <h2 className="text-center font-semibold">Reliable. Secure. Highly scalable.</h2>
     </section>
   )
 }

diff --git a/website/src/css/custom.css b/website/src/css/custom.css
@@ -107,3 +107,24 @@ code {
   margin-right: 2px;
   margin-bottom: 4px;
 }
+
+
+article[itemtype="http://schema.org/BlogPosting"] .markdown a {
+    color: #005a9e; /* High contrast blue color */
+    text-decoration: underline; /* Ensure links are visibly distinguishable */
+}
+
+article[itemtype="http://schema.org/BlogPosting"] .markdown a:hover,
+article[itemtype="http://schema.org/BlogPosting"] .markdown a:focus {
+    color: #004080; /* Slightly darker blue on hover/focus */
+}
+
+/* Remove focus outline for code blocks */
+pre:focus {
+    outline: none;
+}
+
+/* Prevent code blocks from being focusable */
+pre {
+    tabindex: -1; /* Remove tabindex from non-interactive elements */
+}
diff --git a/website/src/pages/contact_us.js b/website/src/pages/contact_us.js
@@ -19,10 +19,13 @@ function ContactUs() {
 
           <section>
             <h2 className="mt-10 py-1 text-3xl font-bold">Documentation</h2>
-            <p className="text-gray-800">
-              You can visit the documentation of Azure Web PubSub service from&nbsp;
-              <HyperLink to="https://docs.microsoft.com/en-us/azure/azure-web-pubsub/overview" />.
-            </p>
+              <p className="text-gray-800">
+                You can visit the{' '}
+                <HyperLink
+                  to="https://docs.microsoft.com/en-us/azure/azure-web-pubsub/overview"
+                  text="Azure Web PubSub Documentation link"
+                />.
+              </p>
           </section>
 
           <section>
@@ -33,16 +36,22 @@ function ContactUs() {
               issue
             </h3>
             <p className="text-gray-800">
-              The product team monitors GitHub issues on a daily basis. It’s the best way to reach out the team and ... Create a GitHub issue&nbsp;
-              <HyperLink to="https://github.com/Azure/azure-webpubsub" />.
+              The product team monitors GitHub issues on a daily basis. It’s the best way to reach out to the team and share your feedback. Create an issue on&nbsp;
+              <HyperLink
+                to="https://github.com/Azure/azure-webpubsub"
+                text="the Azure Web PubSub GitHub Repository link"
+              />.
             </p>
           </section>
 
           <section>
             <h2 className="mt-10 py-1 text-3xl font-bold">Suggest a demo</h2>
             <p className="text-gray-800">
-              Have a demo you’d like to see on this site. Share your idea with us and creating a GitHub issue&nbsp;
-              <HyperLink to="https://github.com/Azure/azure-webpubsub" />.
+              Have a demo you’d like to see on this site? Share your idea with us by creating an issue on&nbsp;
+              <HyperLink
+                to="https://github.com/Azure/azure-webpubsub"
+                text="the Azure Web PubSub GitHub Repository link"
+              />.
             </p>
             <h3 className="pt-2 font-bold">Demos we are currently working on</h3>
             <ul className="list-inside list-disc">