From 3b9df0e59bc05ce20648ca4ddfc9a583580e0c3b Mon Sep 17 00:00:00 2001
From: Henrik Askjer <henrik.askjer@uib.no>
Date: Mon, 20 Dec 2021 10:25:18 +0100
Subject: [PATCH] Individual main_content IDs
---
src/components/Article.vue | 3 ++-
src/components/Autocomplete.vue | 2 +-
src/components/Header.vue | 6 ++++--
src/components/SearchResults.vue | 3 +++
4 files changed, 10 insertions(+), 4 deletions(-)
diff --git a/src/components/Article.vue b/src/components/Article.vue
index 4d3058a7..ae9c00ac 100644
--- a/src/components/Article.vue
+++ b/src/components/Article.vue
@@ -1,6 +1,6 @@
<template>
<article v-bind:class="{'v-sheet v-card rounded-xl': !articleLookup, dictionary, 'collapsable': collapsable, 'collapsed': collapsed}" v-if="article">
- <Header :lemmas="article.lemmas" :dictionary="dictionary" :article_id="article.article_id" />
+ <Header :article_number="article_number" :lemmas="article.lemmas" :dictionary="dictionary" :article_id="article.article_id" />
<InflectionButton :lemmas="article.lemmas" :dictionary="dictionary" :article_id="article.article_id"/>
<div class="article_content" :class="$vuetify.breakpoint.name" v-if="!collapsed">
@@ -76,6 +76,7 @@ export default {
props: {
article: Object,
articleLookup: Boolean,
+ article_number: Number
},
data: function() {
diff --git a/src/components/Autocomplete.vue b/src/components/Autocomplete.vue
index 4c0314af..743eed3c 100644
--- a/src/components/Autocomplete.vue
+++ b/src/components/Autocomplete.vue
@@ -24,7 +24,7 @@
:dense="$vuetify.breakpoint.mobile"
>
<template v-slot:append>
- <a class="accessibility_link" href="#main_content">GÃ¥ videre til hovedinnholdet</a>
+ <a class="accessibility_link" href="#main_content_0">GÃ¥ videre til hovedinnholdet</a>
<a href="#top_menu" class="accessibility_link"
@click="$store.commit('toggle', 'menuOpen')"
diff --git a/src/components/Header.vue b/src/components/Header.vue
index cfe7997a..bb99f839 100644
--- a/src/components/Header.vue
+++ b/src/components/Header.vue
@@ -1,7 +1,8 @@
<!-- eslint-disable -->
<template>
<div class = "header">
- <router-link id="main_content" :to="$parent.link_to_self.ref" @click.native="$parent.details_click($parent.link_to_self)" class="article_header"><h2>{{header_text}}</h2>
+
+ <router-link tabindex="0" :id="'main_content_'+article_number" :to="$parent.link_to_self.ref" @click.native="$parent.details_click($parent.link_to_self)" class="article_header"><h2>{{header_text}}</h2>
<span :aria-label="hgno_arabic" class="hgno" v-if="$store.state.showHGNO">{{hgno}}</span></router-link>
<span class="dict-label">{{dict_label}}</span>
<h2 class="secondary_header" v-if="secondary_header_text.length">{{secondary_header_text}}</h2>
@@ -43,7 +44,8 @@ export default {
props: {
lemmas: Array,
dictionary: String,
- article_id: Number
+ article_id: Number,
+ article_number: Number
},
computed: {
header_text: function() {
diff --git a/src/components/SearchResults.vue b/src/components/SearchResults.vue
index 7851fada..33fdde92 100644
--- a/src/components/SearchResults.vue
+++ b/src/components/SearchResults.vue
@@ -8,6 +8,7 @@
<li class="article_container" v-for="(result, index) in both_dicts" :key="index + both_hash">
<Article
:article="result"
+ :article_number="index"
@article-click="article_link_click"
@details-click="details_click">
</Article>
@@ -17,6 +18,7 @@
<li class="article_container" v-for="(result, index) in results_bm" :key="index + bm_hash">
<Article
:article="result"
+ :article_number="index"
@article-click="article_link_click"
@details-click="details_click">
</Article>
@@ -26,6 +28,7 @@
<li class="article_container" v-for="(result, index) in results_nn" :key="index + nn_hash">
<Article
:article="result"
+ :article_number="index + count_bm"
@article-click="article_link_click"
@details-click="details_click"
:class="right_col_class_name">
--
GitLab