fix: Typography ellipsis title (#27328)

* fix: Typography ellipsis title close #27324 * fix ci
ant-design · Nov 7, 2020 · 9260a4d · 9260a4d
1 parent d99b6bf
commit 9260a4d
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 12 deletions.
diff --git a/components/typography/Base.tsx b/components/typography/Base.tsx
@@ -462,22 +462,27 @@ class Base extends React.Component<InternalBlockProps, BaseState> {
     const cssLineClamp = rows && rows > 1 && cssEllipsis;
 
     let textNode: React.ReactNode = children;
-    let ariaLabel: string | undefined;
 
     // Only use js ellipsis when css ellipsis not support
     if (rows && isEllipsis && !expanded && !cssEllipsis) {
       const { title } = restProps;
-      ariaLabel = title;
+      let restContent = title || '';
       if (!title && (typeof children === 'string' || typeof children === 'number')) {
-        ariaLabel = String(children);
+        restContent = String(children);
       }
+
+      // show rest content as title on symbol
+      restContent = restContent?.replace(new RegExp(`^${ellipsisContent}`), '');
+
       // We move full content to outer element to avoid repeat read the content by accessibility
       textNode = (
-        <span title={ariaLabel} aria-hidden="true">
+        <>
           {ellipsisContent}
-          {ELLIPSIS_STR}
+          <span title={restContent} aria-hidden="true">
+            {ELLIPSIS_STR}
+          </span>
           {suffix}
-        </span>
+        </>
       );
     } else {
       textNode = (
@@ -517,7 +522,6 @@ class Base extends React.Component<InternalBlockProps, BaseState> {
                 }}
                 component={component}
                 ref={this.contentRef}
-                aria-label={ariaLabel}
                 direction={direction}
                 {...textProps}
               >

diff --git a/components/typography/__tests__/index.test.js b/components/typography/__tests__/index.test.js
@@ -85,16 +85,14 @@ describe('Typography', () => {
 
         await sleep(20);
         wrapper.update();
-        expect(wrapper.find('span:not(.anticon)').text()).toEqual('Bamboo is Little ...');
+        expect(wrapper.text()).toEqual('Bamboo is Little ...');
         expect(onEllipsis).toHaveBeenCalledWith(true);
         onEllipsis.mockReset();
 
         wrapper.setProps({ ellipsis: { rows: 2, onEllipsis } });
         await sleep(20);
         wrapper.update();
-        expect(wrapper.find('span:not(.anticon)').text()).toEqual(
-          'Bamboo is Little Light Bamboo is Litt...',
-        );
+        expect(wrapper.text()).toEqual('Bamboo is Little Light Bamboo is Litt...');
         expect(onEllipsis).not.toHaveBeenCalled();
 
         wrapper.setProps({ ellipsis: { rows: 99, onEllipsis } });
@@ -161,7 +159,7 @@ describe('Typography', () => {
         await sleep(20);
         wrapper.update();
 
-        expect(wrapper.find('span:not(.anticon)').text()).toEqual('Bamboo is Little...');
+        expect(wrapper.text()).toEqual('Bamboo is Little...');
       });
 
       it('should expandable work', async () => {