Keyboard Shortcuts

The redesigned prototype of the Jokes section for The Norm Macdonald Archive incorporates keyboard shortcuts to enhance user experience and accessibility. These shortcuts provide quick access to core features, such as viewing a random joke and managing the modal dialog, without requiring mouse interaction.

The implementation is handled via a global keydown event listener in the main JavaScript file, which triggers specific functions based on the key pressed. This system is designed to be simple and non-intrusive, only activating when the user is not interacting with input fields.

Implemented Shortcuts

The application provides two main keyboard shortcuts for improved navigation and interaction within the Jokes section.

Sources: redesign/README.md, redesign/script.js:615-626

Event Handling and Logic

Keyboard interactions are managed by a single event listener attached to the document object. This listener captures all keydown events and processes them through a simple conditional logic tree.

Sources: redesign/script.js:603-627

Keyboard Event Flow

The following diagram illustrates the logic flow when a key is pressed.

Sources: redesign/script.js:615-626

Core Functions

• showRandomJoke(): This function selects a random joke from the state.jokes array, populates the modal (#random-modal) with the joke's content and metadata, and makes the modal visible by adding the .active class. It also sets document.body.style.overflow = 'hidden' to prevent background scrolling.
  Sources: redesign/script.js:483-513, redesign/jokes.html:152-186

• closeRandomJoke(): This function hides the modal by removing the .active class and restores background scrolling by resetting document.body.style.overflow.
  Sources: redesign/script.js:515-519, redesign/styles.css:611-615

Implementation Snippet

The keyboard shortcut logic is contained within the initEventListeners function.

// redesign/script.js

function initEventListeners() {
    // ... other listeners

    // Keyboard shortcuts
    document.addEventListener('keydown', (e) => {
        if (e.key === 'Escape') {
            closeRandomJoke();
        }

        if (e.key === 'r' && !e.ctrlKey && !e.metaKey && document.activeElement.tagName !== 'INPUT') {
            e.preventDefault();
            showRandomJoke();
        }
    });
}

Sources: redesign/script.js:615-626

The condition document.activeElement.tagName !== 'INPUT' is crucial as it prevents the 'R' shortcut from triggering while the user is typing in the search bar.

Related Accessibility Features

Beyond the specific R and Esc shortcuts, the project includes other features that improve keyboard navigation and overall accessibility.

Skip to Main Content

A "Skip to main content" link is the first focusable element on the page. This allows keyboard users to bypass the header and navigation links and jump directly to the main content area (#main-content).

<!-- redesign/index.html -->
<body>
    <!-- Skip to main content for accessibility -->
    <a href="#main-content" class="skip-to-main">Skip to main content</a>
    
    <!-- ... -->

    <!-- Hero Section -->
    <section class="hero" id="main-content">

Sources: redesign/index.html:11-28, redesign/styles.css:201-213

Focus Styles

The application defines clear and visible focus styles for all interactive elements, such as links, buttons, and inputs. When a user navigates using the keyboard (e.g., with the Tab key), the focused element is highlighted with a blue outline, ensuring the user always knows their location on the page.

/* redesign/styles.css */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
    border-radius: var(--radius-sm);
}

Sources: redesign/styles.css:216-222

These accessibility considerations, combined with the keyboard shortcuts, create a more robust and user-friendly experience for all users.