Skip to content

Commit

Permalink
Editor Menubar Example: Improve Editorial Consistency and Fix Broken …
Browse files Browse the repository at this point in the history 
…Links

For issue #144, made the following changes to the editor menubar example in examples/menubar/menubar-2/menubar-2.html.

1. Clarified and simplified introduction.
2. Moved Notes from example section in to a separate accessibility features section to be consistent with the example template.
3. Removed use of term "popup" and used "submenu" as agreed in issue #268.
4. Editorial revisions to keyboard tables.
5. Editorial revisions to role, state, and property tables.
6. Fix broken links to source files.
  • Loading branch information
@mcking65
mcking65 committed Jun 21, 2017
1 parent 0c8582a commit ff0b869
Showing 1 changed file with 50 additions and 76 deletions.
126 changes: 50 additions & 76 deletions examples/menubar/menubar-2/menubar-2.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,10 +11,9 @@
<script src="../../js/highlight.pack.js"></script>
<script src="../../js/app.js"></script>

<!-- CSS and javascript for this example. -->
<link href="css/menubarAction.css" rel="stylesheet">

<script src="js/styleManager.js" type="text/javascript"></script>

<script src="js/MenubarAction.js" type="text/javascript"></script>
<script src="js/MenubarItemAction.js" type="text/javascript"></script>
<script src="js/PopupMenuAction.js" type="text/javascript"></script>
Expand All @@ -32,14 +31,12 @@ <h1>Editor Menubar Example</h1>
The following example demonstrates using the
<a href="../../../#menu">menubar design pattern</a>
to provide access to sets of actions.
Each item in this example menubar represents a category of text
formatting commands. The formatting commands are revealed in popup menus that can be opened from
items in the menubar. This example also demonstrates <code>menuitemradio</code> and <code>menuitemcheckbox</code> elements.
Each item in the below menubar identifies a category of text formatting actions that can be executed from its submenu.
The submenus also demonstrate <code>menuitemradio</code> and <code>menuitemcheckbox</code> elements.
</p>

<p>Similar examples include: </p>
<ul>
<li><a href="../menubar-1/menubar-1.html">Navigation Menubar Example</a>: Example of a menubar with popup menus with navigational links.</li>
<li><a href="../menubar-1/menubar-1.html">Navigation Menubar Example</a>: A menubar that presents site navigation menus.</li>
</ul>

<section id="code-ex-1">
Expand Down Expand Up @@ -126,18 +123,19 @@ <h2 id="ex1_label">Example</h2>

</div>
<div role="separator" id="ex1_end_sep" aria-labelledby="ex1_end_sep ex1_label" aria-label="End of" ></div>
<h4>Notes</h4>
</section>

<section>
<h2>Accessibility Features</h2>
<ol>
<li>Menu radio buttons and checkboxes indicate the current format settings.</li>
<li>Users of assistive technologies can identify which format settings are selected because they are represented by menu item radio and menu item checkbox elements that have a checked state.</li>
<li>Disabled menu items are demonstrated in the font size menu, which includes two disabled menuitems .</li>
<li>CSS <code>:after</code> is used to render the down arrow in a menubar item using the CSS <code>content</code> property string using entity values.</li>
<li>CSS <code>:before</code> is used to render checks using the CSS <code>content</code> property string using entity values on <code>menuritemadio</code> and <code>menuitemcheckbox</code> items.</li>
<li>The down arrow and checked icons are made compatible with high contrast mode and hidden from screen readers by using the CSS <code>content</code> property to render images.</li>
</ol>
</section>

<section>
<h2 id="kbd_label">Keyboard Support</h2>

