Skip to content

fix: improve mobile UX for Specification Explorer with content-first layout and toggle #5107

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
Sourya07 wants to merge 9 commits into
base: master
Choose a base branch
from
+72 −4
Open

fix: improve mobile UX for Specification Explorer with content-first layout and toggle #5107

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
bba3f84
chore: add explicit duplicate detection instructions to coderabbit
Sourya07 Jan 12, 2026
464d97b
Merge remote-tracking branch 'upstream/master'
Sourya07 Feb 1, 2026
dd9b8d5
fix:the specification-exe
Sourya07 Feb 8, 2026
78b5986
fixes the Specification
Sourya07 Feb 8, 2026
96bee42
added the css
Sourya07 Feb 8, 2026
9027b72
fixes the global css
Sourya07 Feb 8, 2026
a0927ab
Merge branch 'master' into fix/specification
Sourya07 Feb 8, 2026
597dce4
fixes the problem
Sourya07 Feb 8, 2026
517a79b
fixes the global css file
Sourya07 Feb 8, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion .coderabbit.yaml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,4 +32,4 @@ knowledge_base:
issues:
scope: "local"
pull_requests:
scope: "local"
scope: "local"
14 changes: 12 additions & 2 deletions components/docs/Visualizer.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import 'schyma/dist/esm/style.css';

import type { JSONSchema7Object } from 'json-schema';
import React from 'react';
import React, { useState } from 'react';
import Schyma from 'schyma';

import schema from '../../config/3.0.0.json';
Expand All @@ -12,8 +12,18 @@ const typeSchema = schema as unknown as JSONSchema7Object;
* @description This component renders the spec explorer.
*/
function Visualizer() {
const [showMap, setShowMap] = useState(false);

return (
<div>
<div className={`visualizer-container ${showMap ? 'show-map' : ''}`}>
<div className='mobile-toggle px-4'>
<button
onClick={() => setShowMap(!showMap)}
className='bg-primary-500 hover:bg-primary-600 text-white font-bold py-2 px-4 rounded mb-2 mt-4 w-full'
>
{showMap ? 'Hide Visual Map' : 'Show Visual Map'}
</button>
</div>
Comment on lines 14 to +26
Copy link
Contributor

@coderabbitai coderabbitai bot Feb 8, 2026

Choose a reason for hiding this comment

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

⚠️ Potential issue | 🟡 Minor

Add aria-expanded to the toggle button for accessibility.

The toggle controls visibility of the visual map but lacks aria-expanded, which screen readers rely on to convey the current state. Given the PR's Lighthouse accessibility score of 98, this small addition would help maintain that standard.

♿ Proposed fix 
         <button
+          aria-expanded={showMap}
           onClick={() => setShowMap(!showMap)}
           className='bg-primary-500 hover:bg-primary-600 text-white font-bold py-2 px-4 rounded mb-2 mt-4 w-full'
         >
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
function Visualizer() {
const [showMap, setShowMap] = useState(false);
return (
<div>
<div className={`visualizer-container ${showMap ? 'show-map' : ''}`}>
<div className='mobile-toggle px-4'>
<button
onClick={() => setShowMap(!showMap)}
className='bg-primary-500 hover:bg-primary-600 text-white font-bold py-2 px-4 rounded mb-2 mt-4 w-full'
>
{showMap ? 'Hide Visual Map' : 'Show Visual Map'}
</button>
</div>
function Visualizer() {
const [showMap, setShowMap] = useState(false);
return (
<div className={`visualizer-container ${showMap ? 'show-map' : ''}`}>
<div className='mobile-toggle px-4'>
<button
aria-expanded={showMap}
onClick={() => setShowMap(!showMap)}
className='bg-primary-500 hover:bg-primary-600 text-white font-bold py-2 px-4 rounded mb-2 mt-4 w-full'
>
{showMap ? 'Hide Visual Map' : 'Show Visual Map'}
</button>
</div>
🤖 Prompt for AI Agents 
In `@components/docs/Visualizer.tsx` around lines 14 - 26, The toggle button in
the Visualizer component should expose its expanded state to assistive tech:
update the button (the one using onClick={() => setShowMap(!showMap)} in
Visualizer) to include aria-expanded={showMap} (and optionally aria-controls
referencing the visual map container's id) so screen readers can announce
whether the visual map is shown; keep the existing setShowMap and showMap logic
unchanged.

<Schyma
title='AsyncAPI Specification'
description="The AsyncAPI Specification defines a set of fields that can be used in an
Expand Down
2 changes: 1 addition & 1 deletion components/layout/DocsLayout.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -97,7 +97,7 @@ export default function DocsLayout({ post, navItems = {}, children }: IDocsLayou
if (router.pathname.includes('v3.0.0-explorer')) {
return (
<div>
<div className='absolute left-2 top-24 z-10'>
<div className='hidden md:block absolute left-2 top-24 z-10'>
<Button
className='inline-flex h-full justify-center rounded-md border border-gray-300 bg-white py-2 text-sm font-medium text-gray-700 shadow-sm hover:bg-gray-50 focus:border-gray-500 focus:outline-none focus:ring-0 focus:ring-black'
text='Menu'
Expand Down
58 changes: 58 additions & 0 deletions styles/globals.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -345,4 +345,62 @@ abbr[title] {

select {
cursor:pointer;
}

@media (max-width: 768px) {

.visualizer-container {
overflow-x: hidden;
}

.visualizer-container .body-wrapper {
display: flex !important;
flex-direction: column !important;
width: 100% !important;
height: auto !important;
min-height: 0 !important;
}

.visualizer-container .node-container {
display: none;
width: 125% !important;
height: 75vh !important;
border-right: none !important;
border-bottom: 2px solid #e5e7eb;
margin-bottom: -15% !important;
transform: scale(0.8);
transform-origin: top left;
}

.visualizer-container.show-map .node-container {
display: block;
}

.visualizer-container .panel {
display: block !important;
width: 100% !important;
max-width: 100% !important;
height: auto !important;
padding: 1rem !important;
overflow-x: hidden;
overflow-y: visible !important;
}

.visualizer-container .panel h1,
.visualizer-container .panel h2,
.visualizer-container .panel p {
word-break: break-word;
white-space: normal;
}

.visualizer-container .panel pre {
max-width: 100%;
overflow-x: auto;
}
}

@media (min-width: 769px) {
.mobile-toggle {
display: none;
}
}