chore: address linter issues

src/components/DataLoader.vue

@@ -10,9 +10,9 @@ const inputType = ref("blank");
 const testcaseUrl = ref("https://act-rules.github.io/testcases.json");
 const emit = defineEmits(["loaded"]);
 
-function reportIssue(e: any, message: string) {
+function reportIssue(e: unknown, message: string) {
   console.error(e);
-  statusText.value = `An error occurred processing the EARL report.`;
+  statusText.value = message;
 }
 
 async function loadData() {
@@ -46,28 +46,28 @@ async function loadData() {
 </script>
 
 <template>
-  <p aria-live="polite" v-show="statusText !== ''">
+  <p v-show="statusText !== ''" aria-live="polite">
     {{ statusText }}
   </p>
   <fieldset>
     <legend>Implementation Settings</legend>
     <label class="radio">
-      <input value="blank" v-model="inputType" type="radio" name="impl-type" />
+      <input v-model="inputType" value="blank" type="radio" name="impl-type" />
       Create a new implementation
     </label>
     <label class="radio">
-      <input value="text" v-model="inputType" type="radio" name="impl-type" />
+      <input v-model="inputType" value="text" type="radio" name="impl-type" />
       Include as text
     </label>
     <label class="radio">
-      <input value="url" v-model="inputType" type="radio" name="impl-type" />
+      <input v-model="inputType" value="url" type="radio" name="impl-type" />
       Load from URL
     </label>
   </fieldset>
 
   <label v-show="inputType === 'text'">
     Implementation Report
-    <textarea rows="6" v-model="reportText"></textarea>
+    <textarea v-model="reportText" rows="6"></textarea>
   </label>
   <label v-show="inputType === 'url'">
     Implementation Report URL

src/components/ImplementationTable.vue

@@ -34,7 +34,11 @@ const results = {
       </tr>
     </thead>
     <tbody>
-      <tr v-for="testCase in rule?.testCases" :id="testCase.testcaseId">
+      <tr
+        v-for="testCase in rule?.testCases"
+        :id="testCase.testcaseId"
+        :key="testCase.url"
+      >
         <th>
           <a :href="testCase.url" target="blank" title="Opens in a new window">
             {{ testCase.testcaseTitle }}
@@ -47,6 +51,7 @@ const results = {
           >
             <option
               v-for="(text, value) of results"
+              :key="value"
               :value="value"
               :selected="selected(testCase.url, value)"
               v-text="text"

src/components/RulesList.vue

@@ -15,7 +15,7 @@ function progressCount(ruleId: string): string {
   <ol>
     <li v-for="{ ruleId, ruleName } of rules" :key="ruleId">
       <router-link :to="`/generate/${ruleId}`">
-        <span v-text="ruleName" class="text" />
+        <span class="text" v-text="ruleName" />
         <span v-text="progressCount(ruleId)" />
       </router-link>
     </li>

src/logic/assert.ts

@@ -1,3 +1,4 @@
+/* eslint @typescript-eslint/no-explicit-any: 0 */
 import {
   EarlReport,
   EarlAssertion,

src/logic/getImplementation.ts

@@ -1,17 +1,10 @@
-import {
-  TestCasesJson,
-  ImplementationReport,
-  RuleImplementation,
-} from "../types";
+import { TestCasesJson, RuleImplementation } from "../types";
 
 export interface Implementation {
   rules: Record<string, RuleImplementation>;
 }
 
-export function getImplementation(
-  testCaseJson: TestCasesJson,
-  implementationReport: ImplementationReport
-): Implementation {
+export function getImplementation(testCaseJson: TestCasesJson): Implementation {
   const implementation: Implementation = {
     rules: {},
   };

src/stores/useMain.ts

@@ -75,8 +75,7 @@ export const useMainStore = defineStore("main", {
     async loadTestCases(testCaseUrl: string) {
       const content = await fetch(testCaseUrl);
       const jsonData = (await content.json()) as TestCasesJson;
-      const { rules } = getImplementation(jsonData, {});
-      // @ts-ignore // Vue being annoying
+      const { rules } = getImplementation(jsonData);
       this.rules = rules;
       this.loaded = true;
       this.testCases = jsonData.testcases;

src/types.ts

@@ -1,5 +1,3 @@
-export interface ImplementationReport {}
-
 export interface TestCasesJson {
   name: string;
   website: string;

src/views/Export.vue

@@ -19,9 +19,9 @@ function copyTextarea() {
   <label>
     JSON Results
     <textarea
-      v-text="getEarlReport()"
-      readonly
       :ref="(el) => (textarea = el)"
+      readonly
+      v-text="getEarlReport()"
     />
   </label>
   <button @click="copyTextarea">Copy to clipboard</button>

src/views/GenerateAssertion.vue

@@ -46,7 +46,10 @@ function countText() {
     <a :href="rule.rulePage" target="blank">rule page</a>.
   </p>
   <ul v-if="rule.ruleAccessibilityRequirements">
-    <li v-for="(requirement, key) in rule.ruleAccessibilityRequirements">
+    <li
+      v-for="(requirement, key) in rule.ruleAccessibilityRequirements"
+      :key="key"
+    >
       {{ requirementName(key, requirement) }}
     </li>
   </ul>
@@ -55,7 +58,7 @@ function countText() {
     Implementation Procedure
     <input :value="procedureName" @change="updateProcedure" />
   </label>
-  <ImplementationTable :ruleId="rule.ruleId" :procedureName="procedureName" />
+  <ImplementationTable :rule-id="rule.ruleId" :procedure-name="procedureName" />
   <p v-text="countText()" />
   <p><router-link to="/generate/">Back to rules list</router-link></p>
 </template>

src/views/Home.vue

@@ -2,8 +2,8 @@
   <h1>Implementation Generator</h1>
   <p>The Accessibility Conformance Test Implementation Generator</p>
   <p>
-    <router-link to="/generate"
-      >Start generating an ACT Implementation</router-link
-    >
+    <router-link to="/generate">
+      Start generating an ACT Implementation
+    </router-link>
   </p>
 </template>