<h3 id="kbd1_label">Menubar</h3>
<table aria-labelledby="kbd1_label kbd_label" class="def">
<thead>
Expand All @@ -149,9 +147,9 @@ <h3 id="kbd1_label">Menubar</h3>
<tbody>
<tr>
<th>
<kbd>Space or Enter</kbd>
<kbd>Space</kbd><br><kbd>Enter</kbd>
</th>
<td>Opens popup menu and places focus on the first item in the popup.</td>
<td>Opens submenu and moves focus to first item in the submenu.</td>
</tr>
<tr>
<th>
Expand Down Expand Up @@ -179,13 +177,13 @@ <h3 id="kbd1_label">Menubar</h3>
<th>
<kbd>Down Arrow</kbd>
</th>
<td>Opens popup menu and places focus on the first item in the popup.</td>
<td>Opens submenu and moves focus to first item in the submenu.</td>
</tr>
<tr>
<th>
<kbd>Up Arrow</kbd>
</th>
<td>Opens popup menu and places focus on the last item in the popup.</td>
<td>Opens submenu and moves focus to last item in the submenu.</td>
</tr>
<tr>
<th>
Expand Down Expand Up @@ -213,7 +211,7 @@ <h3 id="kbd1_label">Menubar</h3>
</tbody>
</table>

<h3 id="kbd2_label">Popup</h3>
<h3 id="kbd2_label">Submenu</h3>
<table aria-labelledby="kbd2_label kbd_label" class="def">
<thead>
<tr>
Expand All @@ -224,23 +222,18 @@ <h3 id="kbd2_label">Popup</h3>
<tbody>
<tr>
<th>
<kbd>Space or Enter</kbd>
<kbd>Space</kbd><br><kbd>Enter</kbd>
</th>
<td>
<ul>
<li>Executes action or command, e.g., bolds text, change font.</li>
<li>Implements optional behavior of a popup menu staying open after activating a <code>menuitemradio</code> or <code>menuitemcheckbox</code>. This allows for users to visually see the change in state before they close the popup menu with an additional keyboard command.</li>
</ul>
</td>
<td>Activates menu item, causing action to be executed, e.g., bold text, change font. </td>
</tr>
<tr>
<th>
<kbd>Escape</kbd>
</th>
<td>
<ul>
<li>Closes popup menu.</li>
<li>Places focus on parent menubar item.</li>
<li>Closes submenu.</li>
<li>Moves focus to parent menubar item.</li>
</ul>
</td>
</tr>
Expand All @@ -250,9 +243,9 @@ <h3 id="kbd2_label">Popup</h3>
</th>
<td>
<ul>
<li>Closes popup menu.</li>
<li>Closes submenu.</li>
<li>Moves focus to next item in the menubar.</li>
<li>Opens popup menu for newly focused item, leaving focus in the menubar.</li>
<li>Opens submenu of newly focused menubar item, keeping focus on that parent menubar item.</li>
</ul>
</td>
</tr>
Expand All @@ -262,9 +255,9 @@ <h3 id="kbd2_label">Popup</h3>
</th>
<td>
<ul>
<li>Closes popup menu.</li>
<li>Closes submenu.</li>
<li>Moves focus to previous item in the menubar.</li>
<li>Opens popup menu for newly focused item, leaving focus in the menubar.</li>
<li>Opens submenu of newly focused menubar item, keeping focus on that parent menubar item.</li>
</ul>
</td>
</tr>
Expand All @@ -274,7 +267,7 @@ <h3 id="kbd2_label">Popup</h3>
</th>
<td>
<ul>
<li>Moves focus to the next item in the popup.</li>
<li>Moves focus to the next item in the submenu.</li>
<li>If focus is on the last item, moves focus to the first item.</li>
</ul>
</td>
Expand All @@ -285,7 +278,7 @@ <h3 id="kbd2_label">Popup</h3>
</th>
<td>
<ul>
<li>Moves focus to previous item in the popup.</li>
<li>Moves focus to previous item in the submenu.</li>
<li>If focus is on the first item, moves focus to the last item.</li>
</ul>
</td>
Expand All @@ -294,13 +287,13 @@ <h3 id="kbd2_label">Popup</h3>
<th>
<kbd>Home</kbd>
</th>
<td>Moves focus to the first item in the popup.</td>
<td>Moves focus to the first item in the submenu.</td>
</tr>
<tr>
<th>
<kbd>End</kbd>
</th>
<td>Moves focus to the last item in the popup.</td>
<td>Moves focus to the last item in the submenu.</td>
</tr>
<tr>
<th>
Expand All @@ -319,7 +312,6 @@ <h3 id="kbd2_label">Popup</h3>

