[tag] fixed interactive, role and examples with list of tags

semrush · Jul 10, 2024 · d0703fc · d0703fc
1 parent 7b340b5
commit d0703fc
Show file tree

Hide file tree

Showing 4 changed files with 39 additions and 16 deletions.
diff --git a/semcore/tag/src/Tag.jsx b/semcore/tag/src/Tag.jsx
@@ -122,14 +122,17 @@ class RootTag extends Component {
     const { focusable } = this.state;
     const id = outerId || `igc-${uid}-tag`;
 
+    const isInteractive = !disabled && interactive && focusable === 'container';
+
     return sstyled(styles)(
       <STag
         render={Box}
         id={id}
-        use:interactive={!disabled && interactive}
+        use:interactive={isInteractive}
         tag-color={resolveColor(color)}
         onKeyDown={this.handleKeyDown}
-        use:tabIndex={interactive && focusable === 'container' ? 0 : -1}
+        use:tabIndex={isInteractive ? 0 : -1}
+        role={isInteractive ? 'button' : undefined}
       >
         {addonLeft ? <Tag.Addon tag={addonLeft} /> : null}
         {addonTextChildren(Children, Tag.Text, Tag.Addon)}

diff --git a/website/docs/components/tag/examples/grouping_tags_less.tsx b/website/docs/components/tag/examples/grouping_tags_less.tsx
@@ -0,0 +1,21 @@
+import React from 'react';
+import Tag from 'intergalactic/tag';
+import { Flex } from 'intergalactic/flex-box';
+
+const Demo = () => {
+  return (
+      <Flex aria-label={'Social media'} gap={1}>
+        <Tag size={'l'} color={'blue-500'}>
+          Instagram
+        </Tag>
+        <Tag size={'l'} color={'blue-500'}>
+          Facebook
+        </Tag>
+        <Tag size={'l'} color={'blue-500'}>
+          LinkedIn
+        </Tag>
+      </Flex>
+  );
+};
+
+export default Demo;
diff --git a/...components/tag/examples/grouping_tags.tsx → ...nents/tag/examples/grouping_tags_more.tsx b/...components/tag/examples/grouping_tags.tsx → ...nents/tag/examples/grouping_tags_more.tsx
@@ -4,18 +4,6 @@ import { Flex } from 'intergalactic/flex-box';
 
 const Demo = () => {
   return (
-    <Flex direction='column'>
-      <Flex aria-label={'Social media'} gap={1}>
-        <Tag size={'l'} color={'blue-500'}>
-          Instagram
-        </Tag>
-        <Tag size={'l'} color={'blue-500'}>
-          Facebook
-        </Tag>
-        <Tag size={'l'} color={'blue-500'}>
-          LinkedIn
-        </Tag>
-      </Flex>
       <Flex tag={'ul'} aria-label={'Search engines'} gap={1}>
         <Tag tag={'li'} size={'l'}>
           Google
@@ -33,7 +21,6 @@ const Demo = () => {
           WolframAlpha
         </Tag>
       </Flex>
-    </Flex>
   );
 };
 

diff --git a/website/docs/components/tag/tag-code.md b/website/docs/components/tag/tag-code.md
@@ -35,13 +35,25 @@ We recommend to use colors with 500 tone since they have the necessary contrast
 ## Grouping tags
 
 If you need to render several tags, combine them into a group with a meaningful accessible name.
+
+#### Less than 5 tags
 If the number of tags is less than 5, add `role="group"` to the parent element.
+
+::: sandbox
+
+<script lang="tsx">
+  export Demo from './examples/grouping_tags_less.tsx';
+</script>
+
+:::
+##
+#### 5 tags or more
 If the number of tags is 5 or more, wrap them in a `ul` list, with each `Tag` as a `li` element.
 
 ::: sandbox
 
 <script lang="tsx">
-  export Demo from './examples/grouping_tags.tsx';
+  export Demo from './examples/grouping_tags_more.tsx';
 </script>
 
 :::