Add all the focuses

src/app.css

@@ -341,7 +341,7 @@ a.mention span {
   transition: background-color 0.2s ease-out;
   -webkit-tap-highlight-color: transparent;
 }
-.status-link:hover {
+.status-link:is(:hover, :focus) {
   background-color: var(--link-bg-hover-color);
 }
 
@@ -393,7 +393,7 @@ a.mention span {
 .deck-close {
   color: var(--text-insignificant-color) !important;
 }
-.deck-close:hover {
+.deck-close:is(:hover, :focus) {
   color: var(--text-color) !important;
 }
 
@@ -534,8 +534,7 @@ button.carousel-dot {
   font-weight: bold;
   backdrop-filter: none !important;
 }
-button.carousel-dot:hover,
+button.carousel-dot:is(:hover, :focus) button.carousel-dot.active,
-button.carousel-dot.active,
 button.carousel-dot[disabled].active {
   color: var(--link-color) !important;
 }
@@ -696,7 +695,7 @@ button.carousel-dot[disabled].active {
   color: var(--text-color) !important;
   border-radius: 0;
 }
-.menu-container menu button:hover {
+.menu-container menu button:is(:hover, :focus) {
   color: var(--bg-color) !important;
   background-color: var(--link-color);
 }

src/components/account.jsx

@@ -102,6 +102,7 @@ function Account({ account }) {
   return (
     <div
       id="account-container"
+      tabIndex="-1"
       class={`sheet ${uiState === 'loading' ? 'skeleton' : ''}`}
     >
       {!info || uiState === 'loading' ? (

src/components/compose.css

@@ -150,9 +150,6 @@
   background-color: var(--bg-faded-color);
   opacity: 0.5;
 }
-#compose-container .toolbar-button:has([disabled]) > * {
-  /* filter: opacity(0.5); */
-}
 #compose-container
   .toolbar-button:not(.show-field)
   :is(input[type='checkbox'], select, input[type='file']) {
@@ -175,10 +172,17 @@
   right: 0;
   left: auto !important;
 }
-#compose-container .toolbar-button:not(:disabled):hover {
+#compose-container
+  .toolbar-button:not(:disabled):is(
+    :hover,
+    :focus,
+    :focus-within,
+    :focus-visible
+  ) {
   cursor: pointer;
   filter: none;
   border-color: var(--divider-color);
+  outline: 0;
 }
 #compose-container .toolbar-button:not(:disabled):active {
   filter: brightness(0.8);
@@ -231,7 +235,7 @@
   width: 2.2em;
   height: 2.2em;
 }
-#compose-container .text-expander-menu li:hover {
+#compose-container .text-expander-menu li:is(:hover, :focus) {
   color: var(--bg-color);
   background-color: var(--link-color);
 }
@@ -294,7 +298,7 @@
   align-self: flex-start;
   color: var(--text-insignificant-color);
 }
-#compose-container .media-aside .close-button:hover {
+#compose-container .media-aside .close-button:is(:hover, :focus) {
   color: var(--text-color);
 }
 #compose-container .media-aside .uploaded {

src/components/name-text.css

@@ -3,8 +3,8 @@
   text-decoration: none;
   display: inline-block;
 }
-a.name-text:hover b,
+a.name-text:is(:hover, :focus) b,
-a.name-text.short:hover i {
+a.name-text.short:is(:hover, :focus) i {
   text-decoration: underline;
   text-decoration-color: var(--text-insignificant-color);
 }

src/components/status.css

@@ -122,7 +122,7 @@
   margin-left: 4px;
   white-space: nowrap;
 }
-.status > .container > .meta a.time:hover {
+.status > .container > .meta a.time:is(:hover, :focus) {
   text-decoration: underline;
 }
 .status > .container > .meta .reply-to {
@@ -319,7 +319,7 @@
   background-color: var(--bg-faded-blur-color);
 }
 
-.status .media:hover {
+.status .media:is(:hover, :focus) {
   border-color: var(--outline-hover-color);
 }
 .status .media :is(img, video) {
@@ -432,7 +432,7 @@
   max-height: 50vh;
   border-inline-end: 0;
 }
-.card:hover .image {
+.card:is(:hover, :focus) .image {
   animation: position-object 5s ease-in-out 1s 5;
 }
 .card p {
@@ -481,7 +481,7 @@ a.card {
   text-decoration: none;
   transition: opacity 0.2s ease-in-out;
 }
-a.card:hover {
+a.card:is(:hover, :focus) {
   border: 1px solid var(--link-color);
   box-shadow: 0 0 0 2px var(--link-faded-color);
 }
@@ -562,10 +562,10 @@ a.card:hover {
   color: inherit;
   text-decoration: none;
 }
-.status .extra-meta a:hover {
+.status .extra-meta a:is(:hover, :focus) {
   text-decoration: underline;
 }
-.status .extra-meta .edited:hover {
+.status .extra-meta .edited:is(:hover, :focus) {
   cursor: pointer;
   color: var(--text-color);
 }
@@ -601,11 +601,11 @@ a.card:hover {
   color: inherit;
   border: 1.5px solid transparent;
 }
-.status .action > button.plain:hover {
+.status .action > button.plain:is(:hover, :focus) {
   color: var(--link-color);
   background-color: var(--button-plain-bg-hover-color);
 }
-.status .action > button.plain.reblog-button:hover {
+.status .action > button.plain.reblog-button:is(:hover, :focus) {
   color: var(--reblog-color);
 }
 .status .action > button.plain.reblog-button.checked {
@@ -630,7 +630,7 @@ a.card:hover {
 .status .action > button.plain.reblog-button.checked .icon {
   animation: reblogged 1s ease-in-out;
 }
-.status .action > button.plain.favourite-button:hover {
+.status .action > button.plain.favourite-button:is(:hover, :focus) {
   color: var(--favourite-color);
 }
 .status .action > button.plain.favourite-button.checked {

src/components/status.jsx

@@ -209,6 +209,7 @@ function Status({
       {size !== 's' && (
         <a
           href={url}
+          tabindex="-1"
           // target="_blank"
           title={`@${acct}`}
           onClick={(e) => {
@@ -1152,7 +1153,7 @@ function EditedAtModal({ statusID, onClose = () => {} }) {
   const currentYear = new Date().getFullYear();
 
   return (
-    <div id="edit-history" class="sheet">
+    <div id="edit-history" class="sheet" tabIndex="-1">
       <header>
         {/* <button type="button" class="close-button plain large" onClick={onClose}>
         <Icon icon="x" alt="Close" />
@@ -1294,6 +1295,7 @@ function Carousel({ mediaAttachments, index = 0, onClose = () => {} }) {
     <>
       <div
         ref={carouselRef}
+        tabIndex="-1"
         data-swipe-threshold="44"
         class="carousel"
         onClick={(e) => {
@@ -1304,7 +1306,6 @@ function Carousel({ mediaAttachments, index = 0, onClose = () => {} }) {
             onClose();
           }
         }}
-        tabindex="0"
       >
         {mediaAttachments?.map((media, i) => {
           const { blurhash } = media;

src/index.css

@@ -14,7 +14,7 @@
   --text-insignificant-color: #1c1e2199;
   --link-color: var(--blue-color);
   --link-light-color: #4169e199;
-  --link-faded-color: #4169e133;
+  --link-faded-color: #4169e155;
   --link-bg-hover-color: #f0f2f599;
   --button-bg-color: var(--blue-color);
   --button-bg-blur-color: #4169e1aa;
@@ -49,7 +49,7 @@
     --text-color: #f0f2f5;
     --text-insignificant-color: #f0f2f599;
     --link-light-color: #6494ed99;
-    --link-faded-color: #6494ed55;
+    --link-faded-color: #6494ed88;
     --link-bg-hover-color: #34353799;
     --divider-color: rgba(255, 255, 255, 0.1);
     --bg-blur-color: #24252699;
@@ -80,7 +80,7 @@ a {
   text-underline-offset: 2px;
   overflow-wrap: anywhere;
 }
-a:hover {
+a:is(:hover, :focus) {
   text-decoration-color: var(--link-color);
 }
 
@@ -127,7 +127,7 @@ button,
   vertical-align: middle;
   pointer-events: none;
 }
-:is(button, .button):not(:disabled, .disabled):hover {
+:is(button, .button):not(:disabled, .disabled):is(:hover, :focus) {
   cursor: pointer;
   filter: brightness(1.2);
 }
@@ -186,14 +186,14 @@ button,
 :is(button, .button).swap > *:nth-child(2) {
   opacity: 0;
 }
-:is(button, .button).swap:hover > *:nth-child(2) {
+:is(button, .button).swap:is(:hover, :focus) > *:nth-child(2) {
   opacity: 1;
 }
-:is(button, .button).swap[data-swap-state='danger']:hover {
+:is(button, .button).swap[data-swap-state='danger']:is(:hover, :focus) {
   color: var(--red-color);
   border-color: var(--red-color);
 }
-:is(button, .button).swap:hover > *:nth-child(1) {
+:is(button, .button).swap:is(:hover, :focus) > *:nth-child(1) {
   opacity: 0;
 }
 
@@ -237,15 +237,6 @@ code {
 }
 
 @media (prefers-color-scheme: dark) {
-  /* img,
-  video {
-    filter: brightness(0.7);
-    transition: filter 0.3s ease-out;
-  }
-  img:hover,
-  video:hover {
-    filter: brightness(1);
-  } */
   :is(button, .button).plain2 {
     backdrop-filter: blur(12px) brightness(0.5);
   }

src/pages/home.jsx

@@ -72,7 +72,12 @@ function Home({ hidden }) {
   const scrollableRef = useRef();
 
   return (
-    <div class="deck-container" hidden={hidden} ref={scrollableRef}>
+    <div
+      class="deck-container"
+      hidden={hidden}
+      ref={scrollableRef}
+      tabIndex="-1"
+    >
       <div class="timeline-deck deck">
         <header
           onClick={() => {

src/pages/notifications.css

@@ -50,7 +50,7 @@
   background-color: var(--bg-color);
   margin-top: calc(-16px - 1px);
 }
-.notification .status-link:hover {
+.notification .status-link:is(:hover, :focus) {
   background-color: var(--bg-blur-color);
   filter: saturate(1);
   border-color: var(--outline-hover-color);

src/pages/notifications.jsx

@@ -290,7 +290,7 @@ function Notifications() {
   );
   // console.log(groupedNotifications);
   return (
-    <div class="deck-container" ref={scrollableRef}>
+    <div class="deck-container" ref={scrollableRef} tabIndex="-1">
       <div class={`timeline-deck deck ${onlyMentions ? 'only-mentions' : ''}`}>
         <header
           onClick={() => {

src/pages/settings.css

@@ -72,7 +72,7 @@
   color: var(--link-color);
   font-weight: bold;
 }
-#settings-container .radio-group label:hover {
+#settings-container .radio-group label:is(:hover, :focus) {
   color: var(--button-bg-color);
 }
 #settings-container .radio-group label:has(input:checked) {

src/pages/settings.jsx

@@ -24,7 +24,7 @@ function Settings({ onClose }) {
   const [currentDefault, setCurrentDefault] = useState(0);
 
   return (
-    <div id="settings-container" class="sheet">
+    <div id="settings-container" class="sheet" tabIndex="-1">
       <main>
         {/* <button type="button" class="close-button plain large" onClick={onClose}>
         <Icon icon="x" alt="Close" />