Describe new annotations as "New" in aria-label

Prefix the `aria-label` for annotation `article` elements with "New"
when the annotation is unsaved as an extra hint for screen-reader users.

Related to https://github.com/hypothesis/product-backlog/issues/1344

src/sidebar/components/Annotation/Annotation.js

@@ -100,10 +100,14 @@ function Annotation({
     [annotation, defaultAuthority, displayNamesEnabled]
   );
 
+  const annotationDescription = isSaved(annotation)
+    ? annotationRole(annotation)
+    : `New ${annotationRole(annotation).toLowerCase()}`;
+
   return (
     <article
       className="space-y-4"
-      aria-label={`${annotationRole(annotation)} by ${authorName}`}
+      aria-label={`${annotationDescription} by ${authorName}`}
     >
       <AnnotationHeader
         annotation={annotation}

src/sidebar/components/Annotation/test/Annotation-test.js

@@ -79,7 +79,7 @@ describe('Annotation', () => {
   });
 
   describe('annotation accessibility (ARIA) attributes', () => {
-    it('should add an `aria-label` composed of annotation type and author name', () => {
+    it('should add a descriptive `aria-label` for an existing annotation', () => {
       const wrapper = createComponent();
 
       assert.equal(
@@ -87,6 +87,15 @@ describe('Annotation', () => {
         'Annotation by Richard Lionheart'
       );
     });
+
+    it('should add a descriptive `aria-label` for a new annotation', () => {
+      const wrapper = createComponent({ annotation: fixtures.newAnnotation() });
+
+      assert.equal(
+        wrapper.find('article').props()['aria-label'],
+        'New annotation by Richard Lionheart'
+      );
+    });
   });
 
   describe('annotation quote', () => {