change(ContextNavigation): accessibility updates, not restructuring o…

…f the volto component
eea · Mar 28, 2023 · 03fe83d · 03fe83d
1 parent dad8cb6
commit 03fe83d
Show file tree

Hide file tree

Showing 3 changed files with 23 additions and 7 deletions.
diff --git a/src/ui/ContextNavigation/ContextNavigation.stories.jsx b/src/ui/ContextNavigation/ContextNavigation.stories.jsx
@@ -125,14 +125,15 @@ function Template({ ...args }) {
   return (
     <Container>
       <nav className="context-navigation">
-        <div className="context-navigation-header">
+        <div className="context-navigation-header" id="Navigation">
           {args?.header ? <a href="/#">{args?.header}</a> : 'Navigation'}
         </div>
-        <div role="list" className="ui list">
+        <div role="list" className="ui list" aria-labelledby="Navigation">
           {args.sidenavItems &&
             args.sidenavItems.map((element, index) => {
               return (
                 <div
+                  key={index}
                   role="listitem"
                   className={
                     (element.is_current ? 'active ' : '') +
@@ -142,6 +143,7 @@ function Template({ ...args }) {
                 >
                   <div className="content">
                     <a
+                      id={element['@id']}
                       title={element.title}
                       className={
                         element?.items?.length > 0
@@ -155,7 +157,12 @@ function Template({ ...args }) {
                     {element?.items?.length > 0
                       ? element.items.map((subelement, index) => {
                           return (
-                            <div className="list" role="list">
+                            <div
+                              className="list"
+                              role="list"
+                              key={index}
+                              aria-labelledby={element['@id']}
+                            >
                               <div
                                 role="listitem"
                                 className={
@@ -166,6 +173,7 @@ function Template({ ...args }) {
                               >
                                 <div className="content">
                                   <a
+                                    id={subelement['@id']}
                                     title={subelement.title}
                                     className="contenttype-document"
                                     href={subelement.url}
@@ -176,7 +184,12 @@ function Template({ ...args }) {
                                     subelement.items.map(
                                       (subparelement, index) => {
                                         return (
-                                          <div className="list" role="list">
+                                          <div
+                                            className="list"
+                                            role="list"
+                                            key={index}
+                                            aria-labelledby={subelement['@id']}
+                                          >
                                             <div
                                               role="listitem"
                                               className={
@@ -187,6 +200,7 @@ function Template({ ...args }) {
                                             >
                                               <div className="content">
                                                 <a
+                                                  id={subparelement['@id']}
                                                   title={subparelement.title}
                                                   className="contenttype-document"
                                                   href={subparelement.url}

diff --git a/theme/themes/eea/extras/contextNavigation.less b/theme/themes/eea/extras/contextNavigation.less
@@ -24,7 +24,8 @@
   font-weight: @sidenavItemFontWeight;
   color      : @sidenavItemColor;
 
-  &:hover {
+  &:hover,
+  &:focus-visible {
     background: @sidenavItemHoverBackground;
     color     : @sidenavItemHoverColor;
   }
@@ -92,7 +93,8 @@
   color: @sidenavItemActiveColor;
   font-weight: @sidenavItemActiveFontWeight;
 }
-.context-navigation .active.item > .content > a:hover {
+.context-navigation .active.item > .content > a:hover,
+.context-navigation .active.item > .content > a:focus-visible {
   color : @sidenavItemActiveColorHover;
 }
 

diff --git a/theme/themes/eea/extras/contextNavigation.variables b/theme/themes/eea/extras/contextNavigation.variables
@@ -7,7 +7,7 @@
 @sidenavBackground: @grey-0;
 @sidenavMarginRight: @rem-space-4;
 @sidenavPaddingLeft: @rem-space-4;
-@sidenavOverflow: hidden;
+@sidenavOverflow: inherit;
 @sidenavMargin: @rem-space-8 auto;
 
 /* Header */