Labels in the reader’s language
Tap the page and the controls read in Japanese. The viewer ships English labels, and every one of them can be replaced where the component is placed: aria-label names the progress, the navigation group, and the page-turn buttons, and a format function names the pages on screen.
PageStatus and PageProgressSlider take the same format, which receives the pages on screen and returns their label. The status shows it, and the slider announces it through aria-valuetext, at rest and while a drag is under way, so a screen reader hears the page under the thumb in the words the toolbar shows. The lang attribute around the reader tells it which voice to use.
Source code
1import * as ComicViewer from "@publira/comic-viewer";23// The status and the slider share it, so what the toolbar shows and what a4// screen reader hears always agree.5const formatPageStatus = ({ firstPage, lastPage, pageCount, slot }) => {6 if (firstPage === 0) {7 if (slot === undefined) {8 return "ページがありません";9 }1011 return slot === "start" ? "巻頭ページ" : "巻末ページ";12 }1314 return firstPage === lastPage15 ? `${firstPage} / ${pageCount} ページ`16 : `${firstPage}〜${lastPage} / ${pageCount} ページ`;17};1819// Giving the buttons children replaces the default icons, so the arrows are20// drawn here the way the reading direction points them.21const PageNavigation = () => {22 const { readingDirection } = ComicViewer.useViewerContext();23 const previousPath =24 readingDirection === "rtl" ? "m10 6 6 6-6 6" : "m14 6-6 6 6 6";25 const nextPath =26 readingDirection === "rtl" ? "m14 6-6 6 6 6" : "m10 6 6 6-6 6";2728 return (29 <ComicViewer.PageNavigation aria-label="ページ送り">30 <ComicViewer.PreviousPageButton aria-label="前のページ">31 <svg aria-hidden="true" viewBox="0 0 24 24">32 <path d={previousPath} />33 </svg>34 </ComicViewer.PreviousPageButton>35 <ComicViewer.NextPageButton aria-label="次のページ">36 <svg aria-hidden="true" viewBox="0 0 24 24">37 <path d={nextPath} />38 </svg>39 </ComicViewer.NextPageButton>40 </ComicViewer.PageNavigation>41 );42};4344export const Reader = ({ pages }) => (45 <div lang="ja">46 <ComicViewer.Root pages={pages}>47 <ComicViewer.Viewport />48 <ComicViewer.Toolbar>49 <ComicViewer.PageProgress aria-label="読書の進み具合">50 <ComicViewer.PageProgressSlider format={formatPageStatus} />51 <ComicViewer.PageStatus format={formatPageStatus} />52 </ComicViewer.PageProgress>53 </ComicViewer.Toolbar>54 <PageNavigation />55 </ComicViewer.Root>56 </div>57);