mirror of
https://github.com/yang991178/fluent-reader.git
synced 2025-01-04 04:29:40 +01:00
fix accessibility issues #103
This commit is contained in:
parent
e7cf7f7d13
commit
3f76f0f963
@ -25,14 +25,14 @@ export type 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[] => [
|
||||
{
|
||||
links: [
|
||||
{
|
||||
name: intl.get("search"),
|
||||
ariaLabel: this.props.searchOn ? "✓" : "0",
|
||||
ariaLabel: intl.get("search") + (this.props.searchOn ? " ✓" : " "),
|
||||
key: "search",
|
||||
icon: "Search",
|
||||
onClick: this.props.toggleSearch,
|
||||
@ -40,7 +40,8 @@ export class Menu extends React.Component<MenuProps> {
|
||||
},
|
||||
{
|
||||
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,
|
||||
icon: "TextDocument",
|
||||
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])
|
||||
return {
|
||||
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,
|
||||
url: null,
|
||||
isExpanded: g.expanded,
|
||||
@ -71,7 +72,7 @@ export class Menu extends React.Component<MenuProps> {
|
||||
|
||||
getSource = (s: RSSSource): INavLink => ({
|
||||
name: s.name,
|
||||
ariaLabel: this.countOverflow(s.unreadCount),
|
||||
ariaLabel: s.name + this.countOverflow(s.unreadCount),
|
||||
key: "s-" + s.sid,
|
||||
onClick: () => this.props.selectSource(s),
|
||||
iconProps: s.iconurl ? this.getIconStyle(s.iconurl) : null,
|
||||
@ -101,10 +102,11 @@ export class Menu extends React.Component<MenuProps> {
|
||||
}
|
||||
|
||||
_onRenderLink = (link: INavLink): JSX.Element => {
|
||||
let count = link.ariaLabel.split(" ").pop()
|
||||
return (
|
||||
<Stack className="link-stack" horizontal grow onContextMenu={event => this.onContext(link, event)}>
|
||||
<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>
|
||||
)
|
||||
};
|
||||
|
@ -1,7 +1,7 @@
|
||||
import * as db from "../db"
|
||||
import lf from "lovefield"
|
||||
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 { PageActionTypes, SELECT_PAGE, PageType, APPLY_FILTER } from "./page"
|
||||
|
||||
|
Loading…
Reference in New Issue
Block a user