4137406804

Build Type

github

Committed by GitHub

Commit Message

Merge b8210344a into 342745e48

Pull Request Pull Request #1662: [WIP][ENG-4048] Keyboard Navigation Skip Link - Main Home

Run Details

2491 of 3799 branches covered (65.57%)

Branch coverage included in aggregate %.

147 of 147 new or added lines in 3 files covered. (100.0%)

5701 of 7910 relevant lines covered (72.07%)

228.14 hits per line

Source File
Press 'n' to go to next uncovered line, 'b' for previous

1.69

/app/home/controller.ts

import Controller from '@ember/controller';
import { alias, bool } from '@ember/object/computed';
import { inject as service } from '@ember/service';
import { camelize } from '@ember/string';
import { tracked } from '@glimmer/tracking';
import Features from 'ember-feature-flags/services/features';
import config from 'ember-get-config';
import Intl from 'ember-intl/services/intl';
import Toast from 'ember-toastr/services/toast';

const { featureFlagNames: { ABTesting } } = config;

export default class Home extends Controller {
    @service features!: Features;
    @service intl!: Intl;
    @service toast!: Toast;

    @alias(`features.${camelize(ABTesting.homePageHeroTextVersionB)}`)
    shouldShowVersionB!: boolean;

    @tracked keyboardActive = false;

    @bool('currentUser.currentUserId') isLoggedIn?: boolean;

    menuItems: string[] = ['OSF Products', 'Sign in', 'Sign up', 'Main Content', 'Search the OSF',
        'OSF Support', 'Donate', 'Learn more about the OSF', 'OSF Testimonials' , 'Integrations and add-ons.'];

    registerKeyboard() {
        const OSFProductDropdownCaret : HTMLElement | null = document.querySelector('[data-test-service-dropdown]');
        const OSFHome: Element | null = document.querySelectorAll("[data-analytics-name='HOME']")[1];
        const signInButton: HTMLElement | null = document.querySelector('[data-test-sign-in-button]');
        const signUpButton: HTMLElement | null = document.querySelector('[data-test-ad-sign-up-button]');
        const mainContent = document.getElementById('mainContentLink');
        const searchInput = document.getElementsByName('search')[0];
        const supportButton: HTMLElement | null= document.querySelector('[data-analytics-name="Support"]');
        const donateButton: HTMLElement | null = document.querySelector('[data-analytics-name="Donate"]');
        const learnMoreButton: HTMLElement | null = document.querySelector('[data-test-get-started-button]');
        const testimonials: HTMLElement | null = document.querySelector('[data-test-carousel-container]');
        const testimonialsCarousel: HTMLElement | null = document.querySelector('[data-test-carousel-container]');
        const integrations: HTMLElement | null = document.getElementById('integrationsLink');

        document.addEventListener('scroll', () => {
            const menu = document.getElementById('menu');

            if (menu) {
                const sticky = menu.offsetTop;
                if (window.pageYOffset >= sticky) {
                    menu.classList.add('sticky');
                } else {
                    menu.classList.add('sticky');
                }
            }
        });

        document.addEventListener('keydown', event => {
            const name = event.key;

            // avoid overriding native browser or SR controls
            if (name === 'Control' || name === 'Meta') {
                return;
            }

            if (event.altKey) {
                event.preventDefault();
                switch(name) {
                // 'Alt' + '1'
                case('¡'):
                    if (OSFProductDropdownCaret) {
                        OSFProductDropdownCaret.click();
                    }
                    if (OSFHome) {
                        OSFHome.classList.add('active');
                    }
                    break;
                // 'Alt' + '2'
                case('™'):
                    if (signInButton) {
                        signInButton.click();
                    }
                    break;
                // 'Alt' + '3'
                case('£'):
                    if (signUpButton) {
                        signUpButton.click();
                    }
                    break;
                // 'Alt' + '4'
                case('¢'):
                    if (mainContent) {
                        mainContent.click();
                    }
                    break;
                // 'Alt' + '5'
                case('∞'):
                    if (searchInput) {
                        searchInput.focus();
                    }
                    break;
                // 'Alt' + '6'
                case('§'):
                    if (supportButton) {
                        supportButton.click();
                    }
                    break;
                // 'Alt' + '7'
                case('¶'):
                    if (donateButton) {
                        donateButton.click();
                    }
                    break;
                // 'Alt' +  '8'
                case('•'):
                    if (learnMoreButton) {
                        learnMoreButton.click();
                    }
                    break;
                // 'Alt' + '9'
                case('ª'):
                    if (testimonials) {
                        testimonials.click();
                    }
                    try {
                        if (testimonialsCarousel) {
                            testimonialsCarousel.focus();
                        }
                    } catch (e) {
                        this.toast.error(this.intl.t('new-home.voice-over.keyboard_not_activated'));
                    }
                    break;
                // 'Alt' + '0'
                case('º'):
                    if (integrations) {
                        integrations.click();
                    }
                    try {
                        if (integrations) {
                            integrations.focus();
                        }
                    } catch (e) {
                        this.toast.error(this.intl.t('new-home.voice-over.keyboard_not_activated'));
                    }
                    break;
                default:
                    break;
                }
            } else {
                this.toast.error(this.intl.t('new-home.voice-over.other_key_press'));
            }
        }, true);
    }
}

declare module '@ember/controller' {
    interface Registry {
        home: Home;
    }
}

