feat(actionsheet): update rendering to comply with accessibility role

telerik · Oct 20, 2022 · 3962cc9 · 3962cc9
1 parent 606e880
commit 3962cc9
Show file tree

Hide file tree

Showing 4 changed files with 10 additions and 6 deletions.
diff --git a/packages/default/scss/action-sheet/_layout.scss b/packages/default/scss/action-sheet/_layout.scss
@@ -141,6 +141,8 @@
     .k-actionsheet-item {
         padding: 0;
         box-sizing: border-box;
+        display: flex;
+        flex-flow: row nowrap;
     }
     .k-actionsheet-action {
         margin: 0;

diff --git a/packages/fluent/scss/action-sheet/_layout.scss b/packages/fluent/scss/action-sheet/_layout.scss
@@ -160,6 +160,8 @@
     .k-actionsheet-item {
         padding: 0;
         box-sizing: border-box;
+        display: flex;
+        flex-flow: row nowrap;
 
         &:focus,
         &.k-focus {

diff --git a/packages/html/src/action-sheet/actionsheet-item.tsx b/packages/html/src/action-sheet/actionsheet-item.tsx
@@ -32,7 +32,7 @@ export class ActionSheetItem extends React.Component<ActionSheetItemProps> {
 
 
         return (
-            <li
+            <span
                 className={classNames(
                     className,
                     'k-actionsheet-item',
@@ -44,16 +44,16 @@ export class ActionSheetItem extends React.Component<ActionSheetItemProps> {
                     }
                 )}>
                 {!children && (text !== '' || description !== '' || iconName !== '') && <>
-                    <a href="#" className="k-actionsheet-action">
+                    <span className="k-actionsheet-action">
                         { iconName !== '' && <span className="k-icon-wrap"><Icon className="k-actionsheet-item-icon" name={iconName} /></span> }
                         <span className="k-actionsheet-item-text">
                             { text !== '' && <span className="k-actionsheet-item-title">{text}</span> }
                             { description !== '' && <span className="k-actionsheet-item-description">{description}</span> }
                         </span>
-                    </a>
+                    </span>
                 </>}
                 {children}
-            </li>
+            </span>
         );
     }
 }
diff --git a/packages/html/src/action-sheet/actionsheet-items.tsx b/packages/html/src/action-sheet/actionsheet-items.tsx
@@ -16,12 +16,12 @@ export class ActionSheetItems extends React.Component<ActionSheetItemsProps> {
         } = this.props;
 
         return (
-            <ul className={classNames(
+            <div className={classNames(
                 'k-list-ul',
                 className
             )}>
                 {children}
-            </ul>
+            </div>
         );
     }
 }