Keyboard navigation support in Bootsrap - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ accessibility

intermediate

Keyboard focus order in Bootstrap modal

Consider a Bootstrap modal with multiple interactive elements. What is the default keyboard focus order when the modal opens?

Bootsrap

<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">Open Modal</button>
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        <input type="text" class="form-control" placeholder="Input 1">
        <input type="text" class="form-control mt-2" placeholder="Input 2">
        <button class="btn btn-secondary mt-3">Submit</button>
      </div>
    </div>
  </div>
</div>

A Focus starts on the modal container and cycles through all focusable elements inside the modal in DOM order.

B Focus starts on the first input element inside the modal and cycles through focusable elements in DOM order.

C Focus starts outside the modal and does not move inside until the user clicks inside.

D Focus starts on the close button and cycles through focusable elements in DOM order.

💡 Hint

Think about which element is designed for quick dismissal and accessibility in Bootstrap modals.

Bootstrap modals automatically focus the first focusable element inside the modal when opened, which is typically the first input element. The focus then cycles through all focusable elements inside the modal in DOM order.

❓ selector

intermediate

Selecting focusable elements for keyboard navigation

Which CSS selector correctly targets all focusable elements inside a Bootstrap navbar for custom keyboard navigation?

Bootsrap

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Brand</a>
  <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarNav">
    <ul class="navbar-nav">
      <li class="nav-item">
        <a class="nav-link active" href="#">Home</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Features</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Pricing</a>
      </li>
    </ul>
  </div>
</nav>

A nav.navbar a, nav.navbar button, nav.navbar input, nav.navbar select, nav.navbar textarea

B nav.navbar :focusable

C nav.navbar a, nav.navbar button, nav.navbar input, nav.navbar select, nav.navbar textarea, nav.navbar [tabindex]:not([tabindex="-1"])

D nav.navbar a, button, input, select, textarea

💡 Hint

Remember that some elements may have tabindex attributes to be focusable.

Option C covers all standard focusable elements inside the navbar and also includes elements with tabindex not equal to -1, ensuring comprehensive keyboard navigation support.

❓ rendering

advanced

Visual focus indicator for keyboard users

You want to improve keyboard navigation by adding a visible focus outline to all buttons in a Bootstrap form. Which CSS snippet achieves this without affecting mouse users?

Bootsrap

<form>
  <button type="submit" class="btn btn-primary">Submit</button>
  <button type="button" class="btn btn-secondary">Cancel</button>
</form>

