├── src
    ├── scss
    │   ├── global
    │   │   ├── _a11y.scss
    │   │   ├── _boxmodel.scss
    │   │   ├── _headlines.scss
    │   │   ├── _settings.scss
    │   │   └── _fonts.scss
    │   ├── components
    │   │   ├── _content.scss
    │   │   ├── _top-bar.scss
    │   │   └── _dialog.scss
    │   ├── objects
    │   │   ├── _containers.scss
    │   │   ├── _link.scss
    │   │   ├── _button.scss
    │   │   └── _table.scss
    │   ├── base.scss
    │   └── utils
    │   │   └── _a11y.scss
    ├── views
    │   ├── About.vue
    │   ├── ProductListing.vue
    │   ├── Settings.vue
    │   └── Orders.vue
    ├── components
    │   ├── Logline.vue
    │   ├── Hint.vue
    │   ├── Logo.vue
    │   ├── UserActions.vue
    │   ├── ShoppingCartButton.vue
    │   ├── ProgressBar.vue
    │   ├── Navigation.vue
    │   ├── accessibleapp
    │   │   ├── AccessibleAppInfo.vue
    │   │   └── components
    │   │   │   └── SwitchButton.vue
    │   ├── AccountNavigationMenu.vue
    │   ├── Menu.vue
    │   ├── ProductTable.vue
    │   └── ShoppingCartMenu.vue
    ├── main.js
    ├── store.js
    ├── router.js
    └── App.vue
├── babel.config.js
├── public
    ├── favicon.ico
    └── index.html
├── vue.config.js
├── .gitignore
├── README.md
└── package.json


/src/scss/global/_a11y.scss:
--------------------------------------------------------------------------------
1 | 


--------------------------------------------------------------------------------
/babel.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   presets: [
3 |     '@vue/app'
4 |   ]
5 | }
6 | 


--------------------------------------------------------------------------------
/src/scss/components/_content.scss:
--------------------------------------------------------------------------------
1 | .c-content {
2 |   max-width: $width-max-content;
3 | }


--------------------------------------------------------------------------------
/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/accessible-app/vuejs/HEAD/public/favicon.ico


--------------------------------------------------------------------------------
/src/scss/global/_boxmodel.scss:
--------------------------------------------------------------------------------
1 | html,
2 | body {
3 |   margin: 0;
4 |   box-sizing: border-box;
5 | }


--------------------------------------------------------------------------------
/src/scss/objects/_containers.scss:
--------------------------------------------------------------------------------
1 | .o-layout-inner {
2 |   max-width: $width-max;
3 |   margin: auto;
4 |   padding: 0 1rem;
5 | }


--------------------------------------------------------------------------------
/src/scss/global/_headlines.scss:
--------------------------------------------------------------------------------
1 | h1,
2 | h2,
3 | h3,
4 | h4,
5 | h5,
6 | h6 {
7 |   margin-top: 0;
8 |   font-weight: normal;
9 | }


--------------------------------------------------------------------------------
/vue.config.js:
--------------------------------------------------------------------------------
 1 | module.exports = {
 2 |   lintOnSave: undefined,
 3 | 
 4 |   css: {
 5 |     loaderOptions: {
 6 |       sass: {
 7 |         data: '@import "@/scss/global/_settings.scss";'
 8 |       }
 9 |     }
10 |   }
11 | }
12 | 


--------------------------------------------------------------------------------
/src/views/About.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="about">
 3 |     <h1 ref="componentFocusTarget">This is an about page</h1>
 4 |   </div>
 5 | </template>
 6 | 
 7 | <script>
 8 | export default {
 9 |   name: "about"
10 | };
11 | </script>
12 | 
13 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | .DS_Store
 2 | node_modules
 3 | /dist
 4 | 
 5 | # local env files
 6 | .env.local
 7 | .env.*.local
 8 | 
 9 | # Log files
10 | npm-debug.log*
11 | yarn-debug.log*
12 | yarn-error.log*
13 | 
14 | # Editor directories and files
15 | .idea
16 | .vscode
17 | *.suo
18 | *.ntvs*
19 | *.njsproj
20 | *.sln
21 | *.sw*
22 | 


--------------------------------------------------------------------------------
/src/scss/global/_settings.scss:
--------------------------------------------------------------------------------
 1 | // Colors
 2 | $color-brand-primary: #2368a2;
 3 | $textcolor-brand-primary: #ffffff;
 4 | 
 5 | $brand-white: #ffffff;
 6 | 
 7 | $textcolor-content: #373a3c;
 8 | $textcolor-content-link: $color-brand-primary;
 9 | 
10 | // Dimensions
11 | $width-max: 62.5rem;
12 | $width-max-content: 65rem;
13 | 


--------------------------------------------------------------------------------
/src/scss/global/_fonts.scss:
--------------------------------------------------------------------------------
 1 | html {
 2 |   font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif;
 3 |   font-size: 16px;
 4 |   -ms-text-size-adjust: 100%;
 5 |   -webkit-text-size-adjust: 100%;
 6 |   -moz-osx-font-smoothing: grayscale;
 7 |   -webkit-font-smoothing: antialiased;
 8 | 
 9 |   @media (max-width: 37.5em) {
10 |     font-size: 14px;
11 |   }
12 | }


--------------------------------------------------------------------------------
/src/scss/base.scss:
--------------------------------------------------------------------------------
 1 | @import 'global/boxmodel';
 2 | @import 'global/headlines';
 3 | @import 'global/fonts';
 4 | @import 'global/a11y';
 5 | 
 6 | @import 'objects/containers';
 7 | @import 'objects/link';
 8 | @import 'objects/button';
 9 | @import 'objects/table';
10 | 
11 | @import 'components/top-bar';
12 | @import 'components/content';
13 | @import 'components/dialog';
14 | 
15 | @import 'utils/a11y';
16 | 


--------------------------------------------------------------------------------
/src/components/Logline.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="c-logline">The vue.js demo of accessible-app.com</div>
 3 | </template>
 4 | 
 5 | <script>
 6 | export default {
 7 |   name: "Logline"
 8 | };
 9 | </script>
10 | 
11 | <style lang="scss" scoped>
12 | .c-logline {
13 |   font-style: italic;
14 |   color: $color-brand-primary;
15 | 
16 |   @media (max-width: 37.5em) {
17 |     display: none;
18 |   }
19 | }
20 | </style>
21 | 


--------------------------------------------------------------------------------
/src/scss/objects/_link.scss:
--------------------------------------------------------------------------------
 1 | .o-link {
 2 | 
 3 |   &,
 4 |   &:active,
 5 |   &:visited {
 6 |     padding-bottom: 2px;
 7 |     text-decoration: underline;
 8 |     color: $textcolor-content-link;
 9 |     font-weight: 700;
10 |   }
11 | 
12 |   &:hover,
13 |   &:focus {
14 |     color: $textcolor-brand-primary;
15 |     box-shadow: inset 0 1.25em 0 0 $textcolor-content-link;
16 |     outline: 0;
17 |     text-decoration: none;
18 |   }
19 | }
20 | 


--------------------------------------------------------------------------------
/src/components/Hint.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="c-hint"><slot></slot></div>
 3 | </template>
 4 | 
 5 | <script>
 6 | export default {
 7 |   name: "Hint"
 8 | };
 9 | </script>
