FreshRSS/FluentReader
1
0
Fork 0
mirror of https://github.com/yang991178/fluent-reader.git synced 2025-01-06 05:47:47 +01:00
Code Issues Packages Projects Releases Wiki Activity

fix accessibility issues #103

Browse Source
This commit is contained in:
刘浩远 2020-11-23 19:47:22 +08:00
parent e7cf7f7d13
commit 3f76f0f963
2 changed files with 9 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
src/components/menu.tsx
View File

@ -25,14 +25,14 @@ export type MenuProps = {
} }
export class Menu extends React.Component<MenuProps> { export class Menu extends React.Component<MenuProps> {
countOverflow = (count: number) => count >= 1000 ? "999+" : String(count) countOverflow = (count: number) => count >= 1000 ? " 999+" : ` ${count}`
getLinkGroups = (): INavLinkGroup[] => [ getLinkGroups = (): INavLinkGroup[] => [
{ {
links: [ links: [
{ {
name: intl.get("search"), name: intl.get("search"),
ariaLabel: this.props.searchOn ? "✓" : "0", ariaLabel: intl.get("search") + (this.props.searchOn ? " ✓" : " "),
key: "search", key: "search",
icon: "Search", icon: "Search",
onClick: this.props.toggleSearch, onClick: this.props.toggleSearch,
@ -40,7 +40,8 @@ export class Menu extends React.Component<MenuProps> {
}, },
{ {
name: intl.get("allArticles"), name: intl.get("allArticles"),
ariaLabel: this.countOverflow(Object.values(this.props.sources).map(s => s.unreadCount).reduce((a, b) => a + b, 0)), ariaLabel: intl.get("allArticles")
+ this.countOverflow(Object.values(this.props.sources).map(s => s.unreadCount).reduce((a, b) => a + b, 0)),
key: ALL, key: ALL,
icon: "TextDocument", icon: "TextDocument",
onClick: () => this.props.allArticles(this.props.selected !== ALL), onClick: () => this.props.allArticles(this.props.selected !== ALL),
@ -55,7 +56,7 @@ export class Menu extends React.Component<MenuProps> {
let sources = g.sids.map(sid => this.props.sources[sid]) let sources = g.sids.map(sid => this.props.sources[sid])
return { return {
name: g.name, name: g.name,
ariaLabel: this.countOverflow(sources.map(s => s.unreadCount).reduce((a, b) => a + b, 0)), ariaLabel: g.name + this.countOverflow(sources.map(s => s.unreadCount).reduce((a, b) => a + b, 0)),
key: "g-" + g.index, key: "g-" + g.index,
url: null, url: null,
isExpanded: g.expanded, isExpanded: g.expanded,
@ -71,7 +72,7 @@ export class Menu extends React.Component<MenuProps> {
getSource = (s: RSSSource): INavLink => ({ getSource = (s: RSSSource): INavLink => ({
name: s.name, name: s.name,
ariaLabel: this.countOverflow(s.unreadCount), ariaLabel: s.name + this.countOverflow(s.unreadCount),
key: "s-" + s.sid, key: "s-" + s.sid,
onClick: () => this.props.selectSource(s), onClick: () => this.props.selectSource(s),
iconProps: s.iconurl ? this.getIconStyle(s.iconurl) : null, iconProps: s.iconurl ? this.getIconStyle(s.iconurl) : null,
@ -101,10 +102,11 @@ export class Menu extends React.Component<MenuProps> {
} }
_onRenderLink = (link: INavLink): JSX.Element => { _onRenderLink = (link: INavLink): JSX.Element => {
let count = link.ariaLabel.split(" ").pop()
return ( return (
<Stack className="link-stack" horizontal grow onContextMenu={event => this.onContext(link, event)}> <Stack className="link-stack" horizontal grow onContextMenu={event => this.onContext(link, event)}>
<div className="link-text">{link.name}</div> <div className="link-text">{link.name}</div>
{link.ariaLabel !== "0" && <div className="unread-count">{link.ariaLabel}</div>} {count && count !== "0" && <div className="unread-count">{count}</div>}
</Stack> </Stack>
) )
}; };

2
src/scripts/models/feed.ts
View File

@ -1,7 +1,7 @@
import * as db from "../db" import * as db from "../db"
import lf from "lovefield" import lf from "lovefield"
import { SourceActionTypes, INIT_SOURCES, ADD_SOURCE, DELETE_SOURCE } from "./source" import { SourceActionTypes, INIT_SOURCES, ADD_SOURCE, DELETE_SOURCE } from "./source"
import { ItemActionTypes, FETCH_ITEMS, RSSItem, MARK_READ, MARK_UNREAD, TOGGLE_STARRED, TOGGLE_HIDDEN, applyItemReduction } from "./item" import { ItemActionTypes, FETCH_ITEMS, RSSItem, TOGGLE_HIDDEN, applyItemReduction } from "./item"
import { ActionStatus, AppThunk, mergeSortedArrays } from "../utils" import { ActionStatus, AppThunk, mergeSortedArrays } from "../utils"
import { PageActionTypes, SELECT_PAGE, PageType, APPLY_FILTER } from "./page" import { PageActionTypes, SELECT_PAGE, PageType, APPLY_FILTER } from "./page"