+
);
diff --git a/frontend/src/Components/MonitorToggleButton.tsx b/frontend/src/Components/MonitorToggleButton.tsx
index 1c1fcbbeb..36d95903f 100644
--- a/frontend/src/Components/MonitorToggleButton.tsx
+++ b/frontend/src/Components/MonitorToggleButton.tsx
@@ -54,6 +54,7 @@ function MonitorToggleButton(props: MonitorToggleButtonProps) {
name={iconName}
size={size}
title={title}
+ aria-label={title}
isDisabled={isDisabled}
isSpinning={isSaving}
{...otherProps}
diff --git a/frontend/src/Components/Page/Header/PageHeader.tsx b/frontend/src/Components/Page/Header/PageHeader.tsx
index c63447bbf..54a96697c 100644
--- a/frontend/src/Components/Page/Header/PageHeader.tsx
+++ b/frontend/src/Components/Page/Header/PageHeader.tsx
@@ -55,6 +55,7 @@ function PageHeader() {
diff --git a/frontend/src/Components/Page/Sidebar/PageSidebar.tsx b/frontend/src/Components/Page/Sidebar/PageSidebar.tsx
index e2f5460f9..a2245daee 100644
--- a/frontend/src/Components/Page/Sidebar/PageSidebar.tsx
+++ b/frontend/src/Components/Page/Sidebar/PageSidebar.tsx
@@ -435,10 +435,11 @@ function PageSidebar() {
const ScrollerComponent = isSmallScreen ? Scroller : OverlayScroller;
return (
-
{isSmallScreen ? (
@@ -521,7 +522,7 @@ function PageSidebar() {
-
+
);
}
diff --git a/frontend/src/Components/Page/Sidebar/PageSidebarItem.tsx b/frontend/src/Components/Page/Sidebar/PageSidebarItem.tsx
index 37d9bafa0..c2b8cfff1 100644
--- a/frontend/src/Components/Page/Sidebar/PageSidebarItem.tsx
+++ b/frontend/src/Components/Page/Sidebar/PageSidebarItem.tsx
@@ -46,11 +46,12 @@ function PageSidebarItem({
isActive && styles.isActiveLink
)}
to={to}
+ aria-current={isActive ? 'page' : undefined}
onPress={handlePress}
>
{!!iconName && (
-
+
)}
diff --git a/frontend/src/Components/Table/Table.tsx b/frontend/src/Components/Table/Table.tsx
index c72b68b96..995529ec2 100644
--- a/frontend/src/Components/Table/Table.tsx
+++ b/frontend/src/Components/Table/Table.tsx
@@ -7,6 +7,7 @@ import { icons, scrollDirections } from 'Helpers/Props';
import { SortDirection } from 'Helpers/Props/sortDirections';
import { CheckInputChanged } from 'typings/inputs';
import { TableOptionsChangePayload } from 'typings/Table';
+import translate from 'Utilities/String/translate';
import Column from './Column';
import TableHeader from './TableHeader';
import TableHeaderCell from './TableHeaderCell';
@@ -94,7 +95,10 @@ function Table({
canModifyColumns={canModifyColumns}
onTableOptionChange={onTableOptionChange}
>
-
+
);
diff --git a/frontend/src/Components/Table/TableHeaderCell.tsx b/frontend/src/Components/Table/TableHeaderCell.tsx
index 13b8cf0f7..9311a81a5 100644
--- a/frontend/src/Components/Table/TableHeaderCell.tsx
+++ b/frontend/src/Components/Table/TableHeaderCell.tsx
@@ -1,4 +1,4 @@
-import React, { useCallback } from 'react';
+import React, { useCallback, useMemo } from 'react';
import Icon from 'Components/Icon';
import Link from 'Components/Link/Link';
import { icons, sortDirections } from 'Helpers/Props';
@@ -41,6 +41,20 @@ function TableHeaderCell({
? icons.SORT_ASCENDING
: icons.SORT_DESCENDING;
+ const ariaSortValue = useMemo(() => {
+ if (!isSortable) {
+ return undefined;
+ }
+
+ if (!isSorting) {
+ return 'none';
+ }
+
+ return sortDirection === sortDirections.ASCENDING
+ ? 'ascending'
+ : 'descending';
+ }, [isSorting, sortDirection, isSortable]);
+
const handlePress = useCallback(() => {
if (fixedSortDirection) {
onSortPress?.(name, fixedSortDirection);
@@ -56,14 +70,20 @@ function TableHeaderCell({
className={className}
// label={typeof label === 'function' ? label() : label}
title={typeof columnLabel === 'function' ? columnLabel() : columnLabel}
+ scope="col"
+ aria-sort={ariaSortValue}
onPress={handlePress}
>
{children}
- {isSorting &&
}
+ {isSorting ? (
+
+ ) : null}
) : (
-
{children} |
+
+ {children}
+ |
);
}
diff --git a/frontend/src/Components/Table/TablePager.tsx b/frontend/src/Components/Table/TablePager.tsx
index 411b111bf..5394ccc69 100644
--- a/frontend/src/Components/Table/TablePager.tsx
+++ b/frontend/src/Components/Table/TablePager.tsx
@@ -108,9 +108,10 @@ function TablePager({
isFirstPage && styles.disabledPageButton
)}
isDisabled={isFirstPage}
+ aria-label={translate('PagerGoToFirstPage')}
onPress={handleFirstPagePress}
>
-
+
-
+
{isShowingPageSelect ? null : (
{page} / {totalPages}
@@ -153,9 +159,10 @@ function TablePager({
isLastPage && styles.disabledPageButton
)}
isDisabled={isLastPage}
+ aria-label={translate('PagerGoToNextPage')}
onPress={onNextPagePress}
>
-
+
-
+
diff --git a/frontend/src/Episode/EpisodeSearchCell.tsx b/frontend/src/Episode/EpisodeSearchCell.tsx
index 7e0f38a86..cea39a6ee 100644
--- a/frontend/src/Episode/EpisodeSearchCell.tsx
+++ b/frontend/src/Episode/EpisodeSearchCell.tsx
@@ -54,6 +54,7 @@ function EpisodeSearchCell({