Skip to content

Commit

Permalink
Editor Menubar Example: Remove rel from <ul> and <li> elements …
Browse files Browse the repository at this point in the history 
…(pull #1032)

Modifies examples/menubar/menubar-2/menubar-2.html for issue #822:
* Removes rel attributes from ul/li elements.
* Adds a data attribute named data-option for the metadata previously specified in rel.
  • Loading branch information
@carmacleod @mcking65
carmacleod authored and mcking65 committed Jul 1, 2019
1 parent ee13f15 commit eab169c
Show file tree
Hide file tree
Showing 3 changed files with 14 additions and 14 deletions.
6 changes: 3 additions & 3 deletions examples/menubar/menubar-2/js/PopupMenuAction.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -100,7 +100,7 @@ PopupMenuAction.prototype.init = function () {

PopupMenuAction.prototype.updateMenuStates = function () {

var item = this.domNode.querySelector('[rel="font-larger"]');
var item = this.domNode.querySelector('[data-option="font-larger"]');
if (item) {
if (this.actionManager.isMaxFontSize()) {
item.setAttribute('aria-disabled', 'true');
Expand All @@ -110,7 +110,7 @@ PopupMenuAction.prototype.updateMenuStates = function () {
}
}

var item = this.domNode.querySelector('[rel="font-smaller"]');
var item = this.domNode.querySelector('[data-option="font-smaller"]');
if (item) {
if (this.actionManager.isMinFontSize()) {
item.setAttribute('aria-disabled', 'true');
Expand All @@ -123,7 +123,7 @@ PopupMenuAction.prototype.updateMenuStates = function () {
// Update the radio buttons for font, in case they were updated using the larger
// smaller font menu items

var rbs = this.domNode.querySelectorAll('[rel="font-size"] [role=menuitemradio]');
var rbs = this.domNode.querySelectorAll('[data-option="font-size"] [role=menuitemradio]');

for (var i = 0; i < rbs.length; i++) {
var rb = rbs[i];
Expand Down
4 changes: 2 additions & 2 deletions examples/menubar/menubar-2/js/PopupMenuItemAction.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -59,14 +59,14 @@ MenuItem.prototype.activateMenuitem = function (node) {

var role = node.getAttribute('role');
var value = node.textContent;
var option = node.getAttribute('rel');
var option = node.getAttribute('data-option');
var item;
// flag is used to signal whether a menu should close or not
// i.e. don't close if checkbox or radio menuitem is toggled
var flag = true;

if (typeof option !== 'string') {
option = node.parentNode.getAttribute('rel');
option = node.parentNode.getAttribute('data-option');
}

if (role === 'menuitem') {
Expand Down
18 changes: 9 additions & 9 deletions examples/menubar/menubar-2/menubar-2.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -54,7 +54,7 @@ <h2 id="ex1_label">Example</h2>
<ul id="menubar1" role="menubar" aria-label="Text Formatting">
<li role="none">
<a role="menuitem" aria-haspopup="true" aria-expanded="false" href="#">Font</a>
<ul role="menu" rel="font-family" aria-label="Font" >
<ul role="menu" data-option="font-family" aria-label="Font" >
<li role="menuitemradio" aria-checked="true">Sans-serif</li>
<li role="menuitemradio" aria-checked="false">Serif</li>
<li role="menuitemradio" aria-checked="false">Monospace</li>
Expand All @@ -64,19 +64,19 @@ <h2 id="ex1_label">Example</h2>
<li role="none">
<a role="menuitem" aria-haspopup="true" aria-expanded="false" href="#">Style/Color</a>
<ul role="menu" aria-label="Style/Color">
<li role="menuitemcheckbox" rel="font-bold" aria-checked="false">Bold</li>
<li role="menuitemcheckbox" rel="font-italic" aria-checked="false">Italic</li>
<li role="menuitemcheckbox" data-option="font-bold" aria-checked="false">Bold</li>
<li role="menuitemcheckbox" data-option="font-italic" aria-checked="false">Italic</li>
<li role="separator"></li>
<li>
<ul role="group" rel="font-color" aria-label="Text Color">
<ul role="group" data-option="font-color" aria-label="Text Color">
<li role="menuitemradio" aria-checked="true">Black</li>
<li role="menuitemradio" aria-checked="false">Blue</li>
<li role="menuitemradio" aria-checked="false">Red</li>
<li role="menuitemradio" aria-checked="false">Green</li>
</ul>
<li role="separator"></li>
<li>
<ul role="group" rel="text-decoration" aria-label="Text Decoration">
<ul role="group" data-option="text-decoration" aria-label="Text Decoration">
<li role="menuitemradio" aria-checked="true">None</li>
<li role="menuitemradio" aria-checked="false">Overline</li>
<li role="menuitemradio" aria-checked="false">Line-through</li>
Expand All @@ -87,7 +87,7 @@ <h2 id="ex1_label">Example</h2>

<li role="none">
<a role="menuitem" aria-haspopup="true" aria-expanded="false" href="#">Text Align</a>
<ul role="menu" rel="text-align" aria-label="Text Align">
<ul role="menu" data-option="text-align" aria-label="Text Align">
<li role="menuitemradio" aria-checked="true">Left</li>
<li role="menuitemradio" aria-checked="false">Center</li>
<li role="menuitemradio" aria-checked="false">Right</li>
Expand All @@ -98,11 +98,11 @@ <h2 id="ex1_label">Example</h2>
<li role="none">
<a role="menuitem" aria-haspopup="true" aria-expanded="false" href="#">Size</a>
<ul role="menu" aria-label="Size" >
<li role="menuitem" rel="font-smaller" aria-disabled="false">Smaller</li>
<li role="menuitem" rel="font-larger" aria-disabled="false">Larger</li>
<li role="menuitem" data-option="font-smaller" aria-disabled="false">Smaller</li>
<li role="menuitem" data-option="font-larger" aria-disabled="false">Larger</li>
<li role="separator"></li>
<li>
<ul role="group" rel="font-size" aria-label="Font Sizes">
<ul role="group" data-option="font-size" aria-label="Font Sizes">
<li role="menuitemradio" aria-checked="false">X-Small</li>
<li role="menuitemradio" aria-checked="false">Small</li>
<li role="menuitemradio" aria-checked="true">Medium</li>
Expand Down

0 comments on commit eab169c

Please sign in to comment.