fix accessibility issues in demos and website (#861)

Author: xingsy97

samples/javascript/scoreboard/package.json

@@ -32,19 +32,14 @@
     "devDependencies": {
         "@types/compression": "^1.7.2",
         "@types/express": "^4.17.13",
+        "@types/webpack-env": "^1.18.0",
         "@types/ws": "^8.2.2",
         "@typescript-eslint/eslint-plugin": "^5.12.1",
         "@typescript-eslint/parser": "^5.12.1",
-        "@vue/cli-plugin-babel": "^5.0.4",
-        "@vue/cli-plugin-eslint": "^5.0.4",
-        "@vue/cli-plugin-typescript": "~5.0.4",
-        "@vue/cli-plugin-vuex": "~5.0.4",
-        "@vue/cli-service": "^5.0.4",
         "@vue/compiler-sfc": "^3.2.31",
         "@vue/eslint-config-prettier": "^6.0.0",
         "@vue/eslint-config-typescript": "^10.0.0",
         "@vue/runtime-dom": "^3.2.24",
-        "axios": "^0.24.0",
         "concurrently": "^7.2.1",
         "copy-webpack-plugin": "^11.0.0",
         "css-loader": "^6.5.1",
@@ -63,10 +58,8 @@
         "ts-loader": "^9.3.0",
         "ts-node": "^10.9.1",
         "typescript": "~4.5.5",
-        "vue": "^3.2.23",
         "vue-loader": "^16.8.3",
         "vue-router": "^4.0.12",
-        "vuex": "^4.0.2",
         "webpack": "^5.71.0",
         "webpack-cli": "^4.9.2",
         "webpack-dev-server": "^4.6.0",

samples/javascript/scoreboard/src/client/components/LiveMatches.vue

@@ -7,9 +7,9 @@
                   <span> &nbsp; </span>
                 </el-row>
                 <el-row justify="space-around" class="horizontal-center">
-                    <img class="thumbnail-image" :src="c.thumbnails[0].value" aria-label="thumbnail image"/>
+                    <img class="thumbnail-image" :src="c.thumbnails[0].value" :alt="`${c.teams[0]} thumbnail`" :aria-label="`${c.teams[0]} thumbnail`"/>
                     {{ c.scores[0] + ' : ' + c.scores[1] }}
-                    <img class="thumbnail-image" :src="c.thumbnails[1].value" aria-label="thumbnail image"/>
+                    <img class="thumbnail-image" :src="c.thumbnails[1].value" :alt="`${c.teams[1]} thumbnail`" :aria-label="`${c.teams[1]} thumbnail`"/>
                 </el-row>
             </el-card>
         </el-col>

samples/javascript/scoreboard/src/client/components/MatchDetails.vue

@@ -5,14 +5,14 @@
                 <el-tag type="danger" size="medium" class="live" effect="dark" color="#bc5151">● Live </el-tag>
             </el-col>
             <el-col :span="12" :offset="4" class="horizontal-center vertical-center">
-                <img class="title-logo" :src="titleLogo" aria-label="team logo image"/>
+                <img class="title-logo" :src="titleLogo" alt="World Q League logo" aria-label="World Q League logo"/>
                 <div class="title">World Q League</div>
             </el-col>
         </el-row>
         <el-divider></el-divider>
         <el-row class="scores horizontal-center">
             <el-col class="logo-col" :xs="8" :sm="8" :md="8" :lg="8" :xl="8">
-                <img :src="logoL" class="logo" aria-label="left side team logo image"/>
+                <img :src="logoL" class="logo" :alt="`${teams.teamL} logo`" :aria-label="`${teams.teamL} logo`"/>
             </el-col>
             <el-col :xs="8" :sm="8" :md="8" :lg="8" :xl="8">
                 <el-row class="vs-container" justify="space-around">
@@ -23,7 +23,7 @@
             </el-col>
             <el-col :xs="8" :sm="8" :md="8" :lg="8" :xl="8">
                 <div class="logo-col">
-                    <img :src="logoR" class="logo" aria-label="right side team logo image"/>
+                    <img :src="logoR" class="logo" :alt="`${teams.teamR} logo`" :aria-label="`${teams.teamR} logo`"/>
                 </div>
             </el-col>
         </el-row>
@@ -34,11 +34,22 @@
         </el-row>
         <el-row>
             <el-col :span="24">
-                <el-table :data="tableData" class="table" :header-cell-style="{ color: 'black' }" :cell-class-name="() => 'table-cell'">
-                    <el-table-column prop="quarter" label="" />
-                    <el-table-column prop="scoreL" :label="teams.teamL" />
-                    <el-table-column prop="scoreR" :label="teams.teamR" />
-                </el-table>
+                <table class="table" aria-label="Match details by quarter">
+                    <thead>
+                        <tr>
+                            <th scope="col">Quarter</th>
+                            <th scope="col">{{ teams.teamL }}</th>
+                            <th scope="col">{{ teams.teamR }}</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        <tr v-for="(row, index) in tableData" :key="index">
+                            <th scope="row">{{ row.quarter }}</th>
+                            <td>{{ row.scoreL }}</td>
+                            <td>{{ row.scoreR }}</td>
+                        </tr>
+                    </tbody>
+                </table>
             </el-col>
         </el-row>
     </el-card>
@@ -56,7 +67,7 @@ import { anime } from '@maybecode/vue-next-animejs'
 import 'element-plus/theme-chalk/display.css'
 
 const teams = ref(new MatchTeams('', ''))
-const tableData = ref([{}])
+const tableData = ref([] as Array<{ quarter: string; scoreL: number; scoreR: number }>)
 const scores = ref([0, 0] as [number, number])
 const logoL = ref('')
 const logoR = ref('')
@@ -145,5 +156,5 @@ function getQuarterText(index: number): string {
 }
 .vs-separator {
     color: rgb(241, 242, 246);
-}
+}
 </style>

samples/javascript/scoreboard/src/client/components/PastMatches.vue

@@ -8,7 +8,7 @@
                         <el-col :span="24">
                             <el-row class="match horizontal-center" v-for="(s, i) in c.scores" :key="i">
                                 <el-col :span="3">
-                                    <img class="thumbnail-image" :src="c.thumbnails[i].value" aria-label="thumbnail image"/>
+                                    <img class="thumbnail-image" :src="c.thumbnails[i].value" :alt="`${c.teams[i]} thumbnail`" :aria-label="`${c.teams[i]} thumbnail`"/>
                                 </el-col>
                                 <el-col class="horizontal-center" :span="2" :offset="1"> {{ c.teams[i] }} </el-col>
                                 <el-col class="horizontal-center" :offset="10" :span="1"> {{ s }}</el-col>

…client/public/images/thumbnails/JZer.png …client/public/images/thumbnails/Jzer.pngsamples/javascript/scoreboard/src/client/public/images/thumbnails/JZer.png renamed to samples/javascript/scoreboard/src/client/public/images/thumbnails/Jzer.png samples/javascript/scoreboard/src/client/public/images/thumbnails/JZer.png renamed to samples/javascript/scoreboard/src/client/public/images/thumbnails/Jzer.png

@@ -1,9 +1,10 @@
 <!DOCTYPE html>
-<html lang="">
+<html lang="en">
     <head>
         <meta charset="utf-8" />
         <meta http-equiv="X-UA-Compatible" content="IE=edge" />
         <meta name="viewport" content="width=device-width,initial-scale=1.0" />
+        <title>Real-time Scoreboard - Azure Web PubSub Demo</title>
     </head>
     <body>
         <noscript> </noscript>