From f5ca6c22a40762402f86e553dce592654ec88d67 Mon Sep 17 00:00:00 2001
From: Sam Richard <snugug@google.com>
Date: Sat, 26 Nov 2022 19:19:45 -0500
Subject: [PATCH] feat: a11y account info (#98)

Co-authored-by: Anthony Fu <anthonyfu117@hotmail.com>
---
 components/account/AccountInfo.vue      | 2 ++
 components/content/ContentRich.setup.ts | 2 +-
 layouts/default.vue                     | 9 ++++-----
 3 files changed, 7 insertions(+), 6 deletions(-)

diff --git a/components/account/AccountInfo.vue b/components/account/AccountInfo.vue
index 13f4d148..aae3cf7a 100644
--- a/components/account/AccountInfo.vue
+++ b/components/account/AccountInfo.vue
@@ -9,6 +9,8 @@ const { account, link = true, fullServer = false } = defineProps<{
 }>()
 </script>
 
+<!-- TODO: Make this work for both buttons and links -->
+<!-- This is sometimes (like in the sidebar) used directly as a button, and sometimes, like in follow notifications, as a link. I think this component may need a second refactor that either lets an implementation pass in a link or an action and adapt to what's passed in, or the implementations need to be updated to wrap in the action they want to take and this be just the layout for these items -->
 <template>
   <div flex gap-3 cursor-default>
     <div flex-shrink-0>
diff --git a/components/content/ContentRich.setup.ts b/components/content/ContentRich.setup.ts
index 39ee0d39..ec2687fd 100644
--- a/components/content/ContentRich.setup.ts
+++ b/components/content/ContentRich.setup.ts
@@ -13,7 +13,7 @@ const props = defineProps<{
 const emojiObject = emojisArrayToObject(props.emojis || [])
 
 export default () => h(
-  'div',
+  'span',
   { class: 'content-rich' },
   contentToVNode(props.content, emojiObject),
 )
diff --git a/layouts/default.vue b/layouts/default.vue
index 186728c9..0be2f9da 100644
--- a/layouts/default.vue
+++ b/layouts/default.vue
@@ -1,7 +1,7 @@
 <template>
   <div h-full :class="{ zen: isZenMode }">
     <main flex w-full mxa lg:max-w-80rem>
-      <div class="hidden md:block w-1/4 zen-hide" relative>
+      <aside class="hidden md:block w-1/4 zen-hide" relative>
         <div sticky top-0 h-screen flex="~ col">
           <slot name="left">
             <NavTitle mx3 mt4 mb2 self-start />
@@ -12,18 +12,17 @@
             </div>
           </slot>
         </div>
-      </div>
+      </aside>
       <NavBottom md:hidden />
       <div class="w-full mb14 md:(w-2/4 mb0) min-h-screen" border="l r base">
         <slot />
       </div>
-      <div class="hidden md:block w-1/4 zen-hide">
+      <aside class="hidden md:block w-1/4 zen-hide">
         <div sticky top-0 h-screen flex="~ col">
           <slot name="right">
             <UserSignInEntry v-if="!currentUser" />
             <AccountInfo
               v-if="currentUser"
-              tabindex="0"
               m5 p2 rounded-full
               hover:bg-active cursor-pointer transition-100
               :account="currentUser.account"
@@ -36,7 +35,7 @@
             <NavFooter />
           </slot>
         </div>
-      </div>
+      </aside>
     </main>
     <ModalContainer />
   </div>