Editor Menubar Example: Visual design does not distinguish between me…

…nuitemcheckbox and menuitemradio elements w3c#605
carmacleod · Aug 22, 2018 · e7a89e4 · e7a89e4
1 parent 3aeacfc
commit e7a89e4
Show file tree

Hide file tree

Showing 5 changed files with 19 additions and 3 deletions.
diff --git a/examples/menubar/menubar-2/css/menubarAction.css b/examples/menubar/menubar-2/css/menubarAction.css
@@ -90,17 +90,33 @@ ul[role="menubar"] [role="menu"] [role="menuitemradio"]:focus {
 }
 
 ul[role="menubar"] [role="menuitemcheckbox"][aria-checked='true'],
-ul[role="menubar"] [role="menuitemradio"][aria-checked='true'] {
+ul[role="menubar"] [role="menuitemradio"][aria-checked='true'],
+ul[role="menubar"] [role="menuitemcheckbox"][aria-checked='false'],
+ul[role="menubar"] [role="menuitemradio"][aria-checked='false'] {
   padding-left: 0.5em;
   padding-right: 1.25em;
 }
 
-ul[role="menubar"] [role="menuitemcheckbox"][aria-checked='true']:before,
-ul[role="menubar"] [role="menuitemradio"][aria-checked='true']:before {
+ul[role="menubar"] [role="menuitemcheckbox"][aria-checked='true']:before {
   content: url('../images/check-brown.png');
   padding-right: 0.3em;
 }
 
+ul[role="menubar"] [role="menuitemcheckbox"][aria-checked='false']:before {
+  content: url('../images/box-brown.png');
+  padding-right: 0.3em;
+}
+
+ul[role="menubar"] [role="menuitemradio"][aria-checked='true']:before {
+  content: url('../images/dot-brown.png');
+  padding-right: 0.3em;
+}
+
+ul[role="menubar"] [role="menuitemradio"][aria-checked='false']:before {
+  content: url('../images/circle-brown.png');
+  padding-right: 0.3em;
+}
+
 
 /*
 * Text area styles

diff --git a/examples/menubar/menubar-2/images/box-brown.png b/examples/menubar/menubar-2/images/box-brown.png
diff --git a/examples/menubar/menubar-2/images/check-brown.png b/examples/menubar/menubar-2/images/check-brown.png
diff --git a/examples/menubar/menubar-2/images/circle-brown.png b/examples/menubar/menubar-2/images/circle-brown.png
diff --git a/examples/menubar/menubar-2/images/dot-brown.png b/examples/menubar/menubar-2/images/dot-brown.png