vpat 72: aria properties to announce thumbnails

Author: abaevbog

src/common/components/sidebar/thumbnails-view.js

@@ -11,6 +11,10 @@ const Thumbnail = memo(({ thumbnail, selected, pageLabel, onContextMenu }) => {
 			className={cx('thumbnail', { selected })}
 			data-page-index={thumbnail.pageIndex}
 			onContextMenu={onContextMenu}
+			role="option"
+			aria-label={pageLabel}
+			aria-selected={selected}
+			id={`thumbnail_${thumbnail.pageIndex}`}
 		>
 			<div className="image">
 				{thumbnail.image
@@ -219,6 +223,10 @@ function ThumbnailsView(props) {
 				onMouseDown={handleMouseDown}
 				ref={containerRef}
 				tabIndex={-1}
+				role='listbox'
+				aria-label={intl.formatMessage({ id: "pdfReader.thumbnails" })}
+				aria-activedescendant={`thumbnail_${selected[selected.length-1]}`}
+				aria-multiselectable="true"
 			>
 				{props.thumbnails.map((thumbnail, index) => {
 					let pageLabel = props.pageLabels[index] || (index + 1).toString();

src/en-us.strings.js

@@ -104,6 +104,7 @@ export default {
 	'pdfReader.annotationText': 'Annotation text',
 	'pdfReader.manageTags' : 'Click to manage tags.',
 	'pdfReader.openMenu' : 'Open menu',
+	'pdfReader.thumbnails' : 'Thumbnails',
 	'pdfReader.addTags': 'Add tags…',
 	'pdfReader.highlightText': 'Highlight Text',
 	'pdfReader.underlineText': 'Underline Text',