Include QW-ACT-R77

src/app/evaluation/lib/tests.ts

@@ -1123,6 +1123,30 @@ export default {
     dis: "43353",
     result: "fail",
   },
+  aria_09: {
+    type: "prop",
+    elem: "all",
+    test: "ariaControlsIdNotFound",
+    score: 1,
+    level: "A",
+    trust: "1",
+    ref: "in6db8",
+    scs: "",
+    dis: "43353",
+    result: "failed",
+  },
+  aria_10: {
+    type: "true",
+    elem: "all",
+    test: "ariaControlsIdFound",
+    score: 10,
+    level: "A",
+    trust: "1",
+    ref: "in6db8",
+    scs: "",
+    dis: "43353",
+    result: "passed",
+  },
   audio_video_01: {
     type: "true",
     elem: "all",

src/app/evaluation/lib/tests_colors.ts

@@ -25,6 +25,8 @@ export default {
   aria_06: "R",
   aria_07: "G",
   aria_08: "R",
+  aria_09: "R",
+  aria_10: "G",
   audio_video_01: "G",
   audio_video_02: "R",
   autocomplete_01: "G",

src/assets/i18n/English.json

@@ -289,6 +289,8 @@
     "ariaStNotPermitted": "Not allowed ARIA states and properties",
     "ariaAtribDefined": "Attributes aria-* defined",
     "ariaAtribNotDefined": "Attributes aria-* wrongly defined",
+    "ariaControlsIdNotFound": "Attribute <code>aria-controls</code> without the corresponding element",
+    "ariaControlsIdFound": "Attribute <code>aria-controls</code> with the corresponding element",
     "audioAvoidsAutoPlay": "<code>audio</code> and <code>video</code> elementos do not play automatically",
     "audioAutoPlay": "<code>audio</code> and <code>video</code> elementos that play automatically",
     "autoCmpltValid": "Valid autocomplete attribute",
@@ -736,6 +738,14 @@
       "s": "I found <mark>{{value}}</mark> aria-* attribute that is not defined in the ARIA specification.",
       "p": "I found <mark>{{value}}</mark> aria-* attributes that are not defined in the ARIA specification."
     },
+    "aria_09": {
+      "s": "I found <mark>{{value}}</mark> references of aria-controls attribute that do not exist in the page.",
+      "p": "I found <mark>{{value}}</mark> references of aria-controls attributes that do not exist in the page."
+    },
+    "aria_10": {
+      "s": "I found that <mark>all references</mark> of aria-controls attribute exist in the page.",
+      "p": "I found that <mark>all references</mark> of aria-controls attributes exist in the page."
+    },
     "audio_video_01": {
       "s": "I haven’t found <mark>any</mark> <code>&lt;audio&gt;</code> or <code>&lt;video&gt;</code> element that plays automatically.",
       "p": "I haven’t found <mark>any</mark> <code>&lt;audio&gt;</code> or <code>&lt;video&gt;</code> element that plays automatically."
@@ -1140,7 +1150,8 @@
     "9e45ec": "Word spacing in style attributes is not !important",
     "59br37": "Zoomed text node is not clipped with CSS <code>overflow</code>",
     "ARIA11": "Using ARIA landmarks to identify regions of a page",
-    "H40": "Using description lists"
+    "H40": "Using description lists",
+    "in6db8": "ARIA required ID references exist"
   },
   "TXT_TECHNIQUES": {
     "H37": "<p>Check if the alternative text equivalent found in the images provides equal information or function as the one performed by the image on the page.</p>",
@@ -1233,7 +1244,8 @@
     "9e45ec": "<p>A word spacing equal to or larger than 0.16 times the font size is important to ensure that all users are able to read the text. CSS styles should not prevent users from increasing the word spacing if they so desire.</p>",
     "59br37": "<p>When zooming on a page, the relative size of text and respective container might change, resulting in extra space being needed to present the same text. The CSS property <code>overflow</code> determines how the containers adjust when zooming. Some of its values might result in text clipping.</p>",
     "ARIA11": "<p>Ensure that there is only one main landmark in the page. Main landmarks designate the main content of the page and make it easy for screen reader users to quickly navigate to it. Each page should only have one main content, irrespectively of it being designated using HTML5 or ARIA.</p>",
-    "H40": "<p>If description lists contain non list item elements, or if the order of the list item elements is not appropriate, that is, <dt> elements should precede <dd> elements, the list will be incorrectly marked up, and assistive technologies will not be able to render it correctly.</p>"
+    "H40": "<p>If description lists contain non list item elements, or if the order of the list item elements is not appropriate, that is, <dt> elements should precede <dd> elements, the list will be incorrectly marked up, and assistive technologies will not be able to render it correctly.</p>",
+    "in6db8": "<p>Check that every ID reference required by WAI-ARIA exists.</p>"
   },
   "TECHFAIL": {
     "relationF": "This WCAG 2.1 failure is related to:",

src/assets/i18n/Portuguese.json

@@ -289,6 +289,8 @@
     "ariaStNotPermitted": "Valores de estados e propriedades ARIA não permitidos",
     "ariaAtribDefined": "Atributos aria-* definidos",
     "ariaAtribNotDefined": "Atributos aria-* mal definidos",
+    "ariaControlsIdNotFound": "Atributo <code>aria-controls</code> com valor que não corresponde a um <code>id</code> de um elemento",
+    "ariaControlsIdFound": "Atributo <code>aria-controls</code> com valor que corresponde a um <code>id</code> de um elemento",
     "audioAvoidsAutoPlay": "Elementos <code>audio</code> e <code>video</code> não tocam automaticamente",
     "audioAutoPlay": "Elementos <code>audio</code> e <code>video</code> tocam automaticamente",
     "autoCmpltValid": "Atributos autocomplete válidos",
@@ -736,6 +738,14 @@
       "s": "Encontrei <mark>{{value}}</mark> atributo aria-* que não está na especificação ARIA.",
       "p": "Encontrei <mark>{{value}}</mark> atributos aria-* que não estão na especificação ARIA."
     },
+    "aria_09": {
+      "s": "Encontrei <mark>{{value}}</mark> referência de um atributo aria-controls que não existe na página.",
+      "p": "Encontrei <mark>{{value}}</mark> referências de atributos aria-controls que não existem na página."
+    },
+    "aria_10": {
+      "s": "Constatei que <mark>a referência</mark> de um atributo aria-controls existe na página.",
+      "p": "Constatei que <mark>todas as referências</mark> de atributos aria-controls existem na página."
+    },
     "audio_video_01": {
       "s": "Não encontrei <mark>nenhum</mark> elemento <code>&lt;audio&gt;</code> ou <code>&lt;video&gt;</code> que iniciasse automaticamente.",
       "p": "Não encontrei <mark>nenhum</mark> elemento <code>&lt;audio&gt;</code> ou <code>&lt;video&gt;</code> que iniciasse automaticamente."
@@ -1140,7 +1150,8 @@
     "9e45ec": "Espaçamento de palavras nos atributos de estilo não é !important",
     "59br37": "Nó de texto ampliado não é cortado por CSS <code>overflow</code>",
     "ARIA11": "Usar landmarks ARIA para identificar regiões da página",
-    "H40": "Usar listas de descrição"
+    "H40": "Usar listas de descrição",
+    "in6db8": "Referências ARIA existem"
   },
   "TXT_TECHNIQUES": {
     "H37": "<p>Verifique se o equivalente alternativo em texto existente nas imagens serve informação ou função igual à desempenhada pela imagem na página.</p>",
@@ -1233,7 +1244,8 @@
     "9e45ec": "<p>Um espaçamento entre palavras igual ou superior a 0,16 vezes o tamanho da fonte é importante para garantir que todos os utilizadores conseguem ler o texto. Os estilos CSS não devem impedir que os utilizadores aumentem o espaçamento entre palavras se assim o entenderem.</p>",
     "59br37": "<p>Ao ampliar a página a dimensão relativa do texto e dos seus contentores pode mudar o que faz com que estes possam necessitar de mais espaço para apresentar o mesmo texto. A propriedade CSS <code>overflow</code> determina como os contentores se ajustam. Alguns dos seus valores podem resultar no texto ser cortado.</p>",
     "ARIA11": "<p>Garanta que só há um elemento com a semântica de main na página. Elementos com esta semântica designam a parte principal da página e permitem que utilizadores de leitor de ecrã naveguem rapidamente para essa parte da página. Cada página só deve ter um conteúdo principal, independentemente de ser especificado usando HTML5 ou ARIA.</p>",
-    "H40": "<p>Se uma lista de descrições conter elementos que não são itens da lista, ou se a ordem dos elementos não estiver correta, isto é, os elementos <dt> precederem os elementos <dd>, a lista estará mal formatada, e tecnologias de apoio não serão capazes de a apresentar corretamente.</p>"
+    "H40": "<p>Se uma lista de descrições conter elementos que não são itens da lista, ou se a ordem dos elementos não estiver correta, isto é, os elementos <dt> precederem os elementos <dd>, a lista estará mal formatada, e tecnologias de apoio não serão capazes de a apresentar corretamente.</p>",
+    "in6db8": "<p>Todas as referências obrigatórias a elementos indicadas num atributo WAI-ARIA têm de existir na página.</p>"
   },
   "TECHFAIL": {
     "relationF": "Esta falha WCAG 2.1 está relacionada com:",