Test keyboard navigation in complex Oracle JET components

Introduction

This will be our first look at the Departments tab in the ACCLearningPath app. The review process outlined in the previous learning path in this accessibility series is followed to identify any accessibility issues.

Objectives

In this tutorial, you will learn how to identify and fix the accessibility issues in the Departments tab of the ACCLearningPath app.

Prerequisites

A development environment set up to create Oracle JET apps with the JavaScript runtime, Node.js, and the Oracle JET release 13.0 (or later) command-line interface installed
Access to the Oracle JET Developer Cookbook
Access to the Oracle JET Keyboard and Gesture Guide
Completion of the previous tutorial in this learning path, Verify the Accessibility of Oracle JET Components Table and Message

Task 1: Review the Page Structure

In your terminal window, navigate to the ACCLearningPath folder and run the app.
```
$ ojet serve
```
The app in the browser will open to the Introduction page with the Overview tab loaded.
Click on the Departments tab in the tab bar and assess the page structure. The Departments page consists of three panels, where each panel displays department data using various Oracle JET components.

Description of the illustration departments_tab_before.png
Navigate to the ACCLearningPath/src/js/views folder and open the departments.html file in a code editor.

Locate the main <div> tag in the file.

<div class="oj-hybrid-padding">
   <div id="mainContainer" class="oj-flex" style="width:100%;">

Insert an h3 heading between the two <div> tags to identify the Departments page.

<div class="oj-hybrid-padding">
   <h3>Departments</h3>
   <div id="mainContainer" class="oj-flex" style="width:100%;">

Locate the <div> tag that defines the middle panel that contains a filmstrip.

<div class="oj-flex-item fs-container">
   <oj-film-strip id="deptFilmstrip" max-items-per-page="1"
      . . . >

Insert an h4 heading between the opening <div> and <oj-filmstrip> tags to identify the panel and provide a visible label for the filmstrip.

<div class="oj-flex-item fs-container">
   <h4>Departments Film Strip</h4>
   <oj-film-strip id=“deptFilmstrip” max-items-per-page=“1”
      . . . >

Locate the <div> tag that forms the left panel that contains a data grid.

<div class="oj-flex-item">
   <oj-data-grid id="datagrid"
      style="width:100%; min-width:400px; height:200px; margin-bottom:5px"
      . . . >

Insert an h4 heading between the <div> and <oj-data-grid> tags to identify the panel and provide a visible label for the data grid.

<div class="oj-flex-item">
   <h4>Departments Data Grid</h4>
   <oj-data-grid id="datagrid"
      style="width:100%; min-width:400px; height:200px; margin-bottom:5px"
      . . . >

Locate the opening <div> tag that forms the third panel that contains a chart.

<div class="oj-flex-item oj-sm-margin-4x-horizontal">
   <oj-chart id="pieChart" type="bar" data="[[chartDataProvider]]" animation-on-display="auto" animation-on-data-change="auto"
      . . . >

Insert an h4 heading between the opening <div> and <oj-chart> tags. This heading identifies the panel and serves as a visual label for the chart.

<div class="oj-flex-item oj-sm-margin-4x-horizontal">
   <h4>Salaries by Department</h4>
   <oj-chart id="pieChart"
      type="bar"
      data="[[chartDataProvider]]"
      animation-on-display="auto"
      animation-on-data-change="auto"
      . . . >

Save the file. In the browser, verify the changes to your app’s Departments tab.

Description of the illustration departments_tab_after.png

Task 2: Perform a Keyboard-Only Test

The second part of the accessibility review is to perform a keyboard-only test of the app’s Departments tab.

Press <Ctrl+L> to set focus on the address bar.
Press <Tab>. Focus moves to the skip nav link.
Press <Tab>. Focus moves to john.hancock@oracle.com in the user menu at the top-right of the page.
Press <Tab>. Focus moves to Introduction in the navigation menu immediately below the user menu.
Press <Tab>. Focus moves to Overview in the tab bar.
Press <Tab>. Focus moves to Accounting in the filmstrip.
Press <right arrow> to move to the next entry, Research, in the filmstrip.
Press <left arrow> to move back to Accounting in the filmstrip.
Press <right arrow> three times. Focus moves to the last entry in the filmstrip, Operations.
Press <Tab>. Focus moves to the first databody cell in the data grid, under the Id column. The value of the focused cell is 10.
Press <right arrow>. Focus moves to Accounting under the second column of the data grid, Name.
Press <right arrow>. Focus moves to New York in the final column of the data grid, Location.

Notice that the focus outline appears around the cell that contains the city name.
Press <F2>. The focus outline tightens to surround only the text New York in the cell.

According to the <oj-data-grid> element’s keyboard documentation, use <F2> to make the contents of the cell actionable. The <F2> function key lets you initiate actions supported by the active component. In this case, the cell contains a link to Google Maps that you will activate.
Press <Enter> to activate the New York link. A new browser window opens to a Google Maps page of New York.
Press <Ctrl+F4> to close the Google Maps window.
Press <Esc>. The focus outline widens to surround the cell that contains New York in the third column.

