Skip to content
Projects
Groups
Snippets
Help
Loading...
Help
Submit feedback
Contribute to GitLab
Sign in
Toggle navigation
C
coopwire-hypothesis
Project
Project
Details
Activity
Releases
Cycle Analytics
Repository
Repository
Files
Commits
Branches
Tags
Contributors
Graph
Compare
Charts
Issues
0
Issues
0
List
Board
Labels
Milestones
Merge Requests
0
Merge Requests
0
CI / CD
CI / CD
Pipelines
Jobs
Schedules
Charts
Wiki
Wiki
Snippets
Snippets
Members
Members
Collapse sidebar
Close sidebar
Activity
Graph
Charts
Create a new issue
Jobs
Commits
Issue Boards
Open sidebar
孙灵跃 Leon Sun
coopwire-hypothesis
Commits
1720fab6
Commit
1720fab6
authored
May 11, 2022
by
Lyza Danger Gardner
Committed by
Lyza Gardner
May 16, 2022
Browse files
Options
Browse Files
Download
Email Patches
Plain Diff
Add `aria-label` attribute to Annotation `article` elements
parent
739efa8b
Changes
4
Hide whitespace changes
Inline
Side-by-side
Showing
4 changed files
with
93 additions
and
3 deletions
+93
-3
Annotation.js
src/sidebar/components/Annotation/Annotation.js
+17
-2
Annotation-test.js
src/sidebar/components/Annotation/test/Annotation-test.js
+18
-0
annotation-metadata.js
src/sidebar/helpers/annotation-metadata.js
+16
-0
annotation-metadata-test.js
src/sidebar/helpers/test/annotation-metadata-test.js
+42
-1
No files found.
src/sidebar/components/Annotation/Annotation.js
View file @
1720fab6
import
{
Actions
,
Spinner
}
from
'@hypothesis/frontend-shared'
;
import
classnames
from
'classnames'
;
import
{
useMemo
}
from
'preact/hooks'
;
import
{
useSidebarStore
}
from
'../../store'
;
import
{
isOrphan
,
isSaved
,
quote
}
from
'../../helpers/annotation-metadata'
;
import
{
annotationRole
,
isOrphan
,
isSaved
,
quote
,
}
from
'../../helpers/annotation-metadata'
;
import
{
annotationDisplayName
}
from
'../../helpers/annotation-user'
;
import
{
withServices
}
from
'../../service-context'
;
import
AnnotationActionBar
from
'./AnnotationActionBar'
;
...
...
@@ -84,8 +91,16 @@ function Annotation({
}
};
const
authorName
=
useMemo
(
()
=>
annotationDisplayName
(
annotation
,
store
),
[
annotation
,
store
]
);
return
(
<
article
className
=
"space-y-4"
>
<
article
className
=
"space-y-4"
aria
-
label
=
{
`
${
annotationRole
(
annotation
)}
by
${
authorName
}
`
}
>
<
AnnotationHeader
annotation
=
{
annotation
}
isEditing
=
{
isEditing
}
...
...
src/sidebar/components/Annotation/test/Annotation-test.js
View file @
1720fab6
...
...
@@ -10,6 +10,7 @@ import Annotation, { $imports } from '../Annotation';
describe
(
'Annotation'
,
()
=>
{
// Dependency Mocks
let
fakeMetadata
;
let
fakeAnnotationUser
;
// Injected dependency mocks
let
fakeAnnotationsService
;
...
...
@@ -43,7 +44,12 @@ describe('Annotation', () => {
save
:
sinon
.
stub
().
resolves
(),
};
fakeAnnotationUser
=
{
annotationDisplayName
:
sinon
.
stub
().
returns
(
'Richard Lionheart'
),
};
fakeMetadata
=
{
annotationRole
:
sinon
.
stub
().
returns
(
'Annotation'
),
quote
:
sinon
.
stub
(),
};
...
...
@@ -58,6 +64,7 @@ describe('Annotation', () => {
$imports
.
$mock
(
mockImportedComponents
());
$imports
.
$mock
({
'../../helpers/annotation-metadata'
:
fakeMetadata
,
'../../helpers/annotation-user'
:
fakeAnnotationUser
,
'../../store'
:
{
useSidebarStore
:
()
=>
fakeStore
},
});
});
...
...
@@ -66,6 +73,17 @@ describe('Annotation', () => {
$imports
.
$restore
();
});
describe
(
'annotation accessibility (ARIA) attributes'
,
()
=>
{
it
(
'should add an `aria-label` composed of annotation type and author name'
,
()
=>
{
const
wrapper
=
createComponent
();
assert
.
equal
(
wrapper
.
find
(
'article'
).
props
()[
'aria-label'
],
'Annotation by Richard Lionheart'
);
});
});
describe
(
'annotation quote'
,
()
=>
{
it
(
'renders quote if annotation has a quote'
,
()
=>
{
fakeMetadata
.
quote
.
returns
(
'quote'
);
...
...
src/sidebar/helpers/annotation-metadata.js
View file @
1720fab6
...
...
@@ -276,6 +276,22 @@ export function isAnnotation(annotation) {
return
!!
(
hasSelector
(
annotation
)
&&
!
isOrphan
(
annotation
));
}
/**
* Return a human-readable string describing the annotation's role.
*
* @param {Annotation} annotation
*/
export
function
annotationRole
(
annotation
)
{
if
(
isReply
(
annotation
))
{
return
'Reply'
;
}
else
if
(
isHighlight
(
annotation
))
{
return
'Highlight'
;
}
else
if
(
isPageNote
(
annotation
))
{
return
'Page note'
;
}
return
'Annotation'
;
}
/** Return a numeric key that can be used to sort annotations by location.
*
* @param {Annotation} annotation
...
...
src/sidebar/helpers/test/annotation-metadata-test.js
View file @
1720fab6
...
...
@@ -272,7 +272,7 @@ describe('sidebar/helpers/annotation-metadata', () => {
});
});
describe
(
'
.
isHighlight'
,
()
=>
{
describe
(
'isHighlight'
,
()
=>
{
[
{
annotation
:
fixtures
.
newEmptyAnnotation
(),
...
...
@@ -373,6 +373,47 @@ describe('sidebar/helpers/annotation-metadata', () => {
});
});
describe
(
'annotationRole'
,
()
=>
{
it
(
'correctly identifies the role of an annotation'
,
()
=>
{
// An annotation needs a `selector` or else it will be identified as a
// 'Page note'
const
annotationAnnotation
=
{
...
fixtures
.
newAnnotation
(),
target
:
[{
source
:
'source'
,
selector
:
[]
}],
};
const
highlightAnnotation
=
fixtures
.
oldHighlight
();
const
pageNoteAnnotation
=
fixtures
.
newPageNote
();
// If an annotation is a reply of any sort, that will supersede.
// e.g. the label for a page note that is also a reply is "Reply"
// In practice, highlights are never replies.
const
replyAnnotations
=
[
{
...
annotationAnnotation
,
references
:
[
'parent_annotation_id'
]
},
{
...
highlightAnnotation
,
references
:
[
'parent_annotation_id'
]
},
{
...
pageNoteAnnotation
,
references
:
[
'parent_annotation_id'
]
},
fixtures
.
oldReply
(),
];
assert
.
equal
(
annotationMetadata
.
annotationRole
(
annotationAnnotation
),
'Annotation'
);
assert
.
equal
(
annotationMetadata
.
annotationRole
(
highlightAnnotation
),
'Highlight'
);
assert
.
equal
(
annotationMetadata
.
annotationRole
(
pageNoteAnnotation
),
'Page note'
);
replyAnnotations
.
forEach
(
reply
=>
{
assert
.
equal
(
annotationMetadata
.
annotationRole
(
reply
),
'Reply'
);
});
});
});
describe
(
'isPublic'
,
()
=>
{
it
(
'returns true if an annotation is shared within a group'
,
()
=>
{
assert
.
isTrue
(
annotationMetadata
.
isPublic
(
fixtures
.
publicAnnotation
()));
...
...
Write
Preview
Markdown
is supported
0%
Try again
or
attach a new file
Attach a file
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment