Skip to content

Commit

Permalink
fix(a11y): improved GUI structure and semantics for better accessibil…
Browse files Browse the repository at this point in the history 
…ity (PR #2705 Fixes #2698 Fixes #2700 Fixes #2709 Fixes #2710 Fixes #2711 Fixes #2715 Fixes #2714 Fixes #2718 Fixes #2724 Fixes #2735 Fixes #2728 Fixes #2729 Fixes #2731 )
  • Loading branch information
@arthur-lemeur
arthur-lemeur authored Jan 31, 2025
1 parent 35f4b59 commit 54ceafc
Show file tree
Hide file tree
Showing 39 changed files with 270 additions and 54 deletions.
5 changes: 5 additions & 0 deletions src/renderer/assets/styles/components/annotations.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,10 @@
display: flex;
flex-direction: column;
gap: 5px;

ol {
padding: 0;
}
}

.popover_dialog_reader .settings_tab.annotations_tab {
Expand Down Expand Up @@ -518,6 +522,7 @@

.settings_tab .annotations_line {
width: 100%;
list-style-type: none;
}

.annotations_line {
Expand Down
4 changes: 4 additions & 0 deletions src/renderer/assets/styles/components/combobox.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -122,6 +122,10 @@
overflow: hidden;
text-overflow: ellipsis;
font-size: 14px;

&[data-disabled] {
color: var(--color-light-grey);
}

&.selected {
font-weight: 600;
Expand Down
6 changes: 6 additions & 0 deletions src/renderer/assets/styles/components/slider.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand Down
2 changes: 1 addition & 1 deletion src/renderer/common/components/Cover.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -121,7 +121,7 @@ class Cover extends React.Component<IProps, IState> {
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}
Expand Down
2 changes: 2 additions & 0 deletions src/renderer/library/components/searchResult/AllPublicationPage.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2291,6 +2291,7 @@ export const TableView: React.FC<ITableCellProps_TableView & ITableCellProps_Com
style={{ visibility: "hidden" }}>{" "}</span>
<table {...tableInstance.getTableProps()}
className={stylesPublication.allBook_table}
role= {displayType === DisplayType.Grid ? "presentation" : "table"}
style={{
display: "table",
}}>
Expand Down Expand Up @@ -2481,6 +2482,7 @@ export const TableView: React.FC<ITableCellProps_TableView & ITableCellProps_Com
<tbody {...tableInstance.getTableBodyProps()}
className={stylesPublication.allBook_table_body}
id="publicationsTableBody"
role= {displayType === DisplayType.Grid ? "presentation" : "rowgroup"}
style={{
display: displayType === DisplayType.Grid ? "grid" : "",
}}
Expand Down
16 changes: 9 additions & 7 deletions src/renderer/library/components/utils/Slider.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -37,15 +37,15 @@ interface IState {
}

class Slider extends React.Component<IProps, IState> {
private contentRef: React.RefObject<HTMLDivElement>;
private contentElRefs: HTMLDivElement[] = [];
private contentRef: React.RefObject<HTMLUListElement>;
private contentElRefs: HTMLLIElement[] = [];
private wrapperRef: React.RefObject<HTMLDivElement>;
// private contentElVisible: boolean[] = [];

constructor(props: IProps) {
super(props);

this.contentRef = React.createRef<HTMLDivElement>();
this.contentRef = React.createRef<HTMLUListElement>();
this.wrapperRef = React.createRef<HTMLDivElement>();

this.state = {
Expand Down Expand Up @@ -112,20 +112,22 @@ class Slider extends React.Component<IProps, IState> {
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
>
<SVG ariaHidden={true} svg={ArrowRightIcon} />
</button>
<div ref={this.wrapperRef} className={stylesSlider.slider_wrapper}
/* onScroll={(e) => {this.handleScroll(e)}} */>
<div ref={this.contentRef} className={stylesSlider.slider_items} style={varStyle}>
<ul ref={this.contentRef} className={stylesSlider.slider_items} style={varStyle}>
{list}
</div>
</ul>
</div>
<button
onClick={this.handleMove.bind(this, true)}
aria-label={__("accessibility.rightSlideButton")}
className={classNames(stylesSlider.slider_button_next, stylesButtons.button_transparency_icon)}
disabled={this.state.position > max ? false : true}
aria-hidden
>
<SVG ariaHidden={true} svg={ArrowRightIcon}/>
</button>
Expand Down Expand Up @@ -200,14 +202,14 @@ class Slider extends React.Component<IProps, IState> {
// props.tabIndex = -1;
// }
return (
<div
<li
ref={(ref) => this.contentElRefs[index] = ref}
key={index}
onFocus={() => this.moveInView(index)}
{...props}
>
{element}
</div>
</li>
);
});
}
Expand Down
14 changes: 11 additions & 3 deletions src/renderer/reader/components/AnnotationEdit.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -209,18 +209,26 @@ export const AnnotationEdit: React.FC<IProps> = (props) => {
<input type="radio" id={`anno_type_${uuid}_${type}`} name="drawtype" value={type}
onChange={() => 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")}`}
/>
<label htmlFor={`anno_type_${uuid}_${type}`}
title={`${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")}`}
title={`${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")}`}
className={drawTypeSelected === type ? stylesAnnotations.drawType_active : ""}
><SVG ariaHidden svg={drawIcon[i]} /></label>
</div>
),
)}
</div>
</div>
<div className={stylesAnnotations.annotation_actions_container} style={{width: "95%"}}>
<div className={stylesAnnotations.annotation_actions_container} style={{ width: "95%" }}>
<h4>{__("catalog.tag")}</h4>
<ComboBox defaultItems={selectTagOption}
placeholder={__("catalog.addTags")}
Expand Down
11 changes: 8 additions & 3 deletions src/renderer/reader/components/Reader.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -813,9 +813,14 @@ class Reader extends React.Component<IProps, IState> {
/>
:
<div className={stylesReader.exitZen_container}>
<button onClick={() => this.setState({ zenMode : false})} className={stylesReader.button_exitZen} style={{ opacity: isPaginated ? "1" : "0"}}>
<SVG ariaHidden svg={exitZenModeIcon} />
</button>
<button onClick={() => this.setState({ zenMode: false })}
className={stylesReader.button_exitZen}
style={{ opacity: isPaginated ? "1" : "0" }}
aria-label={this.props.__("reader.navigation.ZenModeExit")}
title={this.props.__("reader.navigation.ZenModeExit")}
>
<SVG ariaHidden svg={exitZenModeIcon} />
</button>
</div>
}

Expand Down
9 changes: 6 additions & 3 deletions src/renderer/reader/components/ReaderHeader.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -731,6 +731,9 @@ export class ReaderHeader extends React.Component<IProps, IState> {
<ComboBox label={useMO ?
__("reader.media-overlays.speed")
: __("reader.tts.speed")}
aria-label={useMO ?
__("reader.media-overlays.speed")
: __("reader.tts.speed")}
defaultItems={playbackRate}
// defaultSelectedKey={2}
selectedKey={
Expand Down Expand Up @@ -905,6 +908,7 @@ export class ReaderHeader extends React.Component<IProps, IState> {
<input
disabled={this.props.isPdf || this.props.isDivina || isAudioBook}
id="annotationButton"
aria-label={__("reader.navigation.annotationTitle")}
className={stylesReader.bookmarkButton}
type="checkbox"
checked={this.props.isAnnotationModeEnabled}
Expand All @@ -927,7 +931,6 @@ export class ReaderHeader extends React.Component<IProps, IState> {
aria-hidden="true"
className={stylesReader.menu_button}
id="annotationLabel"
aria-label={__("reader.navigation.annotationTitle")}
title={__("reader.navigation.annotationTitle")}
>
<SVG ariaHidden svg={AnnotationsIcon} className={classNames(stylesReaderHeader.annotationsIcon, this.props.isAnnotationModeEnabled ? stylesReaderHeader.active_svg : "")} />
Expand Down Expand Up @@ -1252,8 +1255,8 @@ export class ReaderHeader extends React.Component<IProps, IState> {
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")}
>
<SVG ariaHidden={true} svg={viewMode} />
</button>
Expand Down
Loading

0 comments on commit 54ceafc

Please sign in to comment.