According to the <oj-data-grid> element’s keyboard documentation, use <Esc> to exit actionable mode so that you can continue navigating to other components.
Press <Tab>. Focus moves to the first bar in the bar chart.

The final piece of the accessibility review is the screen-reader validation. The following validation steps are based on using the JAWS screen reader, but the results will be similar if you are using the NVDA screen reader.

In the terminal window, exit the running app by pressing <Ctrl+C>, and, if prompted, enter y.
Start your screen reader and then restart your web app.
```
$ ojet serve
```
Your app will open in your browser automatically; the screen reader will start reading once the page is fully loaded.
Click on the Departments tab in the tab bar. Do not use the mouse after this point.
Press <Ctrl+L> to set focus to the address bar.
Press <Tab>. JAWS reads, “Skip to main content. Same page link.”
Press <Tab>. JAWS says, “Banner region. Toolbar. john.hancock@oracle.com button menu. Press space to activate the menu, then navigate with arrow keys.”
Press <Tab>. JAWS says, “Navigation region tab. Introduction tab selected. 1 of 2.”
Press <Tab>. JAWS says, “Main region tab. Departments tab selected. 4 of 4.”
Press <Tab> to move focus to the film strip. JAWS says, “Accounting. New York. 3 employees. Displaying page 1 of 4.”
Press <Tab> to move focus to the data grid. JAWS says, “This is a data grid with 4 rows and 3 columns. Id. Name. Location.” After reading the column headers, the screen reader reads the databody cells of the table from left to right. Then it reads the current focus, “Row 1. Column 1. Id: 10.”
Press <right arrow>. JAWS says, “Column 2. Name: Accounting.”
Press <right arrow>. JAWS says, “Column 3. Location: New York. Contains controls. You have reached the last column.”
Press <Tab>. JAWS says, “Data visualization: chart. Graphic. Series: Accounting; Group: Department; Value: USD 3,750.00. Graphic.”

Notice that as focus moves among the panels, JAWS gives no indication of the panel headings. There is also no way to scroll the filmstrip from page to page.
Open the departments.html file in your code editor.
- Success Criterion 4.1.2 Name, Role, Value requires that each of the components in the three panels has a label associated with it. The level-4 headings serve as visible labels.
- Success Criterion 2.5.3 Label in Name requires that the entire text of the heading be included in the label. The aria-label attributes added in the following steps 18 through 23 will incorporate the heading text for the panel.

Locate the opening <oj-film-strip> tag and add an aria-label attribute.

<oj-film-strip id="deptFilmstrip"
   max-items-per-page="1"
   aria-label="Departments Film Strip - Use the paging controls in the next region to change pages."
   arrow-visibility="hidden"
   class="demo-stretch-items"
   . . . >

Locate the opening <oj-data-grid> tag and add an aria-label attribute.

<oj-data-grid id="datagrid"
   style="width:100%; min-width: 400px; height:200px;margin-bottom:5px"
   aria-label="Departments Data Grid -- Press enter on the city name to open a google map of the city."
   data="[[dgDataProvider]]"
   header.column.style="[[getCellWidth]]"
   . . . >

Locate the opening <oj-chart> tag and add an aria-label attribute.

<oj-chart id="pieChart"
   type="bar"
   aria-label="Salaries by Department bar chart"
   data="[[chartDataProvider]]"
   animation-on-display="auto"
   animation-on-data-change="auto"
   . . . >

The final change involves the pagination controls for the filmstrip in the middle panel.

Locate the closing </oj-film-strip> and </oj-bind-if> tags.

      </oj-film-strip>
   </div>
</div>
</oj-bind-if>

Add the pagination control and surrounding div elements between the closing </div> and </oj-bind-if> tags.

      </oj-film-strip>
   </div>
</div>
<div class="oj-flex oj-sm-flex-items-initial oj-sm-justify-content-center">
   <div class="oj-flex-item">
      <div style="text-align: center;">
      <div style="display: inline-block;margin-top: 4px;">
         <oj-paging-control id="pagingControl"
            aria-controls="deptFilmstrip"
            data="[[pagingModel]]"
            page-size="0"
            page-options='{"type": "dots"}'>
         </oj-paging-control>
      </div>
      </div>
   </div>
</div>
</oj-bind-if>

Save the file. Your file should look similar to departments-html.txt.
Rerun the screen-reader validation. Ensure that the labels are spoken for the filmstrip, data grid, and chart and that the pagination controls are present underneath the filmstrip.

You have completed the final tutorial in the app accessibility series of learning paths.

More Learning Resources

Explore other labs on docs.oracle.com/learn or access more free learning content on the Oracle Learning YouTube channel. Additionally, visit education.oracle.com/learning-explorer to become an Oracle Learning Explorer.

For product documentation, visit Oracle Help Center.

Title and Copyright Information

Test keyboard navigation in complex Oracle JET components

F34165-02

October 2022