vpat 74: added description and state to tags

- added aria-description to tags to announce that this will
filter annotations by this tag. Note that there is a warning
logged that aria-description is not a valid aria property -
it is a bug in react 17
- added role=checkbox and aria-checked state to tags to
indicate which ones are toggled on

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

@@ -42,6 +42,9 @@ function Selector({ tags, colors, authors, onContextMenu, onClickTag, onClickCol
 						onDragOver={handleDragOver}
 						onDragLeave={handleDragLeave}
 						onDrop={(event) => handleDrop(event, null, color.color)}
+						role="checkbox"
+						aria-checked={color.selected}
+						aria-description={intl.formatMessage({ id: "pdfReader.tagSelectorMessage" })}
 					><IconColor16 color={color.color}/></button>
 				))}
 			</div>}
@@ -55,6 +58,9 @@ function Selector({ tags, colors, authors, onContextMenu, onClickTag, onClickCol
 						onDragOver={handleDragOver}
 						onDragLeave={handleDragLeave}
 						onDrop={(event) => handleDrop(event, { name: tag.name, color: tag.color })}
+						role="checkbox"
+						aria-checked={tag.selected}
+						aria-description={intl.formatMessage({ id: "pdfReader.tagSelectorMessage" })}
 					>{!!tag.color && <span className="icon"><IconTagCircle color={tag.color}/></span>}{tag.name}</button>
 				))}
 			</div>}

src/en-us.strings.js

@@ -106,6 +106,7 @@ export default {
 	'pdfReader.openMenu' : 'Open menu',
 	'pdfReader.thumbnails' : 'Thumbnails',
 	'pdfReader.addTags': 'Add tags…',
+	'pdfReader.tagSelectorMessage' : 'Filter annotations by this tag',
 	'pdfReader.highlightText': 'Highlight Text',
 	'pdfReader.underlineText': 'Underline Text',
 	'pdfReader.addNote': 'Add Note',