Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix accessibility #2705

Open
wants to merge 16 commits into
base: develop
Choose a base branch
from
Open

fix accessibility #2705

Show file tree
Hide file tree
Changes from 10 commits
Commits
Show all changes
16 commits
Select commit Hold shift + click to select a range
bdddd39
fix missing titles for accessibility in annotations menu
arthur-lemeur Dec 11, 2024
6028557
change selectDrawtypesOptions key title to textValue
arthur-lemeur Dec 11, 2024
3448633
up accessiblity
arthur-lemeur Dec 12, 2024
0b98483
add missing aria-labels in ReaderHeader (tts inputs and annotations)
arthur-lemeur Dec 12, 2024
8474b24
change home lists from "div" to semantic "ul" and "li"
arthur-lemeur Dec 16, 2024
8fd923c
change table and tbody role to "presentation" in grid view
arthur-lemeur Dec 16, 2024
68d0bd7
delete aria-hidden on cover images ("role=presentation" sufficient)
arthur-lemeur Dec 16, 2024
71a5fb6
Merge branch 'develop' into fix/accessibility-titles
danielweck Dec 20, 2024
62ba3bf
fix empty navigation disabled in docked reader menu
arthur-lemeur Dec 30, 2024
d51f887
fix zen mode buttons labelling
arthur-lemeur Dec 30, 2024
b59c26f
fix annotation toolbar labels
arthur-lemeur Dec 30, 2024
4d7c584
fix annotation list semantic and aria-labels
arthur-lemeur Dec 30, 2024
9ed67ca
up bookmarks accessibility and i18n check
arthur-lemeur Dec 30, 2024
684f593
Merge branch 'develop' into fix/accessibility-titles
danielweck Dec 30, 2024
2711b71
Merge branch 'develop' into fix/accessibility-titles
danielweck Jan 8, 2025
ac3ebe2
fix i18n merge conflicts
arthur-lemeur Jan 8, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 4 additions & 0 deletions src/renderer/assets/styles/components/combobox.scss
View file
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -811,9 +811,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
Open in desktop
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
13 changes: 7 additions & 6 deletions src/renderer/reader/components/ReaderMenu.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -860,10 +860,10 @@ const AnnotationList: React.FC<{ annotationUUIDFocused: string, resetAnnotationU
// });

const selectDrawtypesOptions = [
{ name: "solid_background", svg: HighLightIcon },
{ name: "underline", svg: UnderLineIcon },
{ name: "strikethrough", svg: TextStrikeThroughtIcon },
{ name: "outline", svg: TextOutlineIcon },
{ name: "solid_background", svg: HighLightIcon, textValue: `${__("reader.annotations.type.solid")}` },
{ name: "underline", svg: UnderLineIcon, textValue: `${__("reader.annotations.type.underline")}` },
{ name: "strikethrough", svg: TextStrikeThroughtIcon, textValue: `${__("reader.annotations.type.strikethrough")}` },
{ name: "outline", svg: TextOutlineIcon, textValue: `${__("reader.annotations.type.outline")}` },
];

const nbOfFilters = ((tagArrayFilter === "all") ?
Expand Down Expand Up @@ -1055,7 +1055,7 @@ const AnnotationList: React.FC<{ annotationUUIDFocused: string, resetAnnotationU
</div>
</summary>
<TagList items={selectDrawtypesOptions} className={stylesAnnotations.annotations_filter_taglist}>
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This taglist element is rendered as a non semantic div.
Checkboxes with labels would be more appropriate.

{(item) => <Tag id={item.name} className={stylesAnnotations.annotations_filter_drawtype} textValue={item.name}><SVG svg={item.svg} /></Tag>}
{(item) => <Tag id={item.name} className={stylesAnnotations.annotations_filter_drawtype} textValue={item.textValue}><SVG svg={item.svg} /></Tag>}
</TagList>
</details>
</TagGroup>
Expand Down Expand Up @@ -1170,7 +1170,7 @@ const AnnotationList: React.FC<{ annotationUUIDFocused: string, resetAnnotationU
</Popover.Portal>
</Popover.Root>
<AlertDialog.Root>
<AlertDialog.Trigger className={stylesAnnotations.annotations_filter_trigger_button} disabled={!annotationListFiltered.length}>
<AlertDialog.Trigger className={stylesAnnotations.annotations_filter_trigger_button} disabled={!annotationListFiltered.length} title={__("dialog.deleteAnnotations")}>
<SVG svg={TrashIcon} ariaHidden />
</AlertDialog.Trigger>
<AlertDialog.Portal>
Expand Down Expand Up @@ -2454,6 +2454,7 @@ export const ReaderMenu: React.FC<IBaseProps> = (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);
Expand Down
2 changes: 2 additions & 0 deletions src/renderer/reader/components/header/voiceSelection.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -44,6 +44,7 @@ export const VoiceSelection: React.FC<IProps> = (props) => {
<ComboBox
style={{paddingBottom: "0"}}
label={__("reader.tts.language")}
aria-label={__("reader.tts.language")}
defaultItems={languages}
// defaultSelectedKey={`TTS_LANG_${selectedLanguage}`}
selectedKey={`TTS_LANG_${selectedLanguage}`}
Expand All @@ -56,6 +57,7 @@ export const VoiceSelection: React.FC<IProps> = (props) => {
</ComboBox>
<ComboBox
label={__("reader.tts.voice")}
aria-label={__("reader.tts.voice")}
defaultItems={voicesGroupedByRegions}
selectedKey={
ttsVoice ?
Expand Down
2 changes: 2 additions & 0 deletions src/resources/locales/en.json
View file
Open in desktop
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

added those keys to the localisation table in the support pages edrlab/thorium-reader-doc@c7453f8

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Not sure if Zen mode replace Full screen. In this case, the old key should be deleted.

Original file line number Diff line number Diff line change
Expand Up @@ -411,6 +411,8 @@
"currentPageTotal": "Current page: {{- current}}/{{- total}}",
"detachWindowTitle": "show library / bookshelf window",
"fullscreenTitle": "go fullscreen",
"ZenModeTitle": "Zen mode",
"ZenModeExit": "Exit Zen mode",
"goTo": "Go to",
"goToError": "Page break does not exist",
"goToPlaceHolder": "Enter page number",
Expand Down
2 changes: 2 additions & 0 deletions src/resources/locales/fr.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -411,6 +411,8 @@
"currentPageTotal": "Page courante: {{- current}}/{{- total}}",
"detachWindowTitle": "afficher la bibliothèque",
"fullscreenTitle": "mode plein écran",
"ZenModeTitle": "Mode Zen",
"ZenModeExit": "Sortir du mode Zen",
"goTo": "Aller à",
"goToError": "Cette page n'existe pas",
"goToPlaceHolder": "Entrer un numéro de page",
Expand Down
Loading
Loading