docs(ui-select,ui-tag): add clarification about the usage of accessible dismissable tags

Closes: INSTUI-4335

Author: ToMESSKa

packages/ui-select/src/Select/README.md

@@ -681,7 +681,7 @@ It's best practice to always provide autocomplete functionality to help users ma
 
 #### Highlighting and selecting options
 
-To mark an option as "highlighted", use the option's `isHighlighted` prop. Note that only one highlighted option is permitted. Similarly, use `isSelected` to mark an option or multiple options as "selected". When allowing multiple selections, it's best to render a [Tag](#Tag) for each selected option via the `renderBeforeInput` prop.
+To mark an option as "highlighted", use the option's `isHighlighted` prop. Note that only one highlighted option is permitted. Similarly, use `isSelected` to mark an option or multiple options as "selected". When allowing multiple selections, it's best to render a [Tag](#Tag) with [AccessibleContent](#AccessibleContent) for each selected option via the `renderBeforeInput` prop.
 
 - ```javascript
   class MultipleSelectExample extends React.Component {
@@ -845,8 +845,11 @@ To mark an option as "highlighted", use the option's `isHighlighted` prop. Note
         <Tag
           dismissible
           key={id}
-          title={`Remove ${this.getOptionById(id).label}`}
-          text={this.getOptionById(id).label}
+          text={
+            <AccessibleContent alt={`Remove ${this.getOptionById(id).label}`}>
+              {this.getOptionById(id).label}
+            </AccessibleContent>
+          }
           margin={index > 0 ? 'xxx-small 0 xxx-small xx-small' : 'xxx-small 0'}
           onClick={(e) => this.dismissTag(e, id)}
         />
@@ -1071,8 +1074,11 @@ To mark an option as "highlighted", use the option's `isHighlighted` prop. Note
         <Tag
           dismissible
           key={id}
-          title={`Remove ${getOptionById(id).label}`}
-          text={getOptionById(id).label}
+          text={
+            <AccessibleContent alt={`Remove ${this.getOptionById(id).label}`}>
+              {this.getOptionById(id).label}
+            </AccessibleContent>
+          }
           margin={index > 0 ? 'xxx-small 0 xxx-small xx-small' : 'xxx-small 0'}
           onClick={(e) => dismissTag(e, id)}
         />

packages/ui-tag/src/Tag/README.md

@@ -15,7 +15,7 @@ type: example
 
 When the `dismissible` prop is added to a clickable Tag, the button
 renders an X/close icon (the Tag should be dismissed via the `onClick`
-prop).
+prop). When implementing dismissable tags, be sure to add [AccessibleContent](#AccessibleContent) to clarify that the tag is dismissible to screen readers.
 
 ```js
 ---

packages/ui-tag/src/Tag/props.ts

@@ -42,6 +42,10 @@ import type {
 type TagOwnProps = {
   className?: string
   text: string | React.ReactNode
+  /**
+   * @deprecated since version 10
+   * Use of the title attribute is highly problematic due to accessibility concerns
+   */
   title?: string
   /**
    * Whether or not to disable the tag