A button:focus-visible { outline: 3px solid #005fcc; }

B button:focus { outline: 3px solid #005fcc; }

C button:hover, button:focus { outline: 3px solid #005fcc; }

D button:active { outline: 3px solid #005fcc; }

💡 Hint

Focus-visible applies only when keyboard navigation triggers focus.

The :focus-visible pseudo-class shows the outline only when the user navigates via keyboard, avoiding distracting outlines for mouse users.

🧠 Conceptual

advanced

ARIA roles and keyboard navigation in Bootstrap tabs

In a Bootstrap tab component, which ARIA role and keyboard behavior combination ensures proper keyboard navigation between tabs?

Bootsrap

<ul class="nav nav-tabs" role="tablist">
  <li class="nav-item" role="presentation">
    <button class="nav-link active" id="home-tab" data-bs-toggle="tab" data-bs-target="#home" type="button" role="tab" aria-controls="home" aria-selected="true">Home</button>
  </li>
  <li class="nav-item" role="presentation">
    <button class="nav-link" id="profile-tab" data-bs-toggle="tab" data-bs-target="#profile" type="button" role="tab" aria-controls="profile" aria-selected="false">Profile</button>
  </li>
</ul>

A role="tabpanel" on container, role="tab" on buttons, tab key moves focus between tabs

B role="list" on container, role="button" on tabs, tab key moves focus between tabs

C role="menu" on container, role="menuitem" on tabs, arrow keys move focus between tabs

D role="tablist" on container, role="tab" on buttons, arrow keys move focus between tabs

💡 Hint

ARIA roles must match the tab pattern for screen readers and keyboard users.

Bootstrap tabs use role="tablist" on the container and role="tab" on each tab button. Arrow keys are used to move focus between tabs for accessibility.

📝 Syntax

expert

JavaScript keyboard event handling for Bootstrap dropdown

Which JavaScript snippet correctly listens for keyboard events to open a Bootstrap dropdown menu when the user presses Enter or Space on the toggle button?

Bootsrap

<div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-bs-toggle="dropdown" aria-expanded="false">
    Dropdown button
  </button>
  <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton">
    <li><a class="dropdown-item" href="#">Action</a></li>
    <li><a class="dropdown-item" href="#">Another action</a></li>
  </ul>
</div>

A

document.getElementById('dropdownMenuButton').addEventListener('keydown', event => {
  if(event.key === 'Enter' || event.key === ' '){
    event.preventDefault();
    new bootstrap.Dropdown(event.target).toggle();
  }
});

B

document.getElementById('dropdownMenuButton').addEventListener('keypress', event => {
  if(event.keyCode === 13 || event.keyCode === 32){
    event.preventDefault();
    bootstrap.Dropdown.getInstance(event.target).toggle();
  }
});

C

document.getElementById('dropdownMenuButton').addEventListener('keydown', event => {
  if(event.key === 'Enter' || event.key === 'Space'){
    event.preventDefault();
    new bootstrap.Dropdown(event.target).show();
  }
});

D

document.getElementById('dropdownMenuButton').addEventListener('keyup', event => {
  if(event.key === 'Enter' || event.key === ' '){
    event.preventDefault();
    bootstrap.Dropdown.getInstance(event.target).show();
  }
});

💡 Hint

Check event type, key names, and how to toggle dropdown with Bootstrap's JS API.

Option A uses 'keydown' event, checks for 'Enter' or space (' '), prevents default, and toggles the dropdown by creating a new instance. This is the correct way to handle keyboard activation for Bootstrap dropdown toggles.

Practice

1. What is the main purpose of keyboard navigation support in Bootstrap?

easy

A. To disable mouse clicks on buttons

B. To add animations to buttons

C. To change the color scheme automatically

D. To allow users to navigate the website using only the keyboard

Solution

1. Step 1: Understand keyboard navigation

   Keyboard navigation means users can move through a website using keys like Tab, Enter, and arrow keys without a mouse.

2. Step 2: Identify Bootstrap's support

   Bootstrap components are designed to support keyboard navigation for accessibility and ease of use.

3. Final Answer:

   To allow users to navigate the website using only the keyboard -> Option D

4. Quick Check:

   Keyboard navigation = navigate site with keyboard [OK]

Hint: Keyboard navigation means using keys, not mouse [OK]

Common Mistakes:

• Thinking it adds visual effects
• Confusing with color or style changes
• Assuming it disables mouse input

2. Which HTML attribute is commonly used in Bootstrap to make custom elements focusable for keyboard navigation?

easy

A. tabindex

B. aria-label

C. data-toggle

D. role

Solution

1. Step 1: Identify attribute for focus

   The tabindex attribute allows elements to receive keyboard focus and be reachable by Tab key.

2. Step 2: Confirm Bootstrap usage

   Bootstrap uses tabindex to enable keyboard navigation on custom interactive elements.

3. Final Answer:

   tabindex -> Option A

4. Quick Check:

   Focusable elements use tabindex [OK]

Hint: tabindex controls keyboard focus order [OK]

Common Mistakes:

• Confusing aria-label with focus control
• Using data-toggle which is for JS behavior
• Using role which defines semantics, not focus

3. Consider this Bootstrap button code:

<button class="btn btn-primary">Click Me</button>

What happens when you press the Tab key repeatedly on the page?

medium

A. The button will change color automatically

B. The button will receive focus and can be activated with Enter or Space

C. The button will be skipped and not receive focus

D. The button will submit a form immediately

Solution

1. Step 1: Understand default button behavior

   Native buttons are focusable by default and receive keyboard focus when tabbing.

2. Step 2: Bootstrap styling does not remove focus

   Bootstrap styles do not disable keyboard focus or activation on buttons.

3. Final Answer:

   The button will receive focus and can be activated with Enter or Space -> Option B

4. Quick Check:

   Native buttons are keyboard accessible [OK]

Hint: Native buttons are focusable by default [OK]

Common Mistakes:

• Thinking Bootstrap disables keyboard focus
• Assuming buttons skip focus by default
• Confusing visual style with behavior

4. You have a custom Bootstrap dropdown menu that is not reachable by keyboard. Which is the most likely cause?

medium

A. Missing tabindex="-1" on the dropdown toggle button

B. Adding disabled attribute to the dropdown menu

C. Missing tabindex="0" or focusable attribute on the toggle element

D. Using aria-hidden="true" on the dropdown menu

Solution

1. Step 1: Check focusability of toggle

   For keyboard navigation, the dropdown toggle must be focusable, usually with tabindex="0" or a native focusable element.

2. Step 2: Identify common mistakes

   Missing tabindex or using tabindex="-1" prevents keyboard focus on toggle, making dropdown unreachable.

3. Final Answer:

   Missing tabindex="0" or focusable attribute on the toggle element -> Option C

4. Quick Check:

   Focusable toggle needs tabindex=0 [OK]

Hint: Toggle must be focusable with tabindex=0 [OK]

Common Mistakes:

• Using tabindex=-1 disables focus
• Hiding menu with aria-hidden disables access
• Disabling menu instead of toggle

5. You want to create a custom Bootstrap card component that is keyboard accessible. Which combination of attributes and roles should you add to the card container to support keyboard navigation and screen readers?

hard

A. tabindex="0" role="button" aria-label="Card details"

B. tabindex="-1" role="presentation" aria-hidden="true"

C. tabindex="0" role="img" aria-label="Card image"

D. tabindex="-1" role="button" aria-disabled="true"

Solution

1. Step 1: Make card focusable

   Adding tabindex="0" makes the card reachable by keyboard Tab key.

2. Step 2: Define semantic role and label

   Using role="button" tells assistive tech the card is interactive, and aria-label describes it.

3. Final Answer:

   tabindex="0" role="button" aria-label="Card details" -> Option A

4. Quick Check:

   Focusable + role=button + aria-label = accessible card [OK]

Hint: Use tabindex=0 and role=button for custom interactive elements [OK]

Common Mistakes:

• Using tabindex=-1 disables keyboard focus
• Using role=presentation hides semantics
• Marking aria-disabled true disables interaction