10 | 
11 | <style lang="scss" scoped>
12 | $bg-color: #fffcf3;
13 | $border-color: #fae29f;
14 | $border-color: #fae29f;
15 | 
16 | .c-hint {
17 |   border: 1px solid $border-color;
18 |   background-color: $bg-color;
19 |   padding: 1rem;
20 |   line-height: 1.6;
21 | }
22 | </style>
23 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # vuejs implentation of accessible-app.
 2 | 
 3 | **[FIND THE DEMO HERE](https://vuejs.accessible-app.com)**
 4 | 
 5 | ## Project setup
 6 | ```
 7 | npm install
 8 | ```
 9 | 
10 | ### Compiles and hot-reloads for development
11 | ```
12 | npm run serve
13 | ```
14 | 
15 | ### Compiles and minifies for production
16 | ```
17 | npm run build
18 | ```
19 | 
20 | ### Run your tests
21 | ```
22 | npm run test
23 | ```
24 | 
25 | ### Lints and fixes files
26 | ```
27 | npm run lint
28 | ```
29 | 
30 | ### Customize configuration
31 | See [Configuration Reference](https://cli.vuejs.org/config/).
32 | 


--------------------------------------------------------------------------------
/src/components/Logo.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <router-link to="/" class="c-logo">Accessibooks</router-link>
 3 | </template>
 4 | 
 5 | <script>
 6 | export default {
 7 |   name: "Logo"
 8 | };
 9 | </script>
10 | 
11 | <style lang="scss" scoped>
12 | .c-logo {
13 |   font-family: Georgia, Droid Serif, serif;
14 |   font-style: italic;
15 |   font-weight: 700;
16 |   font-size: 2.125rem;
17 |   color: inherit;
18 |   text-decoration: none;
19 |   margin-bottom: 1.25rem;
20 | 
21 |   &:hover,
22 |   &:focus {
23 |     text-decoration: underline;
24 |   }
25 | 
26 |   @media (max-width: 37.5em) {
27 |     margin: 1.25rem 0;
28 |   }
29 | }
30 | </style>
31 | 


--------------------------------------------------------------------------------
/src/main.js:
--------------------------------------------------------------------------------
 1 | import Vue from 'vue';
 2 | 
 3 | import App from './App.vue';
 4 | 
 5 | import store from './store';
 6 | import router from './router';
 7 | 
 8 | import A11yDialog from 'vue-a11y-dialog';
 9 | import PortalVue from 'portal-vue';
10 | import VueAnnouncer from 'vue-announcer'
11 | 
12 | Vue.use(VueAnnouncer);
13 | Vue.use(PortalVue);
14 | Vue.use(A11yDialog);
15 | 
16 | Vue.config.productionTip = false;
17 | 
18 | Vue.filter('toEUR', function (value) {
19 |   return "€ " + (value / 100).toLocaleString("de-DE", {minimumFractionDigits: 2});
20 | });
21 | 
22 | new Vue({
23 |   store,
24 |   router,
25 |   render: h => h(App)
26 | }).$mount('#app');


--------------------------------------------------------------------------------
/public/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="utf-8">
 5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 6 |     <meta name="viewport" content="width=device-width,initial-scale=1.0">
 7 |     <link rel="icon" href="<%= BASE_URL %>favicon.ico">
 8 |     <title>Accessibooks - Products</title>
 9 |   </head>
10 |   <body>
11 |     <noscript>
12 |       <strong>We're sorry but vue-app doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
13 |     </noscript>
14 |     <div id="app"></div>
15 |     <!-- built files will be auto injected -->
16 |   </body>
17 | </html>
18 | 


--------------------------------------------------------------------------------
/src/views/ProductListing.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="home">
 3 |     <h1 ref="componentFocusTarget">
 4 |       The place for great books on web accessibility
 5 |     </h1>
 6 |     <p>Following books are available:</p>
 7 |     <product-table />
 8 |   </div>
 9 | </template>
10 | 
11 | <script>
12 | import ProductTable from "../components/ProductTable";
13 | 
14 | export default {
15 |   name: "home",
16 |   components: { ProductTable },
17 |   methods: {
18 |     assignDialogRef(dialog) {
19 |       this.dialog = dialog;
20 |     },
21 |     openDialog() {
22 |       if (this.dialog) {
23 |         this.dialog.show();
24 |       }
25 |     }
26 |   }
27 | };
28 | </script>
29 | 


--------------------------------------------------------------------------------
/src/views/Settings.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="about">
 3 |     <h1 ref="componentFocusTarget">My settings</h1>
 4 | 
 5 |     <label
 6 |       ><input
 7 |         type="checkbox"
 8 |         v-model="reducedMotion"
 9 |         @change="toggleReducedMotion"
10 |       />
11 |       Disable animations</label
12 |     >
13 |   </div>
14 | </template>
15 | 
16 | <script>
17 | import store from "../store";
18 | 
19 | export default {
20 |   computed: {
21 |     reducedMotion: function () {
22 |       return store.getters.getReducedMotion;
23 |     }
24 |   },
25 |   name: "settings",
26 |   methods: {
27 |     toggleReducedMotion() {
28 |       store.commit("toggleReducedMotion");
29 |     }
30 |   }
31 | };
32 | </script>
33 | 


--------------------------------------------------------------------------------
/src/components/UserActions.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="c-user-actions">
 3 |     <shopping-cart-menu />
 4 |     <account-menu />
 5 |   </div>
 6 | </template>
 7 | 
 8 | <script>
 9 | import AccountMenu from "../components/AccountNavigationMenu";
10 | import ShoppingCartMenu from "../components/ShoppingCartMenu";
11 | 
12 | export default {
13 |   name: "UserActions",
14 |   components: { AccountMenu, ShoppingCartMenu },
15 |   methods: {
16 |     assignDialogRef(dialog) {
17 |       this.dialog = dialog;
18 |     },
19 | 
20 |     openDialog() {
21 |       if (this.dialog) {
22 |         this.dialog.show();
23 |       }
24 |     }
25 |   }
26 | };
27 | </script>
28 | 
29 | <style scoped>
30 | .c-user-actions {
31 |   display: flex;
32 | }
33 | .c-user-actions > * {
34 |   margin-right: 20px;
35 | }
36 | </style>
37 | 


--------------------------------------------------------------------------------
/src/scss/components/_top-bar.scss:
--------------------------------------------------------------------------------
 1 | .c-top-bar {
 2 |   background-color: $color-brand-primary;
 3 |   color: $textcolor-brand-primary;
 4 |   height: 6.75rem;
 5 | 
 6 |   @media (max-width: 37.5em) {
 7 |     height: auto;
 8 |   }
 9 | 
10 |   &__wrapper {
11 |     display: flex;
12 |     justify-content: space-between;
13 |     align-items: flex-end;
14 |     height: inherit;
15 |   }
16 | 
17 |   &__footer {
18 |     display: flex;
19 |     justify-content: space-between;
20 |     align-items: center;
21 |     height: 5rem;
22 |     margin-bottom: 1rem;
23 | 
24 |     @media (max-width: 37.5em) {
25 |       margin-bottom: 0;
26 |     }
27 |   }
28 | 
29 |   &__wrapper,
30 |   &__footer {
31 |     @media (max-width: 37.5em) {
32 |       flex-direction: column;
33 |       justify-content: center;
34 |       align-items: flex-start;
35 |     }
36 |   }
37 | }
38 | 


--------------------------------------------------------------------------------
/src/scss/utils/_a11y.scss:
--------------------------------------------------------------------------------
 1 | .u-visually-hidden {
 2 |   clip: rect(1px 1px 1px 1px);
 3 |   clip: rect(1px, 1px, 1px, 1px);
 4 |   height: 1px;
 5 |   overflow: hidden;
 6 |   position: absolute;
 7 |   white-space: nowrap;
 8 |   width: 1px;
 9 | }
10 | 
11 | .u-button-link-look {
12 |   border: none;
13 |   -webkit-appearance: none;
14 |   background: transparent;
15 |   padding: 0;
16 |   font-size: inherit;
17 |   font-family: inherit;
18 |   cursor: pointer;
19 | 
20 |   &:focus {
21 |     outline: 0;
22 |   }
23 | }
24 | 
25 | [tabindex="-1"]:focus {
26 |   outline: none;
27 | }
28 | 
29 | @media (prefers-reduced-motion: reduce) {
30 | 
31 |   * {
32 |     animation: none !important;
33 |     -webkit-animation: none !important;
34 |   }
35 | }
36 | 
37 | .user-prefers-reduced-motion-reduce {
38 | 
39 |   * {
40 |     animation: none !important;
41 |     -webkit-animation: none !important;
42 |   }
43 | }
44 | 


--------------------------------------------------------------------------------
/src/components/ShoppingCartButton.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <button
 3 |     class="o-button o-button--secondary"
 4 |     @click="toggleShoppingCartState(product)"
 5 |   >
 6 |     {{ label }}
 7 |   </button>
 8 | </template>
 9 | 
10 | <script>
11 | import store from "../store";
12 | 
13 | export default {
14 |   computed: {
15 |     label: function() {
16 |       return store.getters.getProductIsInShoppingCart(this.product)
17 |         ? "Remove from cart"
18 |         : "Add to cart";
19 |     }
20 |   },
21 |   props: ["product"],
22 |   methods: {
23 |     toggleShoppingCartState: function(product) {
24 |       store.commit("toggleShoppingCartState", product);
25 | 
26 |       let message = store.getters.getProductIsInShoppingCart(this.product)
27 |           ? `${product.title} has been added to your cart`
28 |           : `${product.title} has been removed from your cart`;
29 | 
30 |       this.$announcer.set(message);
31 |     }
32 |   }
33 | };
34 | </script>
35 | 


--------------------------------------------------------------------------------
/src/components/ProgressBar.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |     <progress
 3 |             :value="value"
 4 |             :max="max"
 5 |             :aria-valuemax="max"
 6 |             :aria-valuenow="value"
 7 |             aria-busy="true"
 8 |             aria-valuemin="0"
 9 |             class="uk-progress oc-progress"
10 |             tabindex="-1"
11 |             role="progressbar"
12 |     />
13 | </template>
14 | 
15 | <script>
16 |     export default {
17 |         data() {
18 |             return {
19 |                 currentValue: 0,
20 |             }
21 |         },
22 |         props: {
23 |             min: {
24 |                 type: Number,
25 |                 default: 0
26 |             },
27 |             max: {
28 |                 type: Number,
29 |                 default: 100
30 |             },
31 |             value: {
32 |                 type: Number,
33 |                 required: true
34 |             }
35 |         }
36 |     };
37 | </script>
38 | 
39 | <style scoped>
40 |     progress {
41 |         display: block;
42 |     }
43 | </style>
44 | 


--------------------------------------------------------------------------------
/src/scss/objects/_button.scss:
--------------------------------------------------------------------------------
 1 | .o-button,
 2 | [data-vue-details-summmary],
 3 | [data-vue-menu-button] {
 4 |   -webkit-appearance: none;
 5 |   background: transparent;
 6 |   font-size: inherit;
 7 |   font-family: inherit;
 8 |   border-radius: 4px;
 9 |   padding: .5rem .75rem;
10 |   border: 1px solid $color-brand-primary;
11 |   color: $color-brand-primary;
12 |   opacity: 1;
13 |   transition: opacity .2s;
14 | 
15 |   &[disabled] {
16 |     opacity: .33;
17 |   }
18 | 
19 |   &:not([disabled]):hover,
20 |   &:not([disabled]):focus {
21 |     color: $textcolor-brand-primary;
22 |     background-color: $color-brand-primary;
23 |     outline: 0;
24 |   }
25 | 
26 |   & + & {
27 |     margin-left: 1rem;
28 |   }
29 | }
30 | 
31 | .o-button--secondary {
32 |   font-size: .75rem;
33 |   padding: .33rem;
34 |   min-width: 9rem;
35 |   margin-right: 1rem;
36 |   margin-bottom: .5rem;
37 | 
38 |   & + & {
39 |     margin: 0 .5rem 0 0;
40 |   }
41 | }
42 | 
43 | .o-button--bare {
44 |   padding: .25rem .5rem;
45 |   color: $color-brand-primary;
46 |   display: inline-flex;
47 | 
48 |   &:focus,
49 |   &:hover {
50 |     color: #ffffff;
51 |   }
52 | }
53 | 
54 | 


--------------------------------------------------------------------------------
/src/scss/objects/_table.scss:
--------------------------------------------------------------------------------
 1 | .o-table {
 2 |   overflow-y: auto;
 3 |   width: 100%;
 4 |   background-image: linear-gradient(to right, white, white), linear-gradient(to right, white, white), linear-gradient(to right, rgba(0, 0, 20, .25), rgba(255, 255, 255, 0)), linear-gradient(to left, rgba(0, 0, 20, .25), rgba(255, 255, 255, 0));
 5 |   background-position: left center, right center, left center, right center;
 6 |   background-repeat: no-repeat;
 7 |   background-color: white;
 8 |   background-size: 25px 100%, 25px 100%, 12px 100%, 12px 100%;
 9 |   background-attachment: local, local, scroll, scroll;
10 | 
11 |   &__table {
12 |     border: 2px solid rgba(235, 235, 235, 0.99);
13 |     border-collapse: collapse;
14 |     width: 100%;
15 |   }
16 | 
17 |   &::-webkit-scrollbar {
18 |     -webkit-appearance: none;
19 |     width: 14px;
20 |     height: 14px;
21 |   }
22 | 
23 |   &::-webkit-scrollbar-thumb {
24 |     border-radius: 8px;
25 |     border: 3px solid #fff;
26 |     background-color: rgba(0, 0, 0, .3);
27 |   }
28 | 
29 |   &__cell--data,
30 |   &__cell--header {
31 |     text-align: left;
32 |     padding: .75rem;
33 |   }
34 | 
35 |   &__cell--price {
36 |     text-align: right;
37 |   }
38 | 
39 |   &__cell--header {
40 |     padding-right: 2rem;
41 |     background-color: rgba(235, 235, 235, 0.99);
42 |   }
43 | }


--------------------------------------------------------------------------------
/src/store.js:
--------------------------------------------------------------------------------
 1 | import Vue from "vue";
 2 | import Vuex from "vuex";
 3 | 
 4 | Vue.use(Vuex);
 5 | 
 6 | const store = new Vuex.Store({
 7 |   state: {
 8 |     enhancedFocus: false,
 9 |     reducedMotion: false,
10 |     shoppingCartItems: []
11 |   },
12 |   mutations: {
13 |     toggleEnhancedFocus(state) {
14 |       state.enhancedFocus = !state.enhancedFocus;
15 |     },
16 |     toggleReducedMotion(state) {
17 |       state.reducedMotion = !state.reducedMotion;
18 |     },
19 |     toggleShoppingCartState(state, product) {
20 |       if (state.shoppingCartItems.includes(product)) {
21 |         // Remove from shopping cart
22 |         state.shoppingCartItems = state.shoppingCartItems.filter(
23 |           item => item !== product
24 |         );
25 |       } else {
26 |         // Add to shopping cart
27 |         state.shoppingCartItems.push(product);
28 |       }
29 |     },
30 |     removeAllShoppingCartItems(state) {
31 |       state.shoppingCartItems = [];
32 |     }
33 |   },
34 |   getters: {
35 |     getEnhancedFocus: state => {
36 |       return state.enhancedFocus;
37 |     },
38 |     getReducedMotion: state => {
39 |       return state.reducedMotion;
40 |     },
41 |     getProductIsInShoppingCart: (state) => (product) => {
42 |       return state.shoppingCartItems.includes(product);
43 |     },
44 |     shoppingCartItems: state => {
45 |       return state.shoppingCartItems;
46 |     }
47 |   }
48 | });
49 | 
50 | export default store;
51 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "vue-app",
 3 |   "version": "0.1.0",
 4 |   "private": true,
 5 |   "scripts": {
 6 |     "dev": "vue-cli-service serve",
 7 |     "serve": "vue-cli-service serve",
 8 |     "build": "vue-cli-service build",
 9 |     "lint": "vue-cli-service lint"
10 |   },
11 |   "dependencies": {
12 |     "details-element-polyfill": "^2.3.0",
13 |     "portal-vue": "^1.5.0",
14 |     "vue": "^2.5.17",
15 |     "vue-a11y-dialog": "^0.3.1",
16 |     "vue-announcer": "^1.0.4",
17 |     "vue-router": "^3.0.1",
18 |     "vuex": "^3.0.1"
19 |   },
20 |   "devDependencies": {
21 |     "@vue/cli-plugin-babel": "^3.2.0",
22 |     "@vue/cli-plugin-eslint": "^3.2.0",
23 |     "@vue/cli-service": "^4.1.2",
24 |     "babel-eslint": "^10.0.1",
25 |     "eslint": "^5.8.0",
26 |     "eslint-plugin-vue": "^5.0.0-0",
27 |     "node-sass": "^4.11.0",
28 |     "sass-loader": "^7.1.0",
29 |     "vue-cli-plugin-scss-base": "^0.1.10",
30 |     "vue-template-compiler": "^2.5.17"
31 |   },
32 |   "eslintConfig": {
33 |     "root": true,
34 |     "env": {
35 |       "node": true
36 |     },
37 |     "extends": [
38 |       "plugin:vue/essential",
39 |       "eslint:recommended"
40 |     ],
41 |     "parserOptions": {
42 |       "parser": "babel-eslint"
43 |     }
44 |   },
45 |   "postcss": {
46 |     "plugins": {
47 |       "autoprefixer": {}
48 |     }
49 |   },
50 |   "browserslist": [
51 |     "> 1%",
52 |     "last 2 versions",
53 |     "not ie <= 8"
54 |   ]
55 | }
56 | 


--------------------------------------------------------------------------------
/src/components/Navigation.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <nav aria-labelledby="main-nav-title">
 3 |     <h2 class="u-visually-hidden" id="main-nav-title">Main Menu</h2>
 4 |     <ul class="c-nav-main">
 5 |       <li><router-link to="/">Products</router-link></li>
 6 |       <li><router-link to="/about">About</router-link></li>
 7 |     </ul>
 8 |   </nav>
 9 | </template>
10 | 
11 | <script>
12 | export default {
13 |   name: "Navigation"
14 | };
15 | </script>
16 | 
17 | <style lang="scss" scoped>
18 | .c-nav-main {
19 |   font-size: 1.125rem;
20 |   list-style: none;
21 |   display: flex;
22 |   margin: 0;
23 |   padding: 0;
24 | 
25 |   li {
26 |     margin: 0 1rem;
27 | 
28 |     &:first-child {
29 |       margin-left: 0;
30 |     }
31 | 
32 |     &:last-child {
33 |       margin-right: 0;
34 |     }
35 | 
36 |     // See: https://unfetteredthoughts.net/2017/09/26/voiceover-and-list-style-type-none/
37 |     &:before {
38 |       content: "\200B"; /* add zero-width space */
39 |     }
40 |   }
41 | 
42 |   a {
43 |     display: inline-block;
44 |     text-decoration: none;
45 |     color: $textcolor-brand-primary;
46 |     padding-bottom: 1.5625rem;
47 | 
48 |     @media (max-width: 37.5em) {
49 |       padding-bottom: 1rem;
50 |     }
51 | 
52 |     &:focus {
53 |       text-decoration: underline;
54 |       outline: 0;
55 |     }
56 |   }
57 | 
58 |   [aria-current] {
59 |     font-weight: 700;
60 |     border-bottom: 0.5rem solid $textcolor-brand-primary;
61 |   }
62 | }
63 | </style>
64 | 


--------------------------------------------------------------------------------
/src/components/accessibleapp/AccessibleAppInfo.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <aside aria-labelledby="c-a11yapp__title" class="c-a11yapp">
 3 |     <h2 id="c-a11yapp__title" class="c-a11yapp__title">Accessible App Debugging</h2>
 4 |     <switch-button class="c-a11yapp__switch" @click="toggleFocusIndicator">
 5 |       Show red focus indicator on everything, even non-interactive
 6 |       elements</switch-button
 7 |     >
 8 |   </aside>
 9 | </template>
10 | 
11 | <script>
12 | import store from "../../store";
13 | import SwitchButton from "./components/SwitchButton.vue";
14 | 
15 | export default {
16 |   name: "AccessibleAppInfo",
17 |   components: {
18 |     SwitchButton
19 |   },
20 |   store,
21 |   methods: {
22 |     toggleFocusIndicator: function() {
23 |       store.commit("toggleEnhancedFocus");
24 |     }
25 |   }
26 | };
27 | </script>
28 | 
29 | <style lang="scss">
30 | .c-a11yapp {
31 |   position: fixed;
32 |   bottom: 0;
33 |   right: 0;
34 |   font-size: .875rem;
35 |   background-color: #c7c7c7;
36 |   border: 2px solid dimgrey;
37 |   padding: .5em;
38 |   margin: 1rem;
39 | 
40 |   &__title {
41 |     font-weight: 700;
42 |     margin-bottom: 0;
43 |   }
44 | 
45 |   &__switch {
46 |     button[role="switch"] {
47 |       margin-left: .5rem;
48 |       background: transparent;
49 |       padding: 0.1rem;
50 |       border-width: 2px;
51 |     }
52 |   }
53 | 
54 |   &--enhanced-focus *:focus {
55 |     outline: 2px solid red !important;
56 |   }
57 | }
58 | 
59 | </style>
60 | 


--------------------------------------------------------------------------------
/src/components/AccountNavigationMenu.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <vue-menu>
 3 |     <template slot="button"
 4 |       >Account
 5 |     </template>
 6 |     <template slot="content">
 7 |       <ul data-vue-summary-list>
 8 |         <li>
 9 |           <router-link data-menu-item to="/orders"
10 |             >Past Orders</router-link
11 |           >
12 |         </li>
13 |         <li>
14 |           <router-link data-menu-item to="/settings"
15 |             >My Settings</router-link
16 |           >
17 |         </li>
18 |       </ul>
19 |     </template>
20 |   </vue-menu>
21 | </template>
22 | 
23 | <script>
24 | import VueMenu from "./Menu";
25 | 
26 | export default {
27 |   components: {
28 |     VueMenu
29 |   }
30 | };
31 | </script>
32 | 
33 | <style>
34 | [data-vue-summary-list] {
35 |   list-style: none;
36 |   margin: 0;
37 |   padding: 0;
38 | }
39 | 
40 | [data-menu-item] {
41 |   color: inherit;
42 |   text-decoration: none;
43 |   line-height: 28px;
44 |   height: 28px;
45 |   cursor: pointer;
46 |   padding: 0 10px;
47 |   display: block;
48 | }
49 | 
50 | [data-menu-item]:focus {
51 |   outline: 0;
52 |   background-color: #2368a2;
53 |   color: #fff;
54 |   display: block;
55 | }
56 | 
57 | [data-menu-item]:hover {
58 |   outline: 0;
59 |   background-color: #2368a2;
60 |   color: #fff;
61 |   display: block;
62 | }
63 | 
64 | [aria-current] {
65 |   font-weight: 700;
66 | }
67 | 
68 | /*[tabindex="-1"]:focus,*/
69 | /**::-moz-focus-inner {*/
70 | /*border: 0;*/
71 | /*}*/
72 | /**/
73 | </style>
74 | 


--------------------------------------------------------------------------------
/src/router.js:
--------------------------------------------------------------------------------
 1 | import Vue from "vue";
 2 | import Router from "vue-router";
 3 | import ProductListing from "./views/ProductListing.vue";
 4 | 
 5 | Vue.use(Router);
 6 | 
 7 | export default new Router({
 8 |   routes: [
 9 |     {
10 |       path: "/",
11 |       name: "home",
12 |       component: ProductListing,
13 |       meta: { title: "Accessibooks - Products" }
14 |     },
15 |     {
16 |       path: "/about",
17 |       name: "about",
18 |       // route level code-splitting
19 |       // this generates a separate chunk (about.[hash].js) for this route
20 |       // which is lazy-loaded when the route is visited.
21 |       component: () =>
22 |         import(/* webpackChunkName: "about" */ "./views/About.vue"),
23 |       meta: { title: "Accessibooks - About us" }
24 |     },
25 |     {
26 |       path: "/settings",
27 |       name: "settings",
28 |       // route level code-splitting
29 |       // this generates a separate chunk (about.[hash].js) for this route
30 |       // which is lazy-loaded when the route is visited.
31 |       component: () =>
32 |           import(/* webpackChunkName: "about" */ "./views/Settings.vue"),
33 |       meta: { title: "Accessibooks - My Settings" }
34 |     },
35 |     {
36 |       path: "/orders",
37 |       name: "orders",
38 |       // route level code-splitting
39 |       // this generates a separate chunk (about.[hash].js) for this route
40 |       // which is lazy-loaded when the route is visited.
41 |       component: () =>
42 |           import(/* webpackChunkName: "about" */ "./views/Orders.vue"),
43 |       meta: { title: "Accessibooks - My past orders" }
44 |     }
45 |   ]
46 | });
47 | 


--------------------------------------------------------------------------------
/src/components/accessibleapp/components/SwitchButton.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |     <div>
 3 |         <span :id="id"> <slot></slot> </span>
 4 |         <button
 5 |                 role="switch"
 6 |                 :aria-checked="isChecked.toString()"
 7 |                 :aria-labelledby="id"
 8 |                 @click="toggle"
 9 |         >
10 |             <span>{{ onLabel }}</span> <span>{{ offLabel }}</span>
11 |         </button>
12 |     </div>
13 | </template>
14 | 
15 | <script>
16 |     export default {
17 |         data: function() {
18 |             return {
19 |                 id: null,
20 |                 isChecked: this.value
21 |             };
22 |         },
23 |         props: {
24 |             value: {
25 |                 type: Boolean,
26 |                 default: false
27 |             },
28 |             onLabel: {
29 |                 type: String,
30 |                 default: "on"
31 |             },
32 |             offLabel: {
33 |                 type: String,
34 |                 default: "off"
35 |             }
36 |         },
37 |         methods: {
38 |             toggle() {
39 |                 this.$emit("click", !this.isChecked);
40 |                 this.isChecked = !this.isChecked;
41 |             }
42 |         },
43 |         mounted() {
44 |             this.id = Math.random()
45 |                 .toString(36)
46 |                 .substring(2, 15);
47 |         }
48 |     };
49 | </script>
50 | 
51 | <style scoped>
52 |     button {
53 |         padding: 0.25rem 0.5rem;
54 |         border: 0.25rem solid;
55 |         border-radius: 0.25rem;
56 |         font: inherit;
57 |     }
58 | 
59 |     [aria-checked] span {
60 |         font-size: 0.75rem;
61 |         font-weight: bold;
62 |         display: inline-block;
63 |         border-radius: 0.25rem;
64 |         padding: 0.25rem;
65 |     }
66 | 
67 |     [aria-checked="true"] :first-child,
68 |     [aria-checked="false"] :last-child {
69 |         background-color: #000;
70 |         border: 2px solid transparent;
71 |         color: #fff;
72 |     }
73 | </style>
74 | 


--------------------------------------------------------------------------------
/src/views/Orders.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="about">
 3 |     <h1 ref="componentFocusTarget">This is the orders page</h1>
 4 |     <p>
 5 |       Lorem Ipsum is simply dummy text of the printing and typesetting industry.
 6 |       It has been the industry's standard dummy text ever since the 1500s, when
 7 |       an unknown printer took a galley of type and scrambled it to make a type
 8 |       specimen book. It has survived not only five centuries, but also the leap
 9 |       into electronic typesetting, remaining essentially unchanged. It was
10 |       popularised in the 1960s with the release of Letraset sheets containing
11 |       Lorem Ipsum passages, and more recently with desktop publishing software
12 |       like Aldus PageMaker including versions of Lorem Ipsum.
13 |     </p>
14 |     <button class="o-button o-button--bare" @click="startFakeQueryForOrders" v-if="!queryComplete && !isLoading">
15 |       Click here to query our database for your past orders
16 |     </button>
17 |     <div v-if="isLoading">
18 |       <label for="loading-progress">Loading progress:</label>
19 |       <ProgressBar ref="progressbar" id="loading-progress" :value="value" />
20 |     </div>
21 |     <div v-if="queryComplete" ref="loadedContent" tabindex="-1">
22 |       <h2>Your past orders</h2>
23 |       <ul>
24 |         <li>Accessibility For Everyone</li>
25 |         <li>Inclusive Components</li>
26 |         <li>Inclusive Design Patterns</li>
27 |         <li>Pro HTML5 Accessibility</li>
28 |         <li>Color Accessibility Workflows</li>
29 |       </ul>
30 |     </div>
31 |   </div>
32 | </template>
33 | 
34 | <script>
35 | import ProgressBar from "../components/ProgressBar";
36 | export default {
37 |   data() {
38 |     return {
39 |       isLoading: false,
40 |       queryComplete: false,
41 |       value: 0
42 |     };
43 |   },
44 |   name: "orders",
45 |   components: {
46 |     ProgressBar
47 |   },
48 |   methods: {
49 |     startFakeQueryForOrders() {
50 |       this.isLoading = true;
51 | 
52 |       this.$nextTick(() => {
53 |         setTimeout(() => {
54 |           this.$refs.progressbar.$el.focus();
55 |         });
56 |       });
57 | 
58 |       setInterval(this.fakeProgressIntervall, 1000);
59 |     },
60 |     fakeProgressIntervall() {
61 |       if (this.value <= 100) {
62 |         this.value = this.value + 10;
63 |       }
64 |     },
65 |     focusLoadedFakeContent() {
66 |       this.$nextTick(() => {
67 |         setTimeout(() => {
68 |           this.$refs.loadedContent.focus();
69 |         }, 750);
70 |       });
71 |     }
72 |   },
73 |   watch: {
74 |     value (value) {
75 |       if (value >= 100) {
76 |         clearInterval(this.fakeProgressIntervall);
77 |         this.isLoading = false;
78 |         this.queryComplete = true;
79 |         this.focusLoadedFakeContent();
80 |       }
81 |     }
82 |   }
83 | };
84 | </script>
85 | 


--------------------------------------------------------------------------------
/src/components/Menu.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div ref="menu">
  3 |     <slot name="head"></slot>
  4 |     <button
  5 |       :disabled="isDisabled"
  6 |       class="o-button"
  7 |       :aria-expanded="open.toString()"
  8 |       :aria-controls="id"
  9 |       @click="toggleOpen"
 10 |       data-button
 11 |     >
 12 |       <slot name="button"></slot>
 13 |     </button>
 14 |     <div
 15 |       data-content
 16 |       :id="id"
 17 |       :hidden="!open"
 18 |       @click="closeHandler"
 19 |     >
 20 |       <slot name="content"></slot>
 21 |     </div>
 22 |   </div>
 23 | </template>
 24 | 
 25 | <script>
 26 | export default {
 27 |   data: function() {
 28 |     return {
 29 |       open: false,
 30 |       id: null
 31 |     };
 32 |   },
 33 |   props: ["is-disabled"],
 34 |   name: "VueMenu",
 35 |   created() {
 36 |     document.addEventListener("click", this.documentClick);
 37 |   },
 38 |   mounted() {
 39 |     this.id = Math.random()
 40 |       .toString(36)
 41 |       .substring(2, 15);
 42 | 
 43 |     window.addEventListener("keyup", e => {
 44 |       if (e.key === "Escape") {
 45 |         this.closeHandler();
 46 |       }
 47 |     });
 48 |   },
 49 |   destroyed: function() {
 50 |     document.removeEventListener("keyup", this.closeHandler);
 51 |   },
 52 |   methods: {
 53 |     toggleOpen() {
 54 |       this.open = !this.open;
 55 |     },
 56 |     documentClick(e) {
 57 |       let el = this.$refs.menu;
 58 |       let target = e.target;
 59 |       if (el !== target && !el.contains(target)) {
 60 |         this.closeHandler();
 61 |       }
 62 |     },
 63 |     closeHandler() {
 64 |       this.open = false;
 65 |     }
 66 |   }
 67 | };
 68 | </script>
 69 | 
 70 | <style scoped>
 71 | [data-content] {
 72 |   background-color: #ffffff;
 73 |   list-style: none;
 74 |   margin: 10px 0 0 0;
 75 |   min-width: 300px;
 76 |   padding: 10px;
 77 |   border: 1px solid #2368a2;
 78 |   animation: slide-down 0.2s ease;
 79 |   position: absolute;
 80 |   z-index: 10;
 81 |   box-shadow: 4px 4px 6px 0 #6665654d;
 82 | }
 83 | 
 84 | [data-button] {
 85 |   list-style: none;
 86 | }
 87 | 
 88 | [data-vue-details-content]::before {
 89 |   content: "";
 90 |   width: 0;
 91 |   height: 0;
 92 |   position: absolute;
 93 |   border-left: 7px solid transparent;
 94 |   border-right: 7px solid transparent;
 95 |   border-bottom: 7px solid #2368a2;
 96 |   top: -7px;
 97 |   left: 15px;
 98 | }
 99 | 
100 | [data-vue-details-content]::after {
101 |   content: "";
102 |   width: 0;
103 |   height: 0;
104 |   position: absolute;
105 |   border-left: 6px solid transparent;
106 |   border-right: 6px solid transparent;
107 |   border-bottom: 6px solid white;
108 |   top: -6px;
109 |   left: 16px;
110 | }
111 | 
112 | @keyframes slide-down {
113 |   0% {
114 |     opacity: 0;
115 |     transform: translateY(-10px);
116 |   }
117 |   100% {
118 |     opacity: 1;
119 |     transform: translateY(0);
120 |   }
121 | }
122 | 
123 | @keyframes bounce-in {
124 |   0% {
125 |     transform: scale(0);
126 |   }
127 |   50% {
128 |     transform: scale(1.25);
129 |   }
130 |   100% {
131 |     transform: scale(1);
132 |   }
133 | }
134 | </style>
135 | 


--------------------------------------------------------------------------------
/src/scss/components/_dialog.scss:
--------------------------------------------------------------------------------
  1 | /* -------------------------------------------------------------------------- *\
  2 |  * Necessary styling for the dialog to work
  3 |  * -------------------------------------------------------------------------- */
  4 | 
  5 | /**
  6 |  * When `<dialog>` is properly supported, the overlay is implied and can be
  7 |  * styled with `::backdrop`, which means the DOM one should be removed.
  8 |  */
  9 | [data-a11y-dialog-native] .dialog-overlay {
 10 |   display: none;
 11 | }
 12 | 
 13 | /**
 14 |  * When `<dialog>` is not supported, its default display is `inline` which can
 15 |  * cause layout issues.
 16 |  */
 17 | dialog[open] {
 18 |   display: block;
 19 | }
 20 | 
 21 | .dialog[aria-hidden="true"] {
 22 |   display: none;
 23 | }
 24 | 
 25 | /* -------------------------------------------------------------------------- *\
 26 |  * Styling to make the dialog look like a dialog
 27 |  * -------------------------------------------------------------------------- */
 28 | 
 29 | .dialog-overlay {
 30 |   z-index: 2;
 31 |   background-color: rgba(0, 0, 0, 0.66);
 32 |   position: fixed;
 33 |   top: 0;
 34 |   left: 0;
 35 |   bottom: 0;
 36 |   right: 0;
 37 | }
 38 | 
 39 | dialog::backdrop {
 40 |   background-color: rgba(0, 0, 0, 0.66);
 41 | }
 42 | 
 43 | .dialog-content {
 44 |   background-color: rgb(255, 255, 255);
 45 |   z-index: 3;
 46 |   position: fixed;
 47 |   top: 50%;
 48 |   left: 50%;
 49 |   -webkit-transform: translate(-50%, -50%);
 50 |   -ms-transform: translate(-50%, -50%);
 51 |   transform: translate(-50%, -50%);
 52 |   margin: 0;
 53 | }
 54 | 
 55 | /* -------------------------------------------------------------------------- *\
 56 |  * Extra dialog styling to make it shiny
 57 |  * -------------------------------------------------------------------------- */
 58 | 
 59 | @keyframes fade-in {
 60 |   from { opacity: 0;  }
 61 |   to { opacity: 1;  }
 62 | }
 63 | 
 64 | @keyframes appear {
 65 |   from { transform: translate(-50%, -40%); opacity: 0; }
 66 |   to { transform: translate(-50%, -50%); opacity: 1; }
 67 | }
 68 | 
 69 | .dialog:not([aria-hidden='true']) > .dialog-overlay {
 70 |   animation: fade-in 200ms 1 both;
 71 | }
 72 | 
 73 | .dialog:not([aria-hidden='true']) > .dialog-content {
 74 |   animation: appear 400ms 150ms 1 both;
 75 | }
 76 | 
 77 | .dialog-content {
 78 |   padding: 1em;
 79 |   max-width: 90%;
 80 |   width: 600px;
 81 |   border-radius: 2px;
 82 | }
 83 | 
 84 | 
 85 | @media screen and (min-width: 700px) {
 86 |   .dialog-content {
 87 |     padding: 2em;
 88 |   }
 89 | }
 90 | 
 91 | .dialog-overlay {
 92 |   background-color: rgba(43, 46, 56, 0.9);
 93 | }
 94 | 
 95 | .dialog h1 {
 96 |   margin: 0 0 1rem;
 97 |   font-size: 1.25em;
 98 | }
 99 | 
100 | .dialog-close {
101 |   position: absolute;
102 |   top: 0.5em;
103 |   right: 0.5em;
104 |   border: 0;
105 |   padding: 0;
106 |   background-color: transparent;
107 |   font-weight: bold;
108 |   font-size: 1.25em;
109 |   width: 1.2em;
110 |   height: 1.2em;
111 |   text-align: center;
112 |   cursor: pointer;
113 |   transition: 0.15s;
114 | 
115 |   &:focus {
116 |     outline: 1px dashed #2368a2;
117 |     line-height: 0;
118 |     padding: 0;
119 |   }
120 | }
121 | 
122 | @media screen and (min-width: 700px) {
123 |   .dialog-close {
124 |     top: 1em;
125 |     right: 1em;
126 |   }
127 | }
128 | 


--------------------------------------------------------------------------------
/src/App.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div
  3 |     id="app"
  4 |     v-bind:class="{
  5 |       'c-a11yapp--enhanced-focus': enhancedFocus,
  6 |       'user-prefers-reduced-motion-reduce': reducedMotion
  7 |     }"
  8 |   >
  9 |     <vue-announcer />
 10 |     <div id="wrapper">
 11 |       <header role="banner">
 12 |         <div class="c-top-bar">
 13 |           <div class="o-layout-inner c-top-bar__wrapper">
 14 |             <Logo />
 15 |             <Navigation ref="navMain" />
 16 |           </div>
 17 |         </div>
 18 |         <div class="o-layout-inner c-top-bar__footer">
 19 |           <UserActions />
 20 |           <Logline />
 21 |         </div>
 22 |       </header>
 23 |       <div class="o-layout-inner">
 24 |         <main role="main" class="c-content">
 25 |           <keep-alive>
 26 |             <router-view ref="routerView"></router-view>
 27 |           </keep-alive>
 28 |         </main>
 29 |       </div>
 30 |       <AccessibleAppInfo />
 31 |       <footer role="contentinfo"></footer>
 32 |     </div>
 33 |     <portal-target name="dialog" multiple></portal-target>
 34 |   </div>
 35 | </template>
 36 | 
 37 | <script>
 38 | import store from "./store";
 39 | import Logo from "./components/Logo.vue";
 40 | import Navigation from "./components/Navigation";
 41 | import UserActions from "./components/UserActions";
 42 | import Logline from "./components/Logline";
 43 | import AccessibleAppInfo from "./components/accessibleapp/AccessibleAppInfo";
 44 | 
 45 | export default {
 46 |   store,
 47 |   computed: {
 48 |     enhancedFocus() {
 49 |       return store.getters.getEnhancedFocus;
 50 |     },
 51 |     reducedMotion() {
 52 |       return store.getters.getReducedMotion;
 53 |     }
 54 |   },
 55 |   components: { Logline, Navigation, Logo, UserActions, AccessibleAppInfo },
 56 |   watch: {
 57 |     $route: function(to) {
 58 |       // $nextTick = DOM updated
 59 |       this.$nextTick(function() {
 60 |         // Change document title
 61 |         document.title = to.meta.title;
 62 | 
 63 |         // Focus management on route change
 64 |         setTimeout(() => {
 65 |           // Get component's "routeFocusTarget" ref.
 66 |           // If not existent, use router view container
 67 |           let focusTarget =
 68 |             this.$refs.routerView.$refs.componentFocusTarget !== undefined
 69 |               ? this.$refs.routerView.$refs.componentFocusTarget
 70 |               : this.$refs.routerView.$el;
 71 | 
 72 |           // Make focustarget programmatically focussable
 73 |           focusTarget.setAttribute("tabindex", "-1");
 74 | 
 75 |           // Focus element
 76 |           focusTarget.focus();
 77 | 
 78 |           // setAriaCurrent in navigation only after focus management
 79 |           this.setAriaCurrent();
 80 |         }, 0);
 81 |       });
 82 |     }
 83 |   },
 84 |   mounted() {
 85 |     this.setAriaCurrent();
 86 |   },
 87 |   methods: {
 88 |     setAriaCurrent() {
 89 |       this.$nextTick(function() {
 90 |         let app = this.$el,
 91 |           currents = app.querySelectorAll("[aria-current]");
 92 | 
 93 |         if (currents) {
 94 |           currents.forEach(current => {
 95 |             current.removeAttribute("aria-current");
 96 |           });
 97 |         }
 98 | 
 99 |         app.querySelectorAll(".router-link-exact-active").forEach(current => {
100 |           current.setAttribute("aria-current", "page");
101 |         });
102 |       });
103 |     }
104 |   }
105 | };
106 | </script>
107 | 
108 | <style lang="scss">
109 | @import "@/scss/base.scss";
110 | </style>
111 | 


