Skip to content

Commit

Permalink
feature(a11y): show accessibility metadata in publication info dialog…
Browse files Browse the repository at this point in the history 
… (PR #1839  Fixes #1332 )
  • Loading branch information
@panaC
panaC authored Oct 28, 2022
1 parent 48917cf commit 1d48f88
Show file tree
Hide file tree
Showing 24 changed files with 987 additions and 126 deletions.
154 changes: 35 additions & 119 deletions src/renderer/common/components/dialog/publicationInfos/PublicationInfoDescription.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,6 @@ import * as stylesBookDetailsDialog from "readium-desktop/renderer/assets/styles
import * as stylesBlocks from "readium-desktop/renderer/assets/styles/components/blocks.css";
import * as stylesButtons from "readium-desktop/renderer/assets/styles/components/buttons.css";
import * as stylesGlobal from "readium-desktop/renderer/assets/styles/global.css";
import { convertMultiLangStringToString } from "readium-desktop/renderer/common/language-string";

// Logger
const debug = debug_("readium-desktop:renderer:publicationInfoDescription");
Expand All @@ -31,148 +30,77 @@ interface IProps {
interface IState {
seeMore: boolean;
needSeeMore: boolean;

seeMore_a11y: boolean;
needSeeMore_a11y: boolean;
}

export default class PublicationInfoDescription extends React.Component<IProps, IState> {

private descriptionWrapperRef: React.RefObject<HTMLDivElement>;
private descriptionRef: React.RefObject<HTMLParagraphElement>;

private descriptionWrapperRef_a11y: React.RefObject<HTMLDivElement>;
private descriptionRef_a11y: React.RefObject<HTMLParagraphElement>;

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

this.descriptionWrapperRef = React.createRef<HTMLDivElement>();
this.descriptionRef = React.createRef<HTMLParagraphElement>();


this.descriptionWrapperRef_a11y = React.createRef<HTMLDivElement>();
this.descriptionRef_a11y = React.createRef<HTMLParagraphElement>();

this.state = {
seeMore: false,
needSeeMore: false,

seeMore_a11y: false,
needSeeMore_a11y: false,
};
}

public componentDidMount() {
setTimeout(this.needSeeMoreButton, 500);
setTimeout(this.needSeeMoreButton_a11y, 500);
}

public componentDidUpdate(prevProps: IProps) {

if (this.props.publication !== prevProps.publication) {
setTimeout(this.needSeeMoreButton, 500);
setTimeout(this.needSeeMoreButton_a11y, 500);
}
}

public render() {
const { publication, __, translator } = this.props;

if (publication.description || publication.a11y_accessibilitySummary) {

const textSanitize = publication.description ?
DOMPurify.sanitize(publication.description).replace(/font-size:/g, "font-sizexx:") :
"";

let textSanitize_a11y = "";
if (publication.a11y_accessibilitySummary) {

const langStr = convertMultiLangStringToString(translator, publication.a11y_accessibilitySummary);

if (langStr && langStr[1]) {
textSanitize_a11y = DOMPurify.sanitize(langStr[1]).replace(/font-size:/g, "font-sizexx:");
}
}

return (
<>
<div className={stylesGlobal.heading}>
<h3>{__("catalog.description")}</h3>
</div>
{
publication.description ?
(
<div className={classNames(stylesBlocks.block_line, stylesBlocks.description_see_more)}>
<div
ref={this.descriptionWrapperRef}
className={classNames(
stylesBookDetailsDialog.descriptionWrapper,
this.state.needSeeMore && stylesGlobal.mb_30,
this.state.needSeeMore && stylesBookDetailsDialog.hideEnd,
this.state.seeMore && stylesBookDetailsDialog.seeMore,
)}
>
<div
ref={this.descriptionRef}
className={stylesBookDetailsDialog.allowUserSelect}
dangerouslySetInnerHTML={{__html: textSanitize}}
>
</div>
</div>
{
this.state.needSeeMore &&
<button aria-hidden className={stylesButtons.button_see_more} onClick={this.toggleSeeMore}>
{
this.state.seeMore
? __("publication.seeLess")
: __("publication.seeMore")
}
</button>
}
const { publication: { description }, __ } = this.props;

if (!description) return <></>;
const textSanitize = DOMPurify.sanitize(description).replace(/font-size:/g, "font-sizexx:");
if (!textSanitize) return <></>;
return (
<>
<div className={stylesGlobal.heading}>
<h3>{__("catalog.description")}</h3>
</div>
<div className={classNames(stylesBlocks.block_line, stylesBlocks.description_see_more)}>
<div
ref={this.descriptionWrapperRef}
className={classNames(
stylesBookDetailsDialog.descriptionWrapper,
this.state.needSeeMore && stylesGlobal.mb_30,
this.state.needSeeMore && stylesBookDetailsDialog.hideEnd,
this.state.seeMore && stylesBookDetailsDialog.seeMore,
)}
>
<div
ref={this.descriptionRef}
className={stylesBookDetailsDialog.allowUserSelect}
dangerouslySetInnerHTML={{ __html: textSanitize }}
>
</div>
)
: <></>
}
</div>
{
publication.a11y_accessibilitySummary ?
(
<div className={classNames(stylesBlocks.block_line, stylesBlocks.description_see_more)}>
<div
ref={this.descriptionWrapperRef_a11y}
className={classNames(
stylesBookDetailsDialog.descriptionWrapper,
this.state.needSeeMore_a11y && stylesGlobal.mb_30,
this.state.needSeeMore_a11y && stylesBookDetailsDialog.hideEnd,
this.state.seeMore_a11y && stylesBookDetailsDialog.seeMore,
)}
>
<div
ref={this.descriptionRef_a11y}
className={stylesBookDetailsDialog.allowUserSelect}
dangerouslySetInnerHTML={{__html: textSanitize_a11y}}
>
</div>
</div>
this.state.needSeeMore &&
<button aria-hidden className={stylesButtons.button_see_more} onClick={this.toggleSeeMore}>
{
this.state.needSeeMore_a11y &&
<button aria-hidden className={stylesButtons.button_see_more} onClick={this.toggleSeeMore_a11y}>
{
this.state.seeMore_a11y
? __("publication.seeLess")
: __("publication.seeMore")
}
</button>
this.state.seeMore
? __("publication.seeLess")
: __("publication.seeMore")
}
</div>
)
: <></>
</button>
}
</>
);
}

return (<></>);
</div>
</>
);
}

private needSeeMoreButton = () => {
Expand All @@ -188,16 +116,4 @@ export default class PublicationInfoDescription extends React.Component<IProps,
seeMore: !this.state.seeMore,
});

private needSeeMoreButton_a11y = () => {
if (!this.descriptionWrapperRef_a11y?.current || !this.descriptionRef_a11y?.current) {
return;
}
const need = this.descriptionWrapperRef_a11y.current.offsetHeight < this.descriptionRef_a11y.current.offsetHeight;
this.setState({ needSeeMore_a11y: need });
};

private toggleSeeMore_a11y = () =>
this.setState({
seeMore_a11y: !this.state.seeMore_a11y,
});
}
Loading

0 comments on commit 1d48f88

Please sign in to comment.