Skip to content
This repository has been archived by the owner on Feb 22, 2023. It is now read-only.

Commit

Permalink
Merge pull request #23 from obulat/tabs_a11y
Browse files Browse the repository at this point in the history 
Make tabs accessible by keyboard
  • Loading branch information
@zackkrida
zackkrida authored Apr 12, 2021
2 parents e427aea + c868e1c commit 871b7e5
Show file tree
Hide file tree
Showing 2 changed files with 183 additions and 75 deletions.
131 changes: 93 additions & 38 deletions src/components/ImageDetails/CopyLicense.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,54 +3,52 @@
<h5 class="b-header margin-bottom-small">
{{ $t('photo-details.reuse.copy-license.title') }}
</h5>
<section class="tabs is-boxed">
<ul role="tablist">
<li
<section class="tabs-boxed">
<div
role="tablist"
:aria-label="$t('photo-details.reuse.copy-license.title')"
>
<button
id="rich"
role="tab"
:aria-selected="activeTab == 0"
aria-controls="tab-rich"
:class="tabClass(0, 'tab')"
@click.prevent="setActiveTab(0)"
@keyup.enter.prevent="setActiveTab(0)"
>
<a
class="is-size-6"
href="#panel0"
@click.prevent="setActiveTab(0)"
@keyup.enter.prevent="setActiveTab(0)"
>
{{ $t('photo-details.reuse.copy-license.rich') }}
</a>
</li>
<li
{{ $t('photo-details.reuse.copy-license.rich') }}
</button>
<button
id="html"
role="tab"
:aria-selected="activeTab == 1"
aria-controls="tab-html"
:class="tabClass(1, 'tab')"
@click.prevent="setActiveTab(1)"
@keyup.enter.prevent="setActiveTab(1)"
>
<a
class="is-size-6"
href="#panel1"
@click.prevent="setActiveTab(1)"
@keyup.enter.prevent="setActiveTab(1)"
>
{{ $t('photo-details.reuse.copy-license.html') }}
</a>
</li>
<li
{{ $t('photo-details.reuse.copy-license.html') }}
</button>
<button
id="text"
role="tab"
:aria-selected="activeTab == 2"
aria-controls="tab-text"
:class="tabClass(2, 'tab')"
@click.prevent="setActiveTab(2)"
@keyup.enter.prevent="setActiveTab(2)"
>
<a
class="is-size-6"
href="#panel2"
@click.prevent="setActiveTab(2)"
@keyup.enter.prevent="setActiveTab(2)"
>
{{ $t('photo-details.reuse.copy-license.plain') }}
</a>
</li>
</ul>
</section>
<section class="tabs-content is-boxed">
<div :class="tabClass(0, 'tabs-panel')">
{{ $t('photo-details.reuse.copy-license.plain') }}
</button>
</div>
<div
id="tab-rich"
aria-labelledby="rich"
role="tabpanel"
:class="tabClass(0, 'tabs-panel')"
tabindex="0"
>
<span
id="attribution"
ref="photoAttribution"
Expand Down Expand Up @@ -94,7 +92,13 @@
@copied="(e) => onCopyAttribution('Rich Text', e)"
/>
</div>
<div :class="tabClass(1, 'tabs-panel')">
<div
id="tab-html"
aria-labelledby="html"
role="tabpanel"
:class="tabClass(1, 'tabs-panel')"
tabindex="0"
>
<label for="attribution-html">
<textarea
id="attribution-html"
Expand All @@ -111,7 +115,13 @@
@copied="(e) => onCopyAttribution('HTML Embed', e)"
/>
</div>
<div :class="tabClass(2, 'tabs-panel')">
<div
id="tab-text"
aria-labelledby="text"
role="tabpanel"
:class="tabClass(2, 'tabs-panel')"
tabindex="0"
>
<p
id="attribution-text"
ref="photoAttribution"
Expand Down Expand Up @@ -207,6 +217,51 @@ export default {
<style lang="scss" scoped>
@import 'bulma/sass/utilities/_all.sass';
.tabs-boxed {
display: flex;
flex-direction: column;
}
.tabs-boxed .tabs-panel {
display: none;
padding: 1rem;
background-color: white;
border: 0.125rem solid #d8d8d8;
}
.tabs-boxed .tabs-panel.is-active {
display: block;
}
[role='tablist'] {
display: flex;
align-self: flex-start;
}
.tab {
appearance: none;
border-image-source: unset;
border-image-outset: unset;
border-image-repeat: unset;
font-weight: 700;
font-size: 1rem;
background-color: whitesmoke;
margin: 0 0 -0.125rem;
border: 2px solid #d8d8d8;
border-right: 0;
padding: 0.5rem 1rem;
position: relative;
&.is-active,
&:hover {
background-color: white;
border-bottom-color: transparent;
}
&:focus-visible {
box-shadow: 0 0 0 0.125rem #d8d8d8;
}
&:last-child {
border-right: 0.125rem solid #d8d8d8;
}
}
textarea {
border: none;
resize: none;
Expand Down
127 changes: 90 additions & 37 deletions src/components/ImageDetails/PhotoDetails.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -71,52 +71,51 @@
<span v-else>{{ image.creator }}</span>
</span>
</div>
<section class="tabs">
<ul role="tablist">
<li
<section class="tabs-lined">
<div role="tablist" :aria-label="$t('photo-details.aria.details')">
<button
id="reuse"
role="tab"
:aria-selected="activeTab == 0"
aria-controls="tab-reuse"
:aria-selected="activeTab === 0"
:class="tabClass(0, 'tab')"
@click.prevent="setActiveTab(0)"
@keyup.enter.prevent="setActiveTab(0)"
>
<a
href="#panel0"
@click.prevent="setActiveTab(0)"
@keyup.enter.prevent="setActiveTab(0)"
>
{{ $t('photo-details.reuse.title') }}
</a>
</li>
<li
{{ $t('photo-details.reuse.title') }}
</button>
<button
id="information"
role="tab"
:aria-selected="activeTab == 1"
aria-controls="tab-information"
:aria-selected="activeTab === 1"
:class="tabClass(1, 'tab')"
@click.prevent="setActiveTab(1)"
@keyup.enter.prevent="setActiveTab(1)"
>
<a
href="#panel1"
@click.prevent="setActiveTab(1)"
@keyup.enter.prevent="setActiveTab(1)"
>
{{ $t('photo-details.information.title') }}
</a>
</li>
<li
{{ $t('photo-details.information.title') }}
</button>
<button
v-if="socialSharingEnabled"
id="social-sharing"
role="tab"
aria-controls="tab-social-sharing"
:aria-selected="activeTab == 2"
:class="tabClass(2, 'a')"
@click.prevent="setActiveTab(2)"
@keyup.enter.prevent="setActiveTab(2)"
>
<a
href="#panel2"
@click.prevent="setActiveTab(2)"
@keyup.enter.prevent="setActiveTab(2)"
>
{{ $t('photo-details.share') }}
</a>
</li>
</ul>
</section>
<section class="photo_info-ctr tabs-content">
<div :class="tabClass(0, 'tabs-panel')">
{{ $t('photo-details.share') }}
</button>
</div>
<!-- <section class="photo_info-ctr tabs-content">-->
<div
id="tab-reuse"
role="tabpanel"
aria-labelledby="reuse"
tabindex="0"
:class="tabClass(0, 'tabs-panel')"
>
<ImageAttribution
data-testid="image-attribution"
:image="image"
Expand All @@ -125,7 +124,13 @@
:attribution-html="attributionHtml()"
/>
</div>
<div :class="tabClass(1, 'tabs-panel')">
<div
id="tab-information"
role="tabpanel"
aria-labelledby="information"
tabindex="0"
:class="tabClass(1, 'tabs-panel')"
>
<ImageInfo
data-testid="image-info"
:image="image"
Expand All @@ -136,7 +141,13 @@
:image-type="imageType"
/>
</div>
<div :class="tabClass(2, 'tabs-panel')">
<div
id="tab-social-sharing"
role="tabpanel"
aria-labelledby="social-sharing"
tabindex="0"
:class="tabClass(2, 'tabs-panel')"
>
<ImageSocialShare
v-if="socialSharingEnabled"
:image="image"
Expand Down Expand Up @@ -270,6 +281,48 @@ export default {
@import '~/styles/photodetails.scss';
@import 'bulma/sass/utilities/_all';
.tabs-lined {
display: flex;
flex-direction: column;
}
.tabs-lined .tabs-panel {
display: none;
padding: 2rem 0 0;
}
.tabs-lined .tabs-panel.is-active {
display: block;
}
[role='tablist'] {
display: flex;
border-bottom: 0.125rem solid #d8d8d8;
}
.tab {
appearance: none;
border-image-source: unset;
border-image-outset: unset;
border-image-repeat: unset;
font-weight: 700;
font-size: 1.25rem;
margin: 0 2rem -0.125rem 0;
padding: 0.5rem 0 1rem;
position: relative;
border-width: 0;
background: transparent;
border-bottom: 0.25rem solid transparent;
color: #333;
&:first-child {
padding-left: 0;
}
&.is-active,
&:hover {
border-bottom-color: #333;
}
&:focus-visible {
box-shadow: 0 0 0 0.125rem #d8d8d8;
}
}
@include touch {
.image-info {
margin-left: 0 !important;
Expand Down

0 comments on commit 871b7e5

Please sign in to comment.