<section>
<h2 id="rps_label">Role, Property, State, and Tabindex Attributes</h2>

<h3 id="rps1_label">Menubar</h3>
<table aria-labelledby="rps1_label rps_label" class="data attributes">
<thead>
Expand All @@ -341,12 +333,8 @@ <h3 id="rps1_label">Menubar</h3>
</td>
<td>
<ul>
<li>
Identifies the <code>ul</code> element as a container for set of <code>menuitem</code> widgets associated with the menubar.
</li>
<li>
Is not focusable because focus is managed using <a href="../../../#kbd_roving_tabindex">roving tabindex</a>,
</li>
<li>Identifies the element as a <code>menubar</code> container for a set of <code>menuitem</code> elements.</li>
<li>Is not focusable because focus is managed using <a href="../../../#kbd_roving_tabindex">roving tabindex.</a></li>
</ul>
</td>
</tr>
Expand Down Expand Up @@ -378,7 +366,7 @@ <h3 id="rps1_label">Menubar</h3>
<code>li</code>
</td>
<td>
Identifies the <code>li</code> element as a menu item within the menubar widget.
Identifies the element as a menu item within the menubar.
</td>
</tr>
<tr>
Expand Down Expand Up @@ -415,8 +403,7 @@ <h3 id="rps1_label">Menubar</h3>
When the page loads, the first item in the menubar has <code>tabindex=&quot;0&quot;</code>.
</li>
<li>
Focus is managed using <a href="../../../#kbd_roving_tabindex">roving tabindex</a>,
so the most recently focused item will be in the page <kbd>Tab</kbd> sequence.
Focus is managed using <a href="../../../#kbd_roving_tabindex">roving tabindex</a>.
</li>
</ul>
</td>
Expand All @@ -430,7 +417,7 @@ <h3 id="rps1_label">Menubar</h3>
<code>li</code>
</td>
<td>
Identifies the <code>menuitem</code> as having a child popup menu.
Indicates that the <code>menuitem</code> has a submenu.
</td>
</tr>
<tr>
Expand All @@ -442,7 +429,7 @@ <h3 id="rps1_label">Menubar</h3>
<code>li</code>
</td>
<td>
Indicates the child popup menu is open.
Indicates the submenu is open.
</td>
</tr>
<tr>
Expand All @@ -454,13 +441,12 @@ <h3 id="rps1_label">Menubar</h3>
<code>li</code>
</td>
<td>
Indicates the child popup menu is closed.
Indicates the submenu is closed.
</td>
</tr>
</tbody>
</table>

