fix(designer-ui): Convert tokenpickeroptions to ul (#4396)

Convert tokenpickeroptions to ul Co-authored-by: Ram Gupta <ramgup@microsoft.com>
Azure · Mar 20, 2024 · 45b56ce · 45b56ce
1 parent 650f736
commit 45b56ce
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 15 deletions.
diff --git a/libs/designer-ui/src/lib/tokenpicker/tokenpicker.less b/libs/designer-ui/src/lib/tokenpicker/tokenpicker.less
@@ -105,6 +105,9 @@
   display: flex;
   flex-direction: column;
   padding: 0;
+  list-style-type: none;
+  margin-block-start: 0;
+  margin-block-end: 0;
   .msla-token-picker-section-option {
     background: none;
     border: none;

diff --git a/libs/designer-ui/src/lib/tokenpicker/tokenpickersection/tokenpickeroption.tsx b/libs/designer-ui/src/lib/tokenpicker/tokenpickersection/tokenpickeroption.tsx
@@ -196,29 +196,31 @@ export const TokenPickerOptions = ({
               </button>
             )}
           </div>
-          <div className="msla-token-picker-section-options">
+          <ul className="msla-token-picker-section-options" aria-label={section.label}>
             {getReducedTokenList(!searchQuery ? section.tokens : filteredTokens, {
               hasSearchQuery: !!searchQuery,
               maxRowsShown,
               showAllOptions: !moreOptions,
             }).map((token, j) => (
-              <button
-                className="msla-token-picker-section-option"
-                data-automation-id={`msla-token-picker-section-option-${j}`}
-                key={`token-picker-option-${j}`}
-                onClick={() => handleTokenClicked(token)}
-              >
-                <div className="msla-token-picker-section-option-text">
-                  <div className="msla-token-picker-option-inner">
-                    <div className="msla-token-picker-option-title">{token.title}</div>
-                    <div className="msla-token-picker-option-description" title={token.description}>
-                      {token.description}
+              <li key={`token-picker-option-li-${j}`}>
+                <button
+                  className="msla-token-picker-section-option"
+                  data-automation-id={`msla-token-picker-section-option-${j}`}
+                  key={`token-picker-option-${j}`}
+                  onClick={() => handleTokenClicked(token)}
+                >
+                  <div className="msla-token-picker-section-option-text">
+                    <div className="msla-token-picker-option-inner">
+                      <div className="msla-token-picker-option-title">{token.title}</div>
+                      <div className="msla-token-picker-option-description" title={token.description}>
+                        {token.description}
+                      </div>
                     </div>
                   </div>
-                </div>
-              </button>
+                </button>
+              </li>
             ))}
-          </div>
+          </ul>
         </>
       ) : null}
     </>