fix: keep navigation labels single and accessible
This commit is contained in:
@@ -57,17 +57,17 @@ describe('semantic portfolio document', () => {
|
||||
expect(document.body.textContent).toContain('For a current CV or role-specific information, contact me directly.');
|
||||
});
|
||||
|
||||
it('renders separate full and compact navigation labels without overriding their accessible names', async () => {
|
||||
it('renders one semantic navigation label with no duplicate responsive text', async () => {
|
||||
const document = await renderedDocument();
|
||||
const experience = document.querySelector('nav a[href="#experience"]')!;
|
||||
const additional = document.querySelector('nav a[href="#additional-work"]')!;
|
||||
|
||||
expect(experience.hasAttribute('aria-label')).toBe(false);
|
||||
expect(experience.querySelector('.site-navigation__full-label')?.textContent).toBe('Experience');
|
||||
expect(experience.querySelector('.site-navigation__compact-label')?.textContent).toBe('Career');
|
||||
expect(experience.textContent).toBe('Career');
|
||||
expect(experience.childElementCount).toBe(0);
|
||||
expect(additional.hasAttribute('aria-label')).toBe(false);
|
||||
expect(additional.querySelector('.site-navigation__full-label')?.textContent).toBe('Additional work');
|
||||
expect(additional.querySelector('.site-navigation__compact-label')?.textContent).toBe('More work');
|
||||
expect(additional.textContent).toBe('More work');
|
||||
expect(additional.childElementCount).toBe(0);
|
||||
});
|
||||
|
||||
it('binds navigation and section labels to their canonical IDs when content navigation is reordered', async () => {
|
||||
@@ -91,12 +91,9 @@ describe('semantic portfolio document', () => {
|
||||
expect([...document.querySelectorAll('main > section > h2')].map((heading) => heading.textContent)).toEqual([
|
||||
'START', 'PROFILE', 'EXPERIENCE', 'INFRASTRUCTURE', 'SELECTED BUILDS', 'ADDITIONAL WORK', 'TOOLKIT', 'CONTACT',
|
||||
]);
|
||||
expect([...document.querySelectorAll('nav a')].map((link) => [
|
||||
link.getAttribute('href'),
|
||||
link.querySelector('.site-navigation__full-label')?.textContent,
|
||||
])).toEqual([
|
||||
['#start', 'Start'], ['#profile', 'Profile'], ['#experience', 'Experience'], ['#infrastructure', 'Infrastructure'],
|
||||
['#selected-builds', 'Selected builds'], ['#additional-work', 'Additional work'], ['#toolkit', 'Toolkit'], ['#contact', 'Contact'],
|
||||
expect([...document.querySelectorAll('nav a')].map((link) => [link.getAttribute('href'), link.textContent])).toEqual([
|
||||
['#start', 'Start'], ['#profile', 'Profile'], ['#experience', 'Career'], ['#infrastructure', 'Infra'],
|
||||
['#selected-builds', 'Builds'], ['#additional-work', 'More work'], ['#toolkit', 'Toolkit'], ['#contact', 'Contact'],
|
||||
]);
|
||||
});
|
||||
|
||||
|
||||
Reference in New Issue
Block a user