|
@@ -1,8 +1,17 @@
|
|
|
<template>
|
|
|
<div class="LearnEngage">
|
|
|
- <div class="ban" data-aria-viewport-area tabindex="0"
|
|
|
- aria-label :aria-description="`You've reached the banner area of the ${currentTabText} page; this section has one image; please use the tab key to go through the content.`"
|
|
|
- ></div>
|
|
|
+ <div class="banWrapper"
|
|
|
+ tabindex="0"
|
|
|
+ data-aria-viewport-area
|
|
|
+ aria-label
|
|
|
+ :aria-description="`You've reached the banner area of the ${currentTabText} page; this section has one image; please use the tab key to go through the content.`"
|
|
|
+ >
|
|
|
+ <div class="ban"
|
|
|
+ tabindex="0"
|
|
|
+ aria-label="Image"
|
|
|
+ :aria-description="currentTabText"
|
|
|
+ ></div>
|
|
|
+ </div>
|
|
|
<div class="nav_2" data-aria-viewport-area tabindex="0"
|
|
|
aria-label aria-description="You've reached the secondary menu of the Learn & Engage section; this menu has three options; please use the tab key to go through the menu."
|
|
|
>
|
|
@@ -12,6 +21,10 @@
|
|
|
v-for="(item, index) in topLi"
|
|
|
:key="index"
|
|
|
@click="skip(item.url)"
|
|
|
+ @keydown.enter.passive="skip(item.url)"
|
|
|
+ tabindex="0"
|
|
|
+ aria-label="Link"
|
|
|
+ :aria-description="item.name"
|
|
|
>
|
|
|
<img :src="`/data/LearnEngage/${index + 1}.png`" alt="" />
|
|
|
<p>{{ item.name }}</p>
|
|
@@ -22,12 +35,28 @@
|
|
|
<div class="pos" data-aria-viewport-area tabindex="0"
|
|
|
aria-label aria-description="You've reached the path area, please use the tab key to navigate through the content."
|
|
|
>
|
|
|
- <span class="pos1">Your Position: </span>
|
|
|
- <Router-link to="/Layout/Home">Home></Router-link>
|
|
|
- <Router-link to="/Layout/LearnEngage/Students"
|
|
|
- >Learn & Engage></Router-link
|
|
|
+ <span class="pos1" tabindex="0">Your Position: </span>
|
|
|
+ <Router-link
|
|
|
+ to="/Layout/Home"
|
|
|
+ tabindex="0"
|
|
|
+ aria-description="Home"
|
|
|
+ >
|
|
|
+ Home>
|
|
|
+ </Router-link>
|
|
|
+ <Router-link
|
|
|
+ to="/Layout/LearnEngage/Students"
|
|
|
+ tabindex="0"
|
|
|
+ aria-description="Learn & Engage"
|
|
|
+ >
|
|
|
+ Learn & Engage>
|
|
|
+ </Router-link>
|
|
|
+ <Router-link
|
|
|
+ to=""
|
|
|
+ tabindex="0"
|
|
|
+ :aria-description="currentTabText"
|
|
|
>
|
|
|
- <span>{{currentTabText}}</span>
|
|
|
+ {{currentTabText}}
|
|
|
+ </Router-link>
|
|
|
</div>
|
|
|
<!-- 内容 -->
|
|
|
<div class="conten" data-aria-viewport-area tabindex="0"
|
|
@@ -38,14 +67,19 @@
|
|
|
v-for="item in data[pageSize - 1]"
|
|
|
:key="item.id"
|
|
|
@click="toInfo(item.id)"
|
|
|
+ @keydown.enter.passive="toInfo(item.id)"
|
|
|
>
|
|
|
<div class="left">
|
|
|
- <h3>{{ item.h3 }}</h3>
|
|
|
- <p>{{ item.p }}</p>
|
|
|
- <h4 v-html="item.h4"></h4>
|
|
|
+ <h3 tabindex="0">{{ item.h3 }}</h3>
|
|
|
+ <p tabindex="0">{{ item.p }}</p>
|
|
|
+ <h4 v-html="item.h4" tabindex="0"></h4>
|
|
|
</div>
|
|
|
<div class="right">
|
|
|
- <img :src="`/data/LearnEngage/sm/${item.id}.png`" alt="" />
|
|
|
+ <img :src="`/data/LearnEngage/sm/${item.id}.png`"
|
|
|
+ :alt="item.h3"
|
|
|
+ tabindex="0"
|
|
|
+ :aria-description="item.h3"
|
|
|
+ />
|
|
|
</div>
|
|
|
</div>
|
|
|
<!-- 分页 -->
|
|
@@ -55,8 +89,13 @@
|
|
|
v-for="i in pageNum"
|
|
|
:key="i"
|
|
|
@click="pageChange(i)"
|
|
|
- >{{ i }}</span
|
|
|
+ @keydown.enter.passive="pageChange(i)"
|
|
|
+ tabindex="0"
|
|
|
+ aria-label="Link"
|
|
|
+ :aria-description="`page ${i}`"
|
|
|
>
|
|
|
+ {{ i }}
|
|
|
+ </span>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|