1	import Controller from '@ember/controller';
2	import { alias, bool } from '@ember/object/computed';
3	import { inject as service } from '@ember/service';
4	import { camelize } from '@ember/string';
5	import { tracked } from '@glimmer/tracking';
6	import Features from 'ember-feature-flags/services/features';
7	import config from 'ember-get-config';
8	import Intl from 'ember-intl/services/intl';
9	import Toast from 'ember-toastr/services/toast';
10
11	const { featureFlagNames: { ABTesting } } = config;	1✔
12
13	export default class Home extends Controller {
14	@service features!: Features;
15	@service intl!: Intl;
16	@service toast!: Toast;
17
18	@alias(`features.${camelize(ABTesting.homePageHeroTextVersionB)}`)
19	shouldShowVersionB!: boolean;
20
21	@tracked keyboardActive = false;	×
22
23	@bool('currentUser.currentUserId') isLoggedIn?: boolean;
24
25	menuItems: string[] = ['OSF Products', 'Sign in', 'Sign up', 'Main Content', 'Search the OSF',	12✔
26	'OSF Support', 'Donate', 'Learn more about the OSF', 'OSF Testimonials' , 'Integrations and add-ons.'];
27
28	registerKeyboard() {
29	const OSFProductDropdownCaret : HTMLElement \| null = document.querySelector('[data-test-service-dropdown]');	×
30	const OSFHome: Element \| null = document.querySelectorAll("[data-analytics-name='HOME']")[1];	×
31	const signInButton: HTMLElement \| null = document.querySelector('[data-test-sign-in-button]');	×
32	const signUpButton: HTMLElement \| null = document.querySelector('[data-test-ad-sign-up-button]');	×
33	const mainContent = document.getElementById('mainContentLink');	×
34	const searchInput = document.getElementsByName('search')[0];	×
35	const supportButton: HTMLElement \| null= document.querySelector('[data-analytics-name="Support"]');	×
36	const donateButton: HTMLElement \| null = document.querySelector('[data-analytics-name="Donate"]');	×
37	const learnMoreButton: HTMLElement \| null = document.querySelector('[data-test-get-started-button]');	×
38	const testimonials: HTMLElement \| null = document.querySelector('[data-test-carousel-container]');	×
39	const testimonialsCarousel: HTMLElement \| null = document.querySelector('[data-test-carousel-container]');	×
40	const integrations: HTMLElement \| null = document.getElementById('integrationsLink');	×
41
42	document.addEventListener('scroll', () => {	×
43	const menu = document.getElementById('menu');	×
44
45	if (menu) {	×
46	const sticky = menu.offsetTop;	×
47	if (window.pageYOffset >= sticky) {	×
48	menu.classList.add('sticky');	×
49	} else {
50	menu.classList.add('sticky');	×
51	}
52	}
53	});
54
55	document.addEventListener('keydown', event => {	×
56	const name = event.key;	×
57
58	// avoid overriding native browser or SR controls
59	if (name === 'Control' \|\| name === 'Meta') {	×
60	return;	×
61	}
62
63	if (event.altKey) {	×
64	event.preventDefault();	×
65	switch(name) {	×
66	// 'Alt' + '1'
67	case('¡'):
68	if (OSFProductDropdownCaret) {	×
69	OSFProductDropdownCaret.click();	×
70	}
71	if (OSFHome) {	×
72	OSFHome.classList.add('active');	×
73	}
74	break;	×
75	// 'Alt' + '2'
76	case('™'):
77	if (signInButton) {	×
78	signInButton.click();	×
79	}
80	break;	×
81	// 'Alt' + '3'
82	case('£'):
83	if (signUpButton) {	×
84	signUpButton.click();	×
85	}
86	break;	×
87	// 'Alt' + '4'
88	case('¢'):
89	if (mainContent) {	×
90	mainContent.click();	×
91	}
92	break;	×
93	// 'Alt' + '5'
94	case('∞'):
95	if (searchInput) {	×
96	searchInput.focus();	×
97	}
98	break;	×
99	// 'Alt' + '6'
100	case('§'):
101	if (supportButton) {	×
102	supportButton.click();	×
103	}
104	break;	×
105	// 'Alt' + '7'
106	case('¶'):
107	if (donateButton) {	×
108	donateButton.click();	×
109	}
110	break;	×
111	// 'Alt' + '8'
112	case('•'):
113	if (learnMoreButton) {	×
114	learnMoreButton.click();	×
115	}
116	break;	×
117	// 'Alt' + '9'
118	case('ª'):
119	if (testimonials) {	×
120	testimonials.click();	×
121	}
122	try {	×
123	if (testimonialsCarousel) {	×
124	testimonialsCarousel.focus();	×
125	}
126	} catch (e) {
127	this.toast.error(this.intl.t('new-home.voice-over.keyboard_not_activated'));	×
128	}
129	break;	×
130	// 'Alt' + '0'
131	case('º'):
132	if (integrations) {	×
133	integrations.click();	×
134	}
135	try {	×
136	if (integrations) {	×
137	integrations.focus();	×
138	}
139	} catch (e) {
140	this.toast.error(this.intl.t('new-home.voice-over.keyboard_not_activated'));	×
141	}
142	break;	×
143	default:
144	break;	×
145	}
146	} else {
147	this.toast.error(this.intl.t('new-home.voice-over.other_key_press'));	×
148	}
149	}, true);
150	}
151	}
152
153	declare module '@ember/controller' {
154	interface Registry {
155	home: Home;
156	}
157	}

CenterForOpenScience / ember-osf-web / 4137406804

Source File Press 'n' to go to next uncovered line, 'b' for previous

Source File
Press 'n' to go to next uncovered line, 'b' for previous