[86bydf9ff] Update/tag a11y code (#1496)

Changed tag a11y --------- Co-authored-by: faisne <166654065+sheila-semrush@users.noreply.github.com>
semrush · Jul 10, 2024 · 6db0218 · 6db0218
1 parent 797691c
commit 6db0218
Show file tree

Hide file tree

Showing 21 changed files with 242 additions and 167 deletions.
diff --git a/semcore/inline-edit/CHANGELOG.md b/semcore/inline-edit/CHANGELOG.md
@@ -2,6 +2,12 @@
 
 CHANGELOG.md standards are inspired by [keepachangelog.com](https://keepachangelog.com/en/1.0.0/).
 
+## [4.31.1] - 2024-07-05
+
+### Fixed
+
+- `aria-hidden` was not removed from DOM if the value is `false`.
+
 ## [4.31.0] - 2024-06-26
 
 ### Changed

diff --git a/semcore/inline-edit/src/InlineEdit.tsx b/semcore/inline-edit/src/InlineEdit.tsx
@@ -111,7 +111,7 @@ const Edit: React.FC<AsProps> = (props) => {
       render={FadeInOut}
       visible={visible}
       duration={duration}
-      aria-hidden={!visible}
+      aria-hidden={visible ? undefined : 'true'}
       exiting={!visible}
       ref={ref}
     />,
@@ -141,8 +141,8 @@ const View: React.FC<AsProps> = (props) => {
       preserveNode
       tabIndex={0}
       role='button'
-      aria-hidden={!visible}
-      aria-label={`${props.getI18nText('tapToEdit')}:${textContent}`}
+      aria-hidden={visible ? undefined : 'true'}
+      aria-label={`${props.getI18nText('tapToEdit')}: ${textContent}`}
       onClick={visible ? props.onEdit : undefined}
       onKeyDown={handleKeyDown}
     />,

diff --git a/semcore/inline-edit/src/translations/en.json b/semcore/inline-edit/src/translations/en.json
@@ -1,3 +1,3 @@
 {
-  "tapToEdit": "Tap to edit"
+  "tapToEdit": "Edit"
 }
diff --git a/semcore/notice-global/CHANGELOG.md b/semcore/notice-global/CHANGELOG.md
diff --git a/semcore/tag/CHANGELOG.md b/semcore/tag/CHANGELOG.md
@@ -8,6 +8,12 @@ CHANGELOG.md standards are inspired by [keepachangelog.com](https://keepachangel
 
 - Version minor update due to children dependencies update (`@semcore/icon` [4.39.1 ~> 4.41.0]).
 
+## [5.38.1] - 2024-07-05
+
+### Changed
+
+- Roles for the container and tag content.
+
 ## [5.38.0] - 2024-06-26
 
 ### Changed

diff --git a/.../__tests__/__image_snapshots__/tag-renders-with-focus-ring-when-interactive.png b/.../__tests__/__image_snapshots__/tag-renders-with-focus-ring-when-interactive.png
diff --git a/semcore/tag/__tests__/index.test.tsx b/semcore/tag/__tests__/index.test.tsx
@@ -53,8 +53,8 @@ describe('Tag', () => {
   });
   test.concurrent('Renders with focus ring when interactive', async ({ task }) => {
     const component = (
-      <Tag id='interactive-tag' keyboardFocused interactive>
-        <Tag.Text>Tag name</Tag.Text>
+      <Tag id='interactive-tag' interactive>
+        <Tag.Text keyboardFocused>Tag name</Tag.Text>
         <Tag.Close />
       </Tag>
     );

diff --git a/semcore/tag/src/Tag.jsx b/semcore/tag/src/Tag.jsx
@@ -11,7 +11,6 @@ import uniqueIDEnhancement from '@semcore/utils/lib/uniqueID';
 import keyboardFocusEnhance from '@semcore/utils/lib/enhances/keyboardFocusEnhance';
 
 import style from './style/tag.shadow.css';
-import { callAllEventHandlers } from '@semcore/utils/lib/assignProps';
 
 const legacyThemeRecommendedMigration = {
   primary: {
@@ -71,6 +70,7 @@ class RootTag extends Component {
     return {
       tabIndex: focusable === 'text' && interactive ? 0 : -1,
       id: `${id}-text`,
+      role: focusable === 'text' && interactive ? 'button' : undefined,
     };
   }
   handleCloseMount = () => {
@@ -88,7 +88,6 @@ class RootTag extends Component {
       id: `${id}-clear`,
       'aria-labelledby': `${id}-clear ${id}-text`,
       'aria-label': getI18nText('remove'),
-      'aria-hidden': 'true',
       onMount: this.handleCloseMount,
       onUnmount: this.handleCloseUnmount,
     };
@@ -123,15 +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}
-        role={interactive ? 'button' : undefined}
+        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/semcore/tag/src/style/tag.shadow.css b/semcore/tag/src/style/tag.shadow.css
@@ -57,11 +57,6 @@ STag[interactive][keyboardFocused] {
   z-index: 1;
 }
 
-STag[interactive][keyboardFocused]:has(:focus) {
-  box-shadow: none;
-}
-
-
 STag[disabled] {
   opacity: var(--intergalactic-disabled-opacity, 0.3);
   cursor: default;
@@ -182,7 +177,7 @@ SText {
   position: relative;
 }
 
-STag[interactive] SText[keyboardFocused] {
+SText[keyboardFocused] {
   box-shadow: var(--intergalactic-keyboard-focus, 0px 0px 0px 3px rgba(0, 143, 248, 0.5));
   z-index: 1;
 }
@@ -258,4 +253,4 @@ SClose {
   &:hover path {
     opacity: 1;
   }
-}
+}
diff --git a/semcore/tag/src/translations/en.json b/semcore/tag/src/translations/en.json
@@ -1,3 +1,3 @@
 {
-  "remove": "tap to remove tag"
+  "remove": "Remove"
 }
diff --git a/website/docs/.vitepress/theme/style.css b/website/docs/.vitepress/theme/style.css
@@ -607,6 +607,10 @@ h1[class], h2[class], h3[class], h4[class], h5[class], h6[class] {
   color: var(--vp-c-indigo-1);
 }
 
+.vp-doc li[class] + li[class] {
+  margin: unset;
+}
+
 .dark .vp-doc a:not([class]):hover {
   color: var(--vp-c-indigo-2);
 }

diff --git a/website/docs/components/inline-edit/examples/editable_tag.tsx b/website/docs/components/inline-edit/examples/editable_tag.tsx
@@ -16,11 +16,9 @@ const Demo = () => {
   return (
     <>
       <InlineEdit editable={editable} onEditableChange={setEditable}>
-        <InlineEdit.View pr={2}>
-          <Tag interactive size='l'>
-            <Tag.Text>{value}</Tag.Text>
-            <Tag.Close onClick={(e) => e.stopPropagation()} />
-          </Tag>
+        <InlineEdit.View pr={2} tag={Tag} interactive size='l'>
+          <Tag.Text>{value}</Tag.Text>
+          <Tag.Close onClick={(e) => e.stopPropagation()} />
         </InlineEdit.View>
         <InlineEdit.Edit>
           <InlineInput onConfirm={handleValue} onCancel={resetEditable}>

diff --git a/website/docs/components/tag/examples/custom_tag_color.tsx b/website/docs/components/tag/examples/custom_tag_color.tsx
@@ -4,14 +4,9 @@ import SmileHappyM from 'intergalactic/icon/SmileHappy/m';
 
 const Demo = () => {
   return (
-    <>
-      <Tag size='l' theme='primary' color='violet-500'>
-        <Tag.Addon>
-          <SmileHappyM />
-        </Tag.Addon>
-        <Tag.Text>Tag</Tag.Text>
-      </Tag>
-    </>
+    <Tag color='violet-500' size='l' addonLeft={SmileHappyM}>
+      Tag
+    </Tag>
   );
 };
 

diff --git a/website/docs/components/tag/examples/editing_tag.tsx b/website/docs/components/tag/examples/editing_tag.tsx
@@ -15,15 +15,15 @@ const Demo = () => {
 
   return (
     <>
-      <InlineEdit w={150} editable={editable} onEditableChange={setEditable}>
-        <InlineEdit.View>
-          <Tag interactive size='l'>
-            <Tag.Text>{value}</Tag.Text>
-          </Tag>
+      <InlineEdit editable={editable} onEditableChange={setEditable}>
+        <InlineEdit.View pr={2} tag={Tag} interactive size='l'>
+          <Tag.Text>{value}</Tag.Text>
         </InlineEdit.View>
         <InlineEdit.Edit>
           <InlineInput onConfirm={handleValue} onCancel={resetEditable}>
-            <InlineInput.Value defaultValue={value} />
+            <InlineInput.Value defaultValue={value} autoFocus aria-label='Tag name' />
+            <InlineInput.ConfirmControl />
+            <InlineInput.CancelControl />
           </InlineInput>
         </InlineEdit.Edit>
       </InlineEdit>

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,15 @@
+import React from 'react';
+import Tag from 'intergalactic/tag';
+import { Flex } from 'intergalactic/flex-box';
+
+const Demo = () => {
+  return (
+    <Flex role={'group'} aria-label={'Social media'} gap={1}>
+      <Tag size={'l'}>Instagram</Tag>
+      <Tag size={'l'}>Facebook</Tag>
+      <Tag size={'l'}>LinkedIn</Tag>
+    </Flex>
+  );
+};
+
+export default Demo;
diff --git a/website/docs/components/tag/examples/grouping_tags_more.tsx b/website/docs/components/tag/examples/grouping_tags_more.tsx
@@ -0,0 +1,27 @@
+import React from 'react';
+import Tag from 'intergalactic/tag';
+import { Flex } from 'intergalactic/flex-box';
+
+const Demo = () => {
+  return (
+    <Flex tag={'ul'} aria-label={'Search engines'} gap={1}>
+      <Tag tag={'li'} size={'l'}>
+        Google
+      </Tag>
+      <Tag tag={'li'} size={'l'}>
+        Yahoo
+      </Tag>
+      <Tag tag={'li'} size={'l'}>
+        Bing
+      </Tag>
+      <Tag tag={'li'} size={'l'}>
+        Ask.com
+      </Tag>
+      <Tag tag={'li'} size={'l'}>
+        WolframAlpha
+      </Tag>
+    </Flex>
+  );
+};
+
+export default Demo;
diff --git a/website/docs/components/tag/examples/removing_tag.tsx b/website/docs/components/tag/examples/removing_tag.tsx
@@ -3,7 +3,7 @@ import Tag from 'intergalactic/tag';
 import { Box } from 'intergalactic/flex-box';
 
 const Demo = () => {
-  const [tags, setTags] = React.useState(['Facebook', 'Twitter (X)', 'Instagram']);
+  const [tags, setTags] = React.useState(['Facebook', 'X (Twitter)', 'Instagram']);
 
   const handleEditTag = (e) => {
     const { dataset } = e.currentTarget.parentElement;

diff --git a/website/docs/components/tag/examples/tag_addon.tsx b/website/docs/components/tag/examples/tag_addon.tsx
@@ -1,22 +1,22 @@
 import React from 'react';
 import Tag from 'intergalactic/tag';
+import { Flex } from 'intergalactic/flex-box';
 import SmileHappyM from 'intergalactic/icon/SmileHappy/m';
 import SmileSadM from 'intergalactic/icon/SmileSad/m';
 
 const Demo = () => {
   return (
-    <>
-      <Tag size='l' addonLeft={SmileHappyM} mb={2}>
+    <Flex gap={1}>
+      <Tag size='l' addonLeft={SmileHappyM}>
         Tag
       </Tag>
-      <br />
       <Tag size='l'>
         <Tag.Addon>
           <SmileSadM />
         </Tag.Addon>
         <Tag.Text>Tag</Tag.Text>
       </Tag>
-    </>
+    </Flex>
   );
 };
 

diff --git a/website/docs/components/tag/tag-a11y.md b/website/docs/components/tag/tag-a11y.md
@@ -13,9 +13,9 @@ Table: Keyboard support
 
 | Key           | Function                                                                          |
 | ------------- | --------------------------------------------------------------------------------- |
-| `Tab`         | Moves keyboard focus to the interactive tag and its `Close` icon button.          |
-| `Shift + Tab` | Moves focus to the previous focusable element.                                    |
-| `Enter`       | Toggles `active` state for interactive tag or removes tag by `Close` icon button. |
+| `Tab`         | Moves keyboard focus to the next focusable element. <br>The main part of the tag is focusable only if the tag is interactive. <br>The **Close** button is always foculable if present.          |
+| <nobr>`Shift + Tab`</nobr> | Moves focus to the previous focusable element.                                    |
+| `Enter`       | Activates an interactive tag. <br>Alternatively, removes the tag if the **Close** button is focused. |
 
 ### Roles and attributes
 
@@ -31,7 +31,7 @@ Table: Roles and attributes
 
 ## Considerations for developers
 
-- Make sure screenreader reads your tags list as a group. Refer to [Grouping tags example](link will be here).
+- Make sure screenreader reads your tags list as a group. Refer to the [Grouping tags example](./tag-code.md#grouping-tags).
 - Interactive tags that are used as a button for filtering content should also follow the accessibility guidelines for [Button](/components/button/button-a11y).
 
 ## Considerations for designers

diff --git a/website/docs/components/tag/tag-code.md b/website/docs/components/tag/tag-code.md
@@ -20,7 +20,7 @@ You can add addons to the Tag component in two ways: by passing the desired tag
 
 You can set custom color to the tag using `color` property and any color from [our base color tokens](/style/design-tokens/design-tokens#base-tokens-palette). 
 
-::: info
+::: tip
 We recommend to use colors with 500 tone since they have the necessary contrast between the text and background. Background color for all states and color for icon inside the tag is calculated with CSS filter.
 :::
 
@@ -32,6 +32,34 @@ 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_more.tsx';
+</script>
+
+:::
+
 ## Adding tag
 
 ::: sandbox

diff --git a/website/docs/components/tag/tag.md b/website/docs/components/tag/tag.md
@@ -64,13 +64,13 @@ const App = PlaygroundGeneration((createGroupWidgets) => {
   const imageIcon = bool({
     key: 'image Icon',
     defaultValue: false,
-    label: 'Image Addon',
+    label: 'Circle Addon',
   });
 
   const closeIcon = bool({
     key: 'close Icon',
     defaultValue: false,
-    label: 'Close Icon',
+    label: 'Close Button',
   });
 
   const interactive = bool({
@@ -108,7 +108,7 @@ const App = PlaygroundGeneration((createGroupWidgets) => {
 
       {imageIcon && (
         <Tag.Circle>
-          <img src='https://picsum.photos/id/1025/28/28' alt='tag circle' />
+          <img src='https://picsum.photos/id/1025/28/28' />
         </Tag.Circle>
       )}
       <Tag.Text>Tag text</Tag.Text>
@@ -133,9 +133,9 @@ Tags are typically set either by the system or by the user.
 Component consists of the following:
 
 - `Tag.Text`
-- `Tag.Addon`: icon or any other small element before the text
-- `Tag.Close`
-- `Tag.Circle`: a circle image
+- `Tag.Addon` — an icon or some other small element before the text
+- `Tag.Close` — a button that removes the tag
+- `Tag.Circle` — a round addon, usually an image.
 
 ## Sizes and paddings