--------------------------------------------------------------------------------
/src/components/ProductTable.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="o-table">
  3 |     <table class="o-table__table">
  4 |       <thead>
  5 |         <tr class="o-table__row">
  6 |           <th class="o-table__cell--header">Title</th>
  7 |           <th class="o-table__cell--header">Author</th>
  8 |           <th class="o-table__cell--header">Published</th>
  9 |           <th class="o-table__cell--header">Price</th>
 10 |           <th class="o-table__cell--header">Actions</th>
 11 |         </tr>
 12 |       </thead>
 13 |       <tbody>
 14 |         <tr :key="book.id" v-for="book in books" class="o-table__row">
 15 |           <td class="o-table__cell--data">
 16 |             <b>{{ book.title }}</b>
 17 |           </td>
 18 |           <td class="o-table__cell--data">{{ book.author }}</td>
 19 |           <td class="o-table__cell--data">{{ book.published }}</td>
 20 |           <td class="o-table__cell--data o-table__cell--price">
 21 |             {{ book.price | toEUR }}
 22 |           </td>
 23 |           <td class="o-table__cell--data">
 24 |             <button
 25 |               @click="openDialog(book.id)"
 26 |               class="o-button o-button--secondary"
 27 |             >
 28 |               More Info
 29 |             </button>
 30 |             <shopping-cart-button :product="book"></shopping-cart-button>
 31 |             <portal to="dialog">
 32 |               <a11y-dialog
 33 |                 :class-names="{
 34 |                   base: 'dialog',
 35 |                   overlay: 'dialog-overlay',
 36 |                   element: 'dialog-content',
 37 |                   closeButton: 'dialog-close'
 38 |                 }"
 39 |                 role="alertdialog"
 40 |                 disable-native
 41 |                 id="app-dialog"
 42 |                 app-root="#wrapper"
 43 |                 :data-id="book.id"
 44 |                 @dialog-ref="assignDialogRef"
 45 |               >
 46 |                 <h1 class="dialog-title" slot="title">
 47 |                   <b>{{ book.title }}</b>
 48 |                 </h1>
 49 |                 <p>
 50 |                   This is an awesome book from {{ book.author }}, published
 51 |                   {{ book.published }}. Go to
 52 |                   <a class="o-link" :href="book.info">{{ book.info }}</a> to
 53 |                   learn more.
 54 |                 </p>
 55 |               </a11y-dialog>
 56 |             </portal>
 57 |           </td>
 58 |         </tr>
 59 |       </tbody>
 60 |     </table>
 61 |   </div>
 62 | </template>
 63 | 
 64 | <script>
 65 | import ShoppingCartButton from "../components/ShoppingCartButton";
 66 | 
 67 | export default {
 68 |   name: "ProductTable",
 69 |   components: {
 70 |     ShoppingCartButton
 71 |   },
 72 |   methods: {
 73 |     assignDialogRef(dialog) {
 74 |       let id = dialog.dialog.parentNode.dataset.id;
 75 |       this.dialogs[id] = dialog;
 76 |     },
 77 |     openDialog(i) {
 78 |       if (this.dialogs[i]) {
 79 |         this.dialogs[i].show();
 80 |       }
 81 |     }
 82 |   },
 83 | 
 84 |   data: function() {
 85 |     return {
 86 |       dialogs: [],
 87 |       books: [
 88 |         {
 89 |           id: 1,
 90 |           title: "Accessibility For Everyone",
 91 |           author: "Laura Kalbag",
 92 |           published: 2017,
 93 |           price: 2476,
 94 |           info: "https://abookapart.com/products/accessibility-for-everyone"
 95 |         },
 96 |         {
 97 |           id: 2,
 98 |           title: "Inclusive Components",
 99 |           author: "Heydon Pickering",
100 |           published: 2018,
101 |           price: 1800,
102 |           info: "http://inclusive-components.design/"
103 |         },
104 |         {
105 |           id: 3,
106 |           title: "Inclusive Design Patterns",
107 |           author: "Heydon Pickering",
108 |           published: 2016,
109 |           price: 1490,
110 |           info:
111 |             "https://shop.smashingmagazine.com/products/inclusive-design-patterns-by-heydon-pickering-ebook"
112 |         },
113 |         {
114 |           id: 4,
115 |           title: "Pro HTML5 Accessibility",
116 |           author: "Joshue O'Connor",
117 |           published: 2012,
118 |           price: 3699,
119 |           info: "https://www.apress.com/gp/book/9781430241942"
120 |         },
121 |         {
122 |           id: 5,
123 |           title: "Color Accessibility Workflows",
124 |           author: "Geri Ciady",
125 |           published: 2017,
126 |           price: 683,
127 |           info: "https://abookapart.com/products/color-accessibility-workflows"
128 |         }
129 |       ]
130 |     };
131 |   }
132 | };
133 | </script>
134 | 
135 | <style lang="scss" scoped></style>
136 | 


--------------------------------------------------------------------------------
/src/components/ShoppingCartMenu.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <vue-menu class="c-shopping-cart" ref="menu" :is-disabled="!numberOfCartItems">
  3 |     <template slot="head">
  4 |       <transition name="bounce">
  5 |         <div
  6 |           class="shopping-cart__item-count"
  7 |           :key="numberOfCartItems"
  8 |           v-show="numberOfCartItems"
  9 |         >
 10 |           {{ numberOfCartItems }} <span class="u-visually-hidden"> items</span>
 11 |         </div>
 12 |       </transition>
 13 |     </template>
 14 |     <template slot="button"
 15 |       >Shopping Cart <span class="u-visually-hidden" v-if="!numberOfCartItems">(empty)</span>
 16 |     </template>
 17 |     <template slot="content">
 18 |       <div data-vue-menu>
 19 |         <div v-if="shoppingCartItems.length">
 20 |           <ul
 21 |             class="c-shopping-cart__list"
 22 |             :key="item.id"
 23 |             v-for="item in shoppingCartItems"
 24 |           >
 25 |             <li class="c-shopping-cart__list-item">
 26 |               {{ item.title }}
 27 |               <button
 28 |                 :id="'delete' + item.id"
 29 |                 data-close-button
 30 |                 @click="removeItem(item)"
 31 |                 :aria-labelledby="'product' + item.id + ' delete' + item.id"
 32 |                 class="o-button o-button--bare"
 33 |               >
 34 |                 <svg
 35 |                   xmlns="http://www.w3.org/2000/svg"
 36 |                   width="16"
 37 |                   height="16"
 38 |                   viewBox="0 0 24 24"
 39 |                   fill="none"
 40 |                   stroke="currentColor"
 41 |                   stroke-width="2"
 42 |                   stroke-linecap="square"
 43 |                   stroke-linejoin="arcs"
 44 |                 >
 45 |                   <polyline points="3 6 5 6 21 6"></polyline>
 46 |                   <path
 47 |                     d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"
 48 |                   ></path>
 49 |                   <line x1="10" y1="11" x2="10" y2="17"></line>
 50 |                   <line x1="14" y1="11" x2="14" y2="17"></line>
 51 |                 </svg>
 52 |                 <span class="u-visually-hidden">Remove from shopping cart</span
 53 |                 >
 54 |               </button>
 55 |             </li>
 56 |           </ul>
 57 |           <button
 58 |             @click="removeAllItems"
 59 |             class="u-button-link-look o-link c-shopping-cart__remove-all"
 60 |           >
 61 |             Remove all items
 62 |           </button>
 63 |         </div>
 64 |       </div>
 65 |     </template>
 66 |   </vue-menu>
 67 | </template>
 68 | 
 69 | <script>
 70 | import store from "../store";
 71 | import VueMenu from "./Menu";
 72 | 
 73 | export default {
 74 |   components: {
 75 |     VueMenu
 76 |   },
 77 |   created() {
 78 |     document.addEventListener("click", this.documentClick);
 79 |   },
 80 |   computed: {
 81 |     shoppingCartItems: function() {
 82 |       return store.getters.shoppingCartItems;
 83 |     },
 84 |     numberOfCartItems: function() {
 85 |       return this.shoppingCartItems.length;
 86 |     }
 87 |   },
 88 |   methods: {
 89 |     removeItem(item) {
 90 |       let detailEl = this.$refs.menu.$el.children[1];
 91 | 
 92 |       store.commit("toggleShoppingCartState", item);
 93 | 
 94 |       setTimeout(() => {
 95 |         // Only here query for data-close-buttons
 96 |         let closeButtons = detailEl.querySelectorAll("[data-close-button]");
 97 | 
 98 |         if (closeButtons.length) {
 99 |           closeButtons[0].focus();
100 |         }
101 | 
102 |         let message = `${item.title} has been removed`;
103 |         this.$announcer.set(message);
104 |       });
105 |     },
106 |     removeAllItems() {
107 |       store.commit("removeAllShoppingCartItems");
108 | 
109 |       let message = `Shopping cart is now empty`;
110 |       this.$announcer.set(message);
111 |     }
112 |   }
113 | };
114 | </script>
115 | 
116 | <style scoped>
117 | .c-shopping-cart[data-vue-menu] {
118 |   padding: 10px;
119 | }
120 | 
121 | .c-shopping-cart__list {
122 |   list-style: none;
123 |   margin: 0;
124 |   padding: 0;
125 | }
126 | 
127 | .c-shopping-cart {
128 |   position: relative;
129 | }
130 | 
131 | .shopping-cart__item-count {
132 |   position: absolute;
133 |   right: -0.5rem;
134 |   top: -0.5rem;
135 |   width: 1.25rem;
136 |   height: 1.25rem;
137 |   background-color: #484848;
138 |   display: flex;
139 |   justify-content: center;
140 |   align-items: center;
141 |   border-radius: 50%;
142 |   border: 1px solid;
143 |   color: #fff;
144 |   font-weight: 700;
145 |   font-size: 80%;
146 | }
147 | 
148 | .c-shopping-cart__list-item {
149 |   display: flex;
150 |   justify-content: space-between;
151 |   margin: 0.75rem 0;
152 | }
153 | 
154 | .c-shopping-cart__remove-all {
155 |   margin-top: 0.66rem;
156 |   float: right;
157 | }
158 | 
159 | .bounce-enter-active {
160 |   animation: bounce-in 0.5s;
161 | }
162 | 
163 | @keyframes bounce-in {
164 |   0% {
165 |     transform: scale(0);
166 |   }
167 |   50% {
168 |     transform: scale(1.25);
169 |   }
170 |   100% {
171 |     transform: scale(1);
172 |   }
173 | }
174 | </style>
175 | 


--------------------------------------------------------------------------------