Add `lang=""` to user-generated/chosen content in sidebar UI

Add a `lang=""` attribute to the annotation quote, body and tag list in the UI which display content chosen or generated by the user, to indicate to the user agent that the language is unknown and may be different than the client UI, which is currently always English. Part of https://github.com/hypothesis/client/issues/1794.

Add `lang=""` to user-generated/chosen content in sidebar UI
Add a `lang=""` attribute to the annotation quote, body and tag list in the UI which display content chosen or generated by the user, to indicate to the user agent that the language is unknown and may be different than the client UI, which is currently always English. Part of https://github.com/hypothesis/client/issues/1794.
c100a254 · Robert Knight · 57aea6cb · c100a254 · c100a254 · c100a254
Commit c100a254 authored Feb 17, 2020 by Robert Knight
Showing with 19 additions and 1 deletion

annotation-quote.js src/sidebar/components/annotation-quote.js +11 -0

markdown-view.js src/sidebar/components/markdown-view.js +6 -0

tag-list.js src/sidebar/components/tag-list.js +2 -1

No files found.
--- a/src/sidebar/components/annotation-quote.js
+++ b/src/sidebar/components/annotation-quote.js
@@ -12,6 +12,16 @@ import Excerpt from './excerpt';
 * Display the selected text from the document associated with an annotation.
 */
 function AnnotationQuote({ annotation, settings = {} }) {
+  // The language for the quote may be different than the client's UI (set by
+  // `<html lang="...">`).
+  //
+  // Use a blank string to indicate that it is unknown and it is up to the user
+  // agent to pick a default or analyze the content and guess.
+  //
+  // For web documents we could do better here and gather language information
+  // as part of the annotation anchoring process.
+  const documentLanguage = '';
+
  return (
    <section
      className={classnames(
@@ -27,6 +37,7 @@ function AnnotationQuote({ annotation, settings = {} }) {
        <blockquote
          className="annotation-quote__quote"
          dir="auto"
+          lang={documentLanguage}
          style={applyTheme(['selectionFontFamily'], settings)}
        >
          {quote(annotation)}

--- a/src/sidebar/components/markdown-view.js
+++ b/src/sidebar/components/markdown-view.js
@@ -20,10 +20,16 @@ export default function MarkdownView({ markdown = '', textClass = {} }) {
    replaceLinksWithEmbeds(content.current);
  }, [markdown]);

+  // Use a blank string to indicate that the content language is unknown and may be
+  // different than the client UI. The user agent may pick a default or analyze
+  // the content to guess.
+  const contentLanguage = '';
+
  return (
    <div
      className={classnames('markdown-view', textClass)}
      dir="auto"
+      lang={contentLanguage}
      ref={content}
      dangerouslySetInnerHTML={{ __html: html }}
    />

--- a/src/sidebar/components/tag-list.js
+++ b/src/sidebar/components/tag-list.js
@@ -32,6 +32,7 @@ function TagList({ annotation, serviceUrl, settings, tags }) {
            <a
              className="tag-list__link"
              href={createTagSearchURL(tag)}
+              lang=""
              target="_blank"
              rel="noopener noreferrer"
              aria-label={`Tag: ${tag}`}
@@ -41,7 +42,7 @@ function TagList({ annotation, serviceUrl, settings, tags }) {
            </a>
          )}
          {!renderLink && (
-            <span className="tag-list__text" aria-label={`Tag: ${tag}`}>
+            <span className="tag-list__text" aria-label={`Tag: ${tag}`} lang="">
              {tag}
            </span>
          )}