diff --git a/src/renderer/assets/styles/components/annotations.scss b/src/renderer/assets/styles/components/annotations.scss index 333f7d62c..109b4e192 100644 --- a/src/renderer/assets/styles/components/annotations.scss +++ b/src/renderer/assets/styles/components/annotations.scss @@ -9,6 +9,10 @@ display: flex; flex-direction: column; gap: 5px; + + ol { + padding: 0; + } } .popover_dialog_reader .settings_tab.annotations_tab { @@ -518,6 +522,7 @@ .settings_tab .annotations_line { width: 100%; + list-style-type: none; } .annotations_line { diff --git a/src/renderer/assets/styles/components/combobox.scss b/src/renderer/assets/styles/components/combobox.scss index 958427760..7221a8862 100644 --- a/src/renderer/assets/styles/components/combobox.scss +++ b/src/renderer/assets/styles/components/combobox.scss @@ -122,6 +122,10 @@ overflow: hidden; text-overflow: ellipsis; font-size: 14px; + + &[data-disabled] { + color: var(--color-light-grey); + } &.selected { font-weight: 600; diff --git a/src/renderer/assets/styles/components/slider.scss b/src/renderer/assets/styles/components/slider.scss index dd8c4fa34..c24a53ebf 100644 --- a/src/renderer/assets/styles/components/slider.scss +++ b/src/renderer/assets/styles/components/slider.scss @@ -17,10 +17,16 @@ position: absolute; top: 0; left: 0; + margin: 0; + padding: 0; & > *:not(:first-child) { margin-left: 15px; } + + li { + list-style-type: none; + } } > button { diff --git a/src/renderer/common/components/Cover.tsx b/src/renderer/common/components/Cover.tsx index 225cc4016..ca8229145 100644 --- a/src/renderer/common/components/Cover.tsx +++ b/src/renderer/common/components/Cover.tsx @@ -121,7 +121,7 @@ class Cover extends React.Component { onKeyUp={this.props.onKeyUp} role="presentation" alt={(this.props.imgRadixProp || this.props.onKeyUp) ? this.props.__("publication.cover.img") : ""} - aria-hidden={(this.props.imgRadixProp || this.props.onKeyUp) ? undefined : true} + // aria-hidden={(this.props.imgRadixProp || this.props.onKeyUp) ? undefined : true} ref={this.props.forwardedRef} src={this.state.imgUrl} onError={this.imageOnError} diff --git a/src/renderer/library/components/searchResult/AllPublicationPage.tsx b/src/renderer/library/components/searchResult/AllPublicationPage.tsx index e08fae6e9..1e9f31a84 100644 --- a/src/renderer/library/components/searchResult/AllPublicationPage.tsx +++ b/src/renderer/library/components/searchResult/AllPublicationPage.tsx @@ -2291,6 +2291,7 @@ export const TableView: React.FC{" "} @@ -2481,6 +2482,7 @@ export const TableView: React.FC { - private contentRef: React.RefObject; - private contentElRefs: HTMLDivElement[] = []; + private contentRef: React.RefObject; + private contentElRefs: HTMLLIElement[] = []; private wrapperRef: React.RefObject; // private contentElVisible: boolean[] = []; constructor(props: IProps) { super(props); - this.contentRef = React.createRef(); + this.contentRef = React.createRef(); this.wrapperRef = React.createRef(); this.state = { @@ -112,20 +112,22 @@ class Slider extends React.Component { className={classNames(stylesSlider.slider_button_prev, stylesButtons.button_transparency_icon)} onClick={this.handleMove.bind(this, false)} disabled={this.state.position < 0 ? false : true} + aria-hidden >
{this.handleScroll(e)}} */> -
+
    {list} -
+
@@ -200,14 +202,14 @@ class Slider extends React.Component { // props.tabIndex = -1; // } return ( -
this.contentElRefs[index] = ref} key={index} onFocus={() => this.moveInView(index)} {...props} > {element} -
+ ); }); } diff --git a/src/renderer/reader/components/AnnotationEdit.tsx b/src/renderer/reader/components/AnnotationEdit.tsx index b84229472..100e770b9 100644 --- a/src/renderer/reader/components/AnnotationEdit.tsx +++ b/src/renderer/reader/components/AnnotationEdit.tsx @@ -209,10 +209,18 @@ export const AnnotationEdit: React.FC = (props) => { setDrawType(type)} checked={drawTypeSelected === type} - aria-label={`${__("reader.annotations.highlight")} ${type === "solid_background" ? __("reader.annotations.type.solid") : type === "outline" ? __("reader.annotations.type.outline") : type === "underline" ? __("reader.annotations.type.underline") : type === "strikethrough" ? __("reader.annotations.type.strikethrough") : __("reader.annotations.type.solid")}`} + aria-label={`${__("reader.annotations.highlight")} ${type === "solid_background" ? + __("reader.annotations.type.solid") : type === "outline" ? + __("reader.annotations.type.outline") : type === "underline" ? + __("reader.annotations.type.underline") : type === "strikethrough" ? + __("reader.annotations.type.strikethrough") : __("reader.annotations.type.solid")}`} /> @@ -220,7 +228,7 @@ export const AnnotationEdit: React.FC = (props) => { )} -
+

{__("catalog.tag")}

{ /> :
- +
} diff --git a/src/renderer/reader/components/ReaderHeader.tsx b/src/renderer/reader/components/ReaderHeader.tsx index 1b362948b..30d0981cb 100644 --- a/src/renderer/reader/components/ReaderHeader.tsx +++ b/src/renderer/reader/components/ReaderHeader.tsx @@ -731,6 +731,9 @@ export class ReaderHeader extends React.Component { { { aria-hidden="true" className={stylesReader.menu_button} id="annotationLabel" - aria-label={__("reader.navigation.annotationTitle")} title={__("reader.navigation.annotationTitle")} > @@ -1252,8 +1255,8 @@ export class ReaderHeader extends React.Component { onClick={() => this.props.ReaderSettingsProps.setZenMode(!this.props.ReaderSettingsProps.zenMode)} ref={this.enableFullscreenRef} aria-pressed={this.props.fullscreen} - aria-label={__("reader.navigation.fullscreenTitle")} - title={__("reader.navigation.fullscreenTitle")} + aria-label={__("reader.navigation.ZenModeTitle")} + title={__("reader.navigation.ZenModeTitle")} > diff --git a/src/renderer/reader/components/ReaderMenu.tsx b/src/renderer/reader/components/ReaderMenu.tsx index 6cafe6daf..3e4f0fbdd 100644 --- a/src/renderer/reader/components/ReaderMenu.tsx +++ b/src/renderer/reader/components/ReaderMenu.tsx @@ -474,7 +474,7 @@ const AnnotationCard: React.FC<{ timestamp: number, annotation: IAnnotationState const date = new Date(timestamp); const dateStr = `${(`${date.getDate()}`.padStart(2, "0"))}/${(`${date.getMonth() + 1}`.padStart(2, "0"))}/${date.getFullYear()}`; - const { style, percentRounded } = React.useMemo(() => { + const { percentRounded } = React.useMemo(() => { if (r2Publication.Spine && annotation.locatorExtended.locator) { const percent = computeProgression(r2Publication.Spine || [], annotation.locatorExtended.locator); const percentRounded = Math.round(percent); @@ -494,7 +494,7 @@ const AnnotationCard: React.FC<{ timestamp: number, annotation: IAnnotationState const creatorName = (annotation.creator?.id !== creatorMyself.id ? annotation.creator?.name : creatorMyself.name) || ""; - return (
{ @@ -509,6 +509,7 @@ const AnnotationCard: React.FC<{ timestamp: number, annotation: IAnnotationState }, 100); } } : undefined} + aria-label={__("reader.annotations.note", {color: __(Object.entries(annotationsColorsLight).find(([colorHex]) => colorHex === annotationColor)?.[1])})} > {/* */}
@@ -516,7 +517,7 @@ const AnnotationCard: React.FC<{ timestamp: number, annotation: IAnnotationState <> : @@ -904,7 +905,7 @@ const AnnotationList: React.FC<{ annotationUUIDFocused: string, resetAnnotationU -
- {(item) => } + {(item) => } @@ -1097,7 +1098,8 @@ const AnnotationList: React.FC<{ annotationUUIDFocused: string, resetAnnotationU
@@ -1105,7 +1107,8 @@ const AnnotationList: React.FC<{ annotationUUIDFocused: string, resetAnnotationU @@ -1154,7 +1157,7 @@ const AnnotationList: React.FC<{ annotationUUIDFocused: string, resetAnnotationU - + @@ -1191,8 +1194,8 @@ const AnnotationList: React.FC<{ annotationUUIDFocused: string, resetAnnotationU - - + + @@ -1332,17 +1335,19 @@ const AnnotationList: React.FC<{ annotationUUIDFocused: string, resetAnnotationU
- {annotationsPagedArray.map(([timestamp, annotationItem], _i) => - setTagArrayFilter(new Set([v]))} - />, - )} +
    + {annotationsPagedArray.map(([timestamp, annotationItem], _i) => + setTagArrayFilter(new Set([v]))} + />, + )} +
{ isPaginated ? <>
@@ -1477,7 +1482,7 @@ const BookmarkItem: React.FC<{ bookmark: IBookmarkState; i: number }> = (props) }, [isEdited]); return ( -
{ @@ -1492,6 +1497,7 @@ const BookmarkItem: React.FC<{ bookmark: IBookmarkState; i: number }> = (props) }, 100); } } : undefined} + aria-label={__("reader.navigation.bookmarkTitle")} >
= (props) const closeNavBookmark = !dockedMode && !(e.shiftKey && e.altKey); goToLocator(bookmark.locator, closeNavBookmark); }} + aria-label={__("reader.goToContent")} // does not work on button (works on 'a' link) // onDoubleClick={(_e) => goToLocator(bookmark.locator, false)} @@ -1552,7 +1559,7 @@ const BookmarkItem: React.FC<{ bookmark: IBookmarkState; i: number }> = (props) }
-
+

{bprogression}

@@ -1593,7 +1600,7 @@ const BookmarkItem: React.FC<{ bookmark: IBookmarkState; i: number }> = (props)
-
+ ); }; @@ -1676,7 +1683,7 @@ const BookmarkList: React.FC<{ r2Publication: R2Publication, dockedMode: boolean itemEdited, setItemToEdit, }}> - +
    { bookmarksPagedArray.map((bookmark, i) => , ) } +
{ isPaginated ? <> @@ -2438,6 +2446,7 @@ export const ReaderMenu: React.FC = (props) => { console.error("Combobox No value !!!"); } }} + disabledKeys={options.filter(option => option.disabled === true).map(option => option.id)} style={{ margin: "0", padding: "0", flexDirection: "row" }} // onInputChange={(v) => { // console.log("inputchange: ", v); diff --git a/src/renderer/reader/components/header/voiceSelection.tsx b/src/renderer/reader/components/header/voiceSelection.tsx index 87e51da7c..f5b94f6ec 100644 --- a/src/renderer/reader/components/header/voiceSelection.tsx +++ b/src/renderer/reader/components/header/voiceSelection.tsx @@ -44,6 +44,7 @@ export const VoiceSelection: React.FC = (props) => { = (props) => {