From 876ff0f3ebe38cf154ac5457cd284ad581d71d7d Mon Sep 17 00:00:00 2001
From: Houssam Jelliti <jelitihoussam@gmail.com>
Date: Wed, 8 Mar 2023 00:38:58 +0100
Subject: [PATCH] feat(style.css): enhance single children menu bar items

This commit targets items that act as single children items within a menu bar list, and enhances the styling so that they look and behave as items with a menu dropdown associated with them.
It checks for the "aria-haspopup" attribute set to false and applies the styles.
As I read the code, I found that some CSS rules clash with other rules if I use color variables for states like hover and focus, or if I try to look for a common styles ruleset and I add a selector for it.

I believe what I added is not a good practice and does not follow a pattern because the code base became complicated to debug. In this case, I decided to inherit some styles and apply them to my selectors as I think it's a safe approach.

Fixes #26
---
 docs/index.html.ejs | 3 +++
 style.css           | 5 +++++
 2 files changed, 8 insertions(+)

diff --git a/docs/index.html.ejs b/docs/index.html.ejs
index 0e85264..271aefd 100644
--- a/docs/index.html.ejs
+++ b/docs/index.html.ejs
@@ -197,11 +197,14 @@
                 </blockquote>
 
                 <p>A menu bar consists of menu elements that name menu items and they typically have a dropdown menu associated with them.</p>
+                <p>In case of a menu item as a single children or plain text with no menu dropdown associated with it, use <code>aria-haspopup="false"</code> attribute.</p>
 
                 <p>To create a menu bar we will use the <code>.menu-bar</code> class. </p>
 
                 <%- example(`
                 <ul role="menu-bar">
+                  <li role="menu-item" tabindex="0" aria-haspopup="false">Single Item</li>
+                  <li role="menu-item" tabindex="0" aria-haspopup="false"><a target="_blank" href="https://github.com/sakofchit/system.css">System.css on GitHub</a></li>
                   <li role="menu-item" tabindex="0" aria-haspopup="true">
                     File
                     <ul role="menu">
diff --git a/style.css b/style.css
index e6b82be..1763eb5 100644
--- a/style.css
+++ b/style.css
@@ -637,6 +637,11 @@ ul[role="menu-bar"] > [role="menu-item"]:focus, ul[role="menu-bar"] > [role="men
   color: var(--primary);
   outline: none;
 }
+ul[role="menu-bar"] > [role="menu-item"][aria-haspopup="false"] * {
+  color: inherit;
+  background: inherit;
+  text-decoration: none;
+}
 ul[role="menu"] {
   position: relative;
   min-width: 200px;