diff --git a/packages/linter/src/index.ts b/packages/linter/src/index.ts index 6d0527af8..579d62233 100644 --- a/packages/linter/src/index.ts +++ b/packages/linter/src/index.ts @@ -20,6 +20,8 @@ import { SxgDumpSignedExchangeVerify } from "./rules/SxgDumpSignedExchangeVerify import { SxgAmppkgIsForwarded } from "./rules/SxgAmppkgIsForwarded"; import { MetadataIncludesOGImageSrc } from "./rules/MetadataIncludesOGImageSrc"; import { ImagesHaveAltText } from "./rules/ImagesHaveAltText"; +import { VideosHaveAltText } from "./rules/VideosHaveAltText"; +import { VideosAreSubtitled } from "./rules/VideosAreSubtitled"; import { IsValid } from "./rules/IsValid"; import { RuleConstructor } from "./rule"; import { isArray } from "util"; @@ -106,6 +108,8 @@ function testsForMode(type: LintMode) { StoryMetadataThumbnailsAreOk, MetadataIncludesOGImageSrc, ImagesHaveAltText, + VideosHaveAltText, + VideosAreSubtitled, ]) ); return tests.get(type) || []; diff --git a/packages/linter/src/rules/VideosAreSubtitled.ts b/packages/linter/src/rules/VideosAreSubtitled.ts new file mode 100644 index 000000000..de239b5c0 --- /dev/null +++ b/packages/linter/src/rules/VideosAreSubtitled.ts @@ -0,0 +1,21 @@ +import { Context } from "../index"; +import { Rule } from "../rule"; + +export class VideosAreSubtitled extends Rule { + run({ $ }: Context) { + const numOfSubtitleElems = $("track").length; + const numOfVideoElems = $("amp-video").length; + + //Are there any tags? If so, is there at least 1 ? + return numOfVideoElems > 0 && numOfSubtitleElems <= 0 + ? this.warn(`One or more videos are missing HMTL subtitles`) + : this.pass(); + } + meta() { + return { + url: "https://blog.amp.dev/2020/02/12/seo-for-amp-stories/", + title: "Videos are subtitled", + info: "", + }; + } +} diff --git a/packages/linter/src/rules/VideosHaveAltText.ts b/packages/linter/src/rules/VideosHaveAltText.ts new file mode 100644 index 000000000..b52fe13a9 --- /dev/null +++ b/packages/linter/src/rules/VideosHaveAltText.ts @@ -0,0 +1,25 @@ +import { Context } from "../index"; +import { Rule } from "../rule"; + +export class VideosHaveAltText extends Rule { + run({ $ }: Context) { + let vidsWithoutAlt = 0; + + $("amp-video").each(function (i, elem) { + if (!elem.attribs.title) { + vidsWithoutAlt += 1; + } + }); + + return vidsWithoutAlt > 0 + ? this.warn(`Missing alt text from ${vidsWithoutAlt} videos`) + : this.pass(); + } + meta() { + return { + url: "https://blog.amp.dev/2020/02/12/seo-for-amp-stories/", + title: "Videos contain alt text", + info: "", + }; + } +} diff --git a/packages/linter/tests/local.ts b/packages/linter/tests/local.ts index 5c9cb337a..fa184a5f1 100644 --- a/packages/linter/tests/local.ts +++ b/packages/linter/tests/local.ts @@ -6,6 +6,8 @@ import { SchemaMetadataIsNews } from "../src/rules/SchemaMetadataIsNews"; import { StoryRuntimeIsV1 } from "../src/rules/StoryRuntimeIsV1"; import { ImagesHaveAltText } from "../src/rules/ImagesHaveAltText"; import { MetadataIncludesOGImageSrc } from "../src/rules/MetadataIncludesOGImageSrc"; +import { VideosHaveAltText } from "../src/rules/VideosHaveAltText"; +import { VideosAreSubtitled } from "../src/rules/VideosAreSubtitled"; import { basename } from "path"; import { BookendExists } from "../src/rules/BookendExists"; @@ -130,5 +132,25 @@ assertWarn( runLocalTest(ImagesHaveAltText, "local/ImagesHaveAltText-2/source.html") ); +assertPass( + `${VideosHaveAltText.name} - All have alt text`, + runLocalTest(VideosHaveAltText, "local/VideosHaveAltText-1/source.html") +); + +assertWarn( + `${VideosHaveAltText.name} - At least one is missing alt text`, + runLocalTest(VideosHaveAltText, "local/VideosHaveAltText-2/source.html") +); + +assertPass( + `${VideosAreSubtitled.name} - All have subtitles`, + runLocalTest(VideosAreSubtitled, "local/VideosAreSubtitled-1/source.html") +); + +assertWarn( + `${VideosAreSubtitled.name} - One or more are missing subtitles`, + runLocalTest(VideosAreSubtitled, "local/VideosAreSubtitled-2/source.html") +); + console.log(`# ${basename(__filename)} - HTML-only tests`); -console.log(`1..20`); +console.log(`1..24`); diff --git a/packages/linter/tests/local/VideosAreSubtitled-1/source.html b/packages/linter/tests/local/VideosAreSubtitled-1/source.html new file mode 100644 index 000000000..06115b77b --- /dev/null +++ b/packages/linter/tests/local/VideosAreSubtitled-1/source.html @@ -0,0 +1,33 @@ + + + + + + + + + + Subtitle Test + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/packages/linter/tests/local/VideosAreSubtitled-2/source.html b/packages/linter/tests/local/VideosAreSubtitled-2/source.html new file mode 100644 index 000000000..3fe3c3e2b --- /dev/null +++ b/packages/linter/tests/local/VideosAreSubtitled-2/source.html @@ -0,0 +1,32 @@ + + + + + + + + + + Subtitle Test + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/packages/linter/tests/local/VideosHaveAltText-1/source.html b/packages/linter/tests/local/VideosHaveAltText-1/source.html new file mode 100644 index 000000000..7624b8d7c --- /dev/null +++ b/packages/linter/tests/local/VideosHaveAltText-1/source.html @@ -0,0 +1,33 @@ + + + + + + + + + + + Highway views + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/packages/linter/tests/local/VideosHaveAltText-2/source.html b/packages/linter/tests/local/VideosHaveAltText-2/source.html new file mode 100644 index 000000000..1f86577a8 --- /dev/null +++ b/packages/linter/tests/local/VideosHaveAltText-2/source.html @@ -0,0 +1,32 @@ + + + + + + + + + + Highway views + + + + + + + + + + + + + + + + + + + +