[core] fix(Tag): improve a11y label (#5437)

palantir · Jul 12, 2022 · 81147fc · 81147fc · blueprint-bot · Jul 12, 2022
1 parent 00c7595
commit 81147fc
Showing 1 changed file with 16 additions and 2 deletions.
diff --git a/packages/core/src/components/tag/tag.tsx b/packages/core/src/components/tag/tag.tsx
@@ -124,6 +124,8 @@ export interface ITagProps
 export class Tag extends AbstractPureComponent2<TagProps> {
     public static displayName = `${DISPLAYNAME_PREFIX}.Tag`;
 
+    private tagId = Utils.uniqueId("tag");
+
     public render() {
         const {
             active,
@@ -172,10 +174,22 @@ export class Tag extends AbstractPureComponent2<TagProps> {
         ) : null;
 
         return (
-            <span {...htmlProps} className={tagClasses} tabIndex={interactive ? tabIndex : undefined} ref={elementRef}>
+            <span
+                {...htmlProps}
+                aria-labelledby={this.tagId}
+                className={tagClasses}
+                tabIndex={interactive ? tabIndex : undefined}
+                ref={elementRef}
+            >
                 <Icon icon={icon} />
                 {!isReactNodeEmpty(children) && (
-                    <Text className={Classes.FILL} ellipsize={!multiline} tagName="span" title={htmlTitle}>
+                    <Text
+                        className={Classes.FILL}
+                        ellipsize={!multiline}
+                        id={this.tagId}
+                        tagName="span"
+                        title={htmlTitle}
+                    >
                         {children}
                     </Text>
                 )}