LotusGuild/cinny
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(a11y): add semantic heading hierarchy across settings, modals, and pages\n\nAdd as="h1"/h2/h3 to Text components used as visual headings:\n- Auth pages: h1 brand, h2 section titles\n- Settings panels: h2 for General/Permissions/DeveloperTools/Members/Emojis\n- Modal dialogs: h2 for CreateRoom, CreateSpace, AddServer\n- Explore pages: h2 page heading, h3 subsections\n- Inbox pages: h2 Notifications/Invites, h3 Primary/Public/Spam\n\nCo-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

Browse Source
This commit is contained in:
Lotus Bot
2026-05-21 13:35:55 -04:00
parent a6e378483e
commit f45aefdf1f
19 changed files with 26 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/app/features/common-settings/developer-tools/DevelopTools.tsx
+1 -1
View File
@@ -87,7 +87,7 @@ export function DeveloperTools({ requestClose }: DeveloperToolsProps) {
<PageHeader outlined={false}>
<Box grow="Yes" gap="200">
<Box grow="Yes" alignItems="Center" gap="200">
<Text size="H3" truncate>
<Text as="h2" size="H3" truncate>
Developer Tools
</Text>
</Box>
src/app/features/common-settings/emojis-stickers/EmojisStickers.tsx
+1 -1
View File
@@ -24,7 +24,7 @@ export function EmojisStickers({ requestClose }: EmojisStickersProps) {
<PageHeader outlined={false}>
<Box grow="Yes" gap="200">
<Box grow="Yes" alignItems="Center" gap="200">
<Text size="H3" truncate>
<Text as="h2" size="H3" truncate>
Emojis & Stickers
</Text>
</Box>
src/app/features/common-settings/members/Members.tsx
+1 -1
View File
@@ -156,7 +156,7 @@ export function Members({ requestClose }: MembersProps) {
<PageHeader outlined={false}>
<Box grow="Yes" gap="200">
<Box grow="Yes" alignItems="Center" gap="200">
<Text size="H3" truncate>
<Text as="h2" size="H3" truncate>
{room.getJoinedMemberCount()} Members
</Text>
</Box>
src/app/features/create-room/CreateRoomModal.tsx
+1 -1
View File
@@ -58,7 +58,7 @@ function CreateRoomModal({ state }: CreateRoomModalProps) {
}}
>
<Box grow="Yes">
<Text size="H4">
<Text as="h2" size="H4">
{type === CreateRoomType.VoiceRoom ? 'New Voice Room' : 'New Chat Room'}
</Text>
</Box>
src/app/features/create-space/CreateSpaceModal.tsx
+1 -1
View File
@@ -58,7 +58,7 @@ function CreateSpaceModal({ state }: CreateSpaceModalProps) {
}}
>
<Box grow="Yes">
<Text size="H4">New Space</Text>
<Text as="h2" size="H4">New Space</Text>
</Box>
<Box shrink="No">
<IconButton size="300" radii="300" onClick={closeDialog} aria-label="Close">
src/app/features/room-settings/general/General.tsx
+1 -1
View File
@@ -30,7 +30,7 @@ export function General({ requestClose }: GeneralProps) {
<PageHeader outlined={false}>
<Box grow="Yes" gap="200">
<Box grow="Yes" alignItems="Center" gap="200">
<Text size="H3" truncate>
<Text as="h2" size="H3" truncate>
General
</Text>
</Box>
src/app/features/room-settings/permissions/Permissions.tsx
+1 -1
View File
@@ -40,7 +40,7 @@ export function Permissions({ requestClose }: PermissionsProps) {
<PageHeader outlined={false}>
<Box grow="Yes" gap="200">
<Box grow="Yes" alignItems="Center" gap="200">
<Text size="H3" truncate>
<Text as="h2" size="H3" truncate>
Permissions
</Text>
</Box>
src/app/features/space-settings/general/General.tsx
+1 -1
View File
@@ -28,7 +28,7 @@ export function General({ requestClose }: GeneralProps) {
<PageHeader outlined={false}>
<Box grow="Yes" gap="200">
<Box grow="Yes" alignItems="Center" gap="200">
<Text size="H3" truncate>
<Text as="h2" size="H3" truncate>
General
</Text>
</Box>
src/app/features/space-settings/permissions/Permissions.tsx
+1 -1
View File
@@ -40,7 +40,7 @@ export function Permissions({ requestClose }: PermissionsProps) {
<PageHeader outlined={false}>
<Box grow="Yes" gap="200">
<Box grow="Yes" alignItems="Center" gap="200">
<Text size="H3" truncate>
<Text as="h2" size="H3" truncate>
Permissions
</Text>
</Box>
src/app/pages/auth/AuthLayout.tsx
+1 -1
View File
@@ -135,7 +135,7 @@ export function AuthLayout() {
<Header className={css.AuthHeader} size="600" variant="Surface">
<Box grow="Yes" direction="Row" gap="300" alignItems="Center">
<img className={css.AuthLogo} src={LotusLogo} alt="Lotus Chat Logo" />
<Text size="H3">Lotus Chat</Text>
<Text as="h1" size="H3">Lotus Chat</Text>
</Box>
</Header>
<Box className={css.AuthCardContent} direction="Column">
src/app/pages/auth/register/Register.tsx
+1 -1
View File
@@ -35,7 +35,7 @@ export function Register() {
return (
<Box direction="Column" gap="500">
<Text size="H2" priority="400">
<Text as="h2" size="H2" priority="400">
Register
</Text>
{registerFlows.status === RegisterFlowStatus.RegistrationDisabled && !sso && (
src/app/pages/auth/reset-password/ResetPassword.tsx
+1 -1
View File
@@ -23,7 +23,7 @@ export function ResetPassword() {
return (
<Box direction="Column" gap="500">
<Text size="H2" priority="400">
<Text as="h2" size="H2" priority="400">
Reset Password
</Text>
<PasswordResetForm defaultEmail={resetPasswordSearchParams.email} />
src/app/pages/client/explore/Explore.tsx
+1 -1
View File
@@ -94,7 +94,7 @@ export function AddServer() {
size="500"
>
<Box grow="Yes">
<Text size="H4">Add Server</Text>
<Text as="h2" size="H4">Add Server</Text>
</Box>
<IconButton size="300" onClick={() => setDialog(false)} radii="300" aria-label="Close">
<Icon src={Icons.Cross} />
src/app/pages/client/explore/Featured.tsx
+2 -2
View File
@@ -56,7 +56,7 @@ export function FeaturedRooms() {
<Box direction="Column" gap="700">
{spaces && spaces.length > 0 && (
<Box direction="Column" gap="400">
<Text size="H4">Featured Spaces</Text>
<Text as="h2" size="H4">Featured Spaces</Text>
<RoomCardGrid>
{spaces.map((roomIdOrAlias) => (
<RoomSummaryLoader key={roomIdOrAlias} roomIdOrAlias={roomIdOrAlias}>
@@ -85,7 +85,7 @@ export function FeaturedRooms() {
)}
{rooms && rooms.length > 0 && (
<Box direction="Column" gap="400">
<Text size="H4">Featured Rooms</Text>
<Text as="h3" size="H4">Featured Rooms</Text>
<RoomCardGrid>
{rooms.map((roomIdOrAlias) => (
<RoomSummaryLoader key={roomIdOrAlias} roomIdOrAlias={roomIdOrAlias}>
src/app/pages/client/explore/Server.tsx
+4 -4
View File
@@ -489,7 +489,7 @@ export function PublicRooms() {
<Box grow="No" justifyContent="Center" alignItems="Center" gap="200">
{screenSize !== ScreenSize.Mobile && <Icon size="400" src={Icons.Search} />}
<Text size="H3" truncate>
<Text as="h2" size="H3" truncate>
Search
</Text>
</Box>
@@ -510,7 +510,7 @@ export function PublicRooms() {
</Box>
<Box grow="Yes" justifyContent="Center" alignItems="Center" gap="200">
{screenSize !== ScreenSize.Mobile && <Icon size="400" src={Icons.Server} />}
<Text size="H3" truncate>
<Text as="h2" size="H3" truncate>
{server}
</Text>
</Box>
@@ -534,9 +534,9 @@ export function PublicRooms() {
<Box direction="Column" gap="400">
<Box direction="Column" gap="300">
{isSearch ? (
<Text size="H4">{`Results for "${serverSearchParams.term}"`}</Text>
<Text as="h3" size="H4">{`Results for "${serverSearchParams.term}"`}</Text>
) : (
<Text size="H4">Popular Communities</Text>
<Text as="h3" size="H4">Popular Communities</Text>
)}
<Box gap="200">
{roomTypeFilters.map((filter) => (
src/app/pages/client/home/Search.tsx
+1 -1
View File
@@ -28,7 +28,7 @@ export function HomeSearch() {
</Box>
<Box justifyContent="Center" alignItems="Center" gap="200">
{screenSize !== ScreenSize.Mobile && <Icon size="400" src={Icons.Search} />}
<Text size="H3" truncate>
<Text as="h2" size="H3" truncate>
Message Search
</Text>
</Box>
src/app/pages/client/inbox/Invites.tsx
+4 -4
View File
@@ -429,7 +429,7 @@ function KnownInvites({
}: KnownInvitesProps) {
return (
<Box direction="Column" gap="200">
<Text size="H4">Primary</Text>
<Text as="h3" size="H4">Primary</Text>
{invites.length > 0 ? (
<Box direction="Column" gap="100">
{invites.map((invite) => (
@@ -488,7 +488,7 @@ function UnknownInvites({
return (
<Box direction="Column" gap="200">
<Box gap="200" justifyContent="SpaceBetween" alignItems="Center">
<Text size="H4">Public</Text>
<Text as="h3" size="H4">Public</Text>
<Box>
{invites.length > 0 && (
<Chip
@@ -585,7 +585,7 @@ function SpamInvites({
return (
<Box direction="Column" gap="200">
<Text size="H4">Spam</Text>
<Text as="h3" size="H4">Spam</Text>
{invites.length > 0 ? (
<Box direction="Column" gap="100">
<SequenceCard
@@ -762,7 +762,7 @@ export function Invites() {
</Box>
<Box alignItems="Center" gap="200">
{screenSize !== ScreenSize.Mobile && <Icon size="400" src={Icons.Mail} />}
<Text size="H3" truncate>
<Text as="h2" size="H3" truncate>
Invites
</Text>
</Box>
src/app/pages/client/inbox/Notifications.tsx
+1 -1
View File
@@ -651,7 +651,7 @@ export function Notifications() {
</Box>
<Box alignItems="Center" gap="200">
{screenSize !== ScreenSize.Mobile && <Icon size="400" src={Icons.Message} />}
<Text size="H3" truncate>
<Text as="h2" size="H3" truncate>
Notification Messages
</Text>
</Box>
src/app/pages/client/space/Search.tsx
+1 -1
View File
@@ -43,7 +43,7 @@ export function SpaceSearch() {
</Box>
<Box justifyContent="Center" alignItems="Center" gap="200">
{screenSize !== ScreenSize.Mobile && <Icon size="400" src={Icons.Search} />}
<Text size="H3" truncate>
<Text as="h2" size="H3" truncate>
Message Search
</Text>
</Box>