<h3 id="rps2_label">Popup Menu</h3>
<h3 id="rps2_label">Submenu</h3>
<table aria-labelledby="rps2_label rps_label" class="data attributes">
<thead>
<tr>
Expand All @@ -482,10 +468,10 @@ <h3 id="rps2_label">Popup Menu</h3>
<td>
<ul>
<li>
Identifies the <code>ul</code> element as a container for set of <code>menuitem</code> widgets associated with the menu.
Identifies the element as a menu container for a set of <code>menuitem</code> elements.
</li>
<li>
Is not focusable because focus is managed using <a href="../../../#kbd_roving_tabindex">roving tabindex</a>,
Is not focusable because focus is managed using <a href="../../../#kbd_roving_tabindex">roving tabindex.</a>
</li>
</ul>
</td>
Expand All @@ -511,7 +497,7 @@ <h3 id="rps2_label">Popup Menu</h3>
<code>li</code>
</td>
<td>
Identifies the <code>li</code> element as a menu item in the popup menu.
Identifies the element as an item in the submenu.
</td>
</tr>
<tr>
Expand All @@ -535,7 +521,7 @@ <h3 id="rps2_label">Popup Menu</h3>
<code>li</code>
</td>
<td>
Identifies the <code>li</code> element as a menuitemcheckbox widget.
Identifies the element as a <code>menuitemcheckbox</code>.
</td>
</tr>
<tr>
Expand Down Expand Up @@ -564,10 +550,7 @@ <h3 id="rps2_label">Popup Menu</h3>
Indicates that the <code>menuitemcheckbox</code> is checked.
</li>
<li>
The visual state of the selection is synchronized with the <code>aria-checked</code>
value using CSS attribute selectors, e.g., [aria-checked=&quot;true&quot;],
the CSS pseudo selector <code>:before</code>,
and the <code>content</code> property.
The visual appearance of the selected state is synchronized with the <code>aria-checked</code> value using CSS attribute selectors.
</li>
</ul>
</td>
Expand All @@ -586,10 +569,7 @@ <h3 id="rps2_label">Popup Menu</h3>
Indicates that the <code>menuitemcheckbox</code> is <strong>NOT</strong> checked.
</li>
<li>
The visual state of the selection is synchronized with the <code>aria-checked</code>
value using CSS attribute selectors, e.g., [aria-checked=&quot;true&quot;],
the CSS pseudo selector <code>:before</code>,
and the <code>content</code> property.
The visual appearance of the selected state is synchronized with the <code>aria-checked</code> value using CSS attribute selectors.
</li>
</ul>
</td>
Expand All @@ -605,7 +585,7 @@ <h3 id="rps2_label">Popup Menu</h3>
<td>
<ul>
<li>
Identifies the <code>ul</code> element as a container for a set of <code>menuitemradio</code> widgets.
Identifies the element as a container for a set of <code>menuitemradio</code> elements.
</li>
<li>
Enables browsers to compute values of <code>aria-setsize</code> and <code>aria-posinset</code>.
Expand All @@ -624,11 +604,11 @@ <h3 id="rps2_label">Popup Menu</h3>
<td>
<ul>
<li>
Identifies the <code>li</code> element as a <code>menuitemradio</code> widget.
Identifies the element as a <code>menuitemradio</code> element.
</li>
<li>
In this example the menuitemradio group is defined by either <code>ul[role=&quot;menu&quot;]</code>
or <code>[role=&quot;group&quot;]</code>.
When all items in a submenu are members of the same radio group,
the group is defined by the <code>menu</code> element; a <code>group</code> element is not necessary.
</li>
</ul>
</td>
Expand Down Expand Up @@ -659,10 +639,7 @@ <h3 id="rps2_label">Popup Menu</h3>
Indicates the <code>menuitemradio</code> is checked.
</li>
<li>
The visual state of the selection is synchronized with the <code>aria-checked</code>
value using CSS attribute selectors, e.g., [aria-checked=&quot;true&quot;],
the CSS pseudo selector <code>:before</code>,
and the <code>content</code> property.
The visual appearance of the selected state is synchronized with the <code>aria-checked</code> value using CSS attribute selectors.
</li>
</ul>
</td>
Expand All @@ -681,10 +658,7 @@ <h3 id="rps2_label">Popup Menu</h3>
Indicates that the <code>menuitemradio</code> is <strong>NOT</strong> checked.
</li>
<li>
The visual state of the selection is synchronized with the <code>aria-checked</code>
value using CSS attribute selectors, e.g., [aria-checked=&quot;true&quot;],
the CSS pseudo selector <code>:before</code>,
and the <code>content</code> property.
The visual appearance of the selected state is synchronized with the <code>aria-checked</code> value using CSS attribute selectors.
</li>
</ul>
</td>
Expand All @@ -710,10 +684,10 @@ <h2>Javascript and CSS Source Code</h2>
Javascript: <a href="js/PopupMenuAction.js" type="text/javascript">PopupMenuAction.js</a>
</li>
<li>
Javascript: <a href="js/MenuItemAction.js" type="text/javascript">MenuItemAction.js</a>
Javascript: <a href="js/PopupMenuItemAction.js" type="text/javascript">PopupMenuItemAction.js</a>
</li>
<li>
Javascript: <a href="js/TextStyling.js" type="text/javascript">TextStyling.js</a>
Javascript: <a href="js/styleManager.js" type="text/javascript">styleManager.js</a>
</li>
</ul>
</section>
Expand Down

0 comments on commit ff0b869

Please sign in to comment.