diff --git a/index.html b/index.html
index 8723989ae..9012b4a74 100644
--- a/index.html
+++ b/index.html
@@ -31,6 +31,7 @@
+ Skip to main content
diff --git a/src/app/App.tsx b/src/app/App.tsx
index fcc5b25eb..6eb971a1f 100644
--- a/src/app/App.tsx
+++ b/src/app/App.tsx
@@ -73,6 +73,7 @@ const App: Component = () => {
left="0"
right="0"
zIndex="$banner"
+ aria-hidden="true"
d={isRouting() ? "block" : "none"}
>
diff --git a/src/components/FullLoading.tsx b/src/components/FullLoading.tsx
index a310e6090..fbab6f829 100644
--- a/src/components/FullLoading.tsx
+++ b/src/components/FullLoading.tsx
@@ -3,7 +3,7 @@ import { JSXElement, mergeProps, Show } from "solid-js"
import { getMainColor } from "~/store"
export const FullScreenLoading = () => {
return (
-
+
{
)
}
-
export const FullLoading = (props: {
py?: string
size?: string
@@ -30,7 +29,7 @@ export const FullLoading = (props: {
props,
)
return (
-
+
{
boxSize={icon().size}
as={icon().component}
onClick={toggleColorMode}
+ aria-label="Toggle color mode"
+ tabIndex={0}
p={icon().p}
/>
)
diff --git a/src/pages/home/Layout.tsx b/src/pages/home/Layout.tsx
index de144270e..048c87817 100644
--- a/src/pages/home/Layout.tsx
+++ b/src/pages/home/Layout.tsx
@@ -1,3 +1,4 @@
+import { Box } from "@hope-ui/solid"
import { Markdown } from "~/components"
import { useTitle } from "~/hooks"
import { getSetting } from "~/store"
@@ -17,7 +18,9 @@ const Index = () => {
<>
-
+
+
+
)
diff --git a/src/pages/home/Nav.tsx b/src/pages/home/Nav.tsx
index 0d0ed694d..415227d46 100644
--- a/src/pages/home/Nav.tsx
+++ b/src/pages/home/Nav.tsx
@@ -55,7 +55,7 @@ export const Nav = () => {
})
return (
-
+
{(name, i) => {
const isLast = createMemo(() => i() === paths().length - 1)
diff --git a/src/pages/home/Password.tsx b/src/pages/home/Password.tsx
index bc8cc1856..57ad60da5 100644
--- a/src/pages/home/Password.tsx
+++ b/src/pages/home/Password.tsx
@@ -36,6 +36,7 @@ const Password = (props: PasswordProps) => {
{
diff --git a/src/pages/home/folder/GridItem.tsx b/src/pages/home/folder/GridItem.tsx
index abaa550e8..311fcaaf0 100644
--- a/src/pages/home/folder/GridItem.tsx
+++ b/src/pages/home/folder/GridItem.tsx
@@ -3,7 +3,7 @@ import { Motion } from "solid-motionone"
import { useContextMenu } from "solid-contextmenu"
import { batch, Show } from "solid-js"
import { CenterLoading, LinkWithPush, ImageWithError } from "~/components"
-import { usePath, useRouter, useUtil } from "~/hooks"
+import { usePath, useRouter, useT, useUtil } from "~/hooks"
import { checkboxOpen, getMainColor, local, selectIndex } from "~/store"
import { ObjType, StoreObj } from "~/types"
import { bus, hoverColor } from "~/utils"
@@ -16,6 +16,7 @@ export const GridItem = (props: { obj: StoreObj; index: number }) => {
return null
}
const { setPathAs } = usePath()
+ const t = useT()
const objIcon = (
{
classList={{ selected: !!props.obj.selected }}
class="grid-item viselect-item"
data-index={props.index}
+ role="listitem"
+ aria-label={`${props.obj.name}，${props.obj.is_dir ? t("global.folder") : t("global.file")}`}
+ tabIndex={0}
w="$full"
p="$1"
spacing="$1"
@@ -102,6 +106,7 @@ export const GridItem = (props: { obj: StoreObj; index: number }) => {
pos="absolute"
left="$1"
top="$1"
+ aria-label={t("global.select") + " " + props.obj.name}
// colorScheme="neutral"
on:mousedown={(e: MouseEvent) => {
e.stopPropagation()
@@ -121,6 +126,7 @@ export const GridItem = (props: { obj: StoreObj; index: number }) => {
maxW="$full"
rounded="$lg"
shadow="$md"
+ alt={props.obj.name}
fallback={}
fallbackErr={objIcon}
src={props.obj.thumb}
diff --git a/src/pages/home/folder/List.tsx b/src/pages/home/folder/List.tsx
index 6ee0dd9b5..78ae45a9c 100644
--- a/src/pages/home/folder/List.tsx
+++ b/src/pages/home/folder/List.tsx
@@ -78,6 +78,9 @@ export const ListTitle = (props: {
color: "$neutral11",
textAlign: col.textAlign as any,
cursor: "pointer",
+ role: "button",
+ tabIndex: 0,
+ "aria-label": `${t(`home.obj.${col.name}`)}, ${reverse() ? t("global.descending") : t("global.ascending")}`,
onClick: () => {
if (col.name === orderBy()) {
setReverse(!reverse())
@@ -97,6 +100,7 @@ export const ListTitle = (props: {
{
selectAll(e.target.checked as boolean)
}}
@@ -157,6 +161,7 @@ const ListLayout = () => {
onDragOver={onDragOver}
oncapture:contextmenu={captureContentMenu}
class="list viselect-container"
+ role="list"
w="$full"
spacing="$1"
>
diff --git a/src/pages/home/folder/ListItem.tsx b/src/pages/home/folder/ListItem.tsx
index 4893a598d..95153a8d8 100644
--- a/src/pages/home/folder/ListItem.tsx
+++ b/src/pages/home/folder/ListItem.tsx
@@ -10,7 +10,7 @@ import { Motion } from "solid-motionone"
import { useContextMenu } from "solid-contextmenu"
import { batch, Show } from "solid-js"
import { LinkWithPush } from "~/components"
-import { usePath, useRouter, useUtil } from "~/hooks"
+import { usePath, useRouter, useT, useUtil } from "~/hooks"
import {
checkboxOpen,
getMainColor,
@@ -53,6 +53,7 @@ export const ListItem = (props: { obj: StoreObj; index: number }) => {
const { setPathAs } = usePath()
const { show } = useContextMenu({ id: 1 })
const { pushHref, to } = useRouter()
+ const t = useT()
const { openWithDoubleClick, toggleWithClick, restoreSelectionCache } =
useSelectWithMouse()
const filenameStyle = () => local["list_item_filename_overflow"]
@@ -69,6 +70,9 @@ export const ListItem = (props: { obj: StoreObj; index: number }) => {
classList={{ selected: !!props.obj.selected }}
class="list-item viselect-item"
data-index={props.index}
+ role="listitem"
+ aria-label={`${props.obj.name}，${getFileSize(props.obj.size)}，${props.obj.is_dir ? t("global.folder") : t("global.file")}，${formatDate(props.obj.modified)}`}
+ tabIndex={0}
w="$full"
p="$2"
rounded="$lg"
@@ -114,6 +118,7 @@ export const ListItem = (props: { obj: StoreObj; index: number }) => {
{
e.stopPropagation()
}}
diff --git a/src/pages/home/folder/context-menu.tsx b/src/pages/home/folder/context-menu.tsx
index d1d9d92b9..00be3f586 100644
--- a/src/pages/home/folder/context-menu.tsx
+++ b/src/pages/home/folder/context-menu.tsx
@@ -52,11 +52,13 @@ export const ContextMenu = () => {
animation="scale"
theme={colorMode() !== "dark" ? "light" : "dark"}
style="z-index: var(--hope-zIndices-popover)"
+ aria-label={t("home.toolbar.more")}
>
{(name) => (
- {
bus.emit("tool", name)
}}
@@ -67,6 +69,7 @@ export const ContextMenu = () => {
- {
bus.emit("tool", "share")
}}
@@ -83,6 +86,7 @@ export const ContextMenu = () => {
selectedObjs().some((o) => !isArchive(o.name))
)
}}
+ aria-label={t("home.toolbar.decompress")}
onClick={() => {
bus.emit("tool", "decompress")
}}
diff --git a/src/pages/home/header/Header.tsx b/src/pages/home/header/Header.tsx
index 8f552da4b..1980c7925 100644
--- a/src/pages/home/header/Header.tsx
+++ b/src/pages/home/header/Header.tsx
@@ -35,6 +35,7 @@ export const Header = () => {
{...stickyProps}
bgColor="$background"
class="header"
+ role="banner"
w="$full"
// shadow="$md"
>
diff --git a/src/pages/home/toolbar/BackTop.tsx b/src/pages/home/toolbar/BackTop.tsx
index 008da1a8d..9bc05f105 100644
--- a/src/pages/home/toolbar/BackTop.tsx
+++ b/src/pages/home/toolbar/BackTop.tsx
@@ -48,6 +48,8 @@ export const BackTop = () => {
p="$1"
rounded="$lg"
as={FiArrowUp}
+ aria-label="Back to top"
+ tabIndex={0}
onClick={() => {
window.scrollTo({ top: 0, behavior: "smooth" })
}}
diff --git a/src/pages/home/toolbar/Icon.tsx b/src/pages/home/toolbar/Icon.tsx
index f835492c1..0385c00c2 100644
--- a/src/pages/home/toolbar/Icon.tsx
+++ b/src/pages/home/toolbar/Icon.tsx
@@ -18,6 +18,8 @@ export const CenterIcon = (
(
{
return (