Merge pull request #5895 from ilzamcmed/LPD-42395

feat(@clayui/table):LPD 42395 Add tooltips to table action buttons in Clay Table
liferay · Nov 20, 2024 · 356cb11 · 356cb11
2 parents 8e17c59 + 09038db
commit 356cb11
Show file tree

Hide file tree

Showing 3 changed files with 10 additions and 5 deletions.
diff --git a/packages/clay-core/src/table/Cell.tsx b/packages/clay-core/src/table/Cell.tsx
@@ -255,8 +255,8 @@ export const Cell = React.forwardRef<HTMLTableCellElement, Props>(
 						</Layout.ContentCol>
 						<Layout.ContentCol>
 							<button
-								aria-label={messages['sortDescription']}
 								className="component-action"
+								title={messages['sortDescription']}
 								type="button"
 							>
 								<Icon
@@ -286,7 +286,6 @@ export const Cell = React.forwardRef<HTMLTableCellElement, Props>(
 						{isExpandable && (
 							<Layout.ContentCol className="autofit-col-toggle">
 								<Button
-									aria-label={messages['expandable']}
 									borderless
 									displayType="secondary"
 									monospaced
@@ -299,6 +298,7 @@ export const Cell = React.forwardRef<HTMLTableCellElement, Props>(
 									}}
 									size="xs"
 									tabIndex={-1}
+									title={messages['expandable']}
 								>
 									<Icon
 										symbol={

diff --git a/packages/clay-core/src/table/Head.tsx b/packages/clay-core/src/table/Head.tsx
@@ -117,6 +117,7 @@ function HeadInner<T extends Record<string, any>>(
 										borderless
 										displayType="secondary"
 										monospaced
+										title={messages['columnsVisibility']}
 									>
 										<Icon symbol="caret-bottom" />
 									</Button>

diff --git a/packages/clay-core/src/table/__tests__/__snapshots__/BasicRendering.tsx.snap b/packages/clay-core/src/table/__tests__/__snapshots__/BasicRendering.tsx.snap
@@ -40,6 +40,7 @@ exports[`Table basic rendering render dynamic content 1`] = `
                 aria-haspopup="true"
                 aria-label="Manage Columns Visibility"
                 class="dropdown-toggle btn btn-monospaced btn-outline-borderless btn-outline-secondary"
+                title="Manage Columns Visibility"
                 type="button"
               >
                 <svg
@@ -195,6 +196,7 @@ exports[`Table basic rendering render static content 1`] = `
                 aria-haspopup="true"
                 aria-label="Manage Columns Visibility"
                 class="dropdown-toggle btn btn-monospaced btn-outline-borderless btn-outline-secondary"
+                title="Manage Columns Visibility"
                 type="button"
               >
                 <svg
@@ -350,8 +352,8 @@ exports[`Table basic rendering render with sort column 1`] = `
                 class="autofit-col"
               >
                 <button
-                  aria-label="sortable column"
                   class="component-action"
+                  title="sortable column"
                   type="button"
                 >
                   <svg
@@ -395,8 +397,8 @@ exports[`Table basic rendering render with sort column 1`] = `
                 class="autofit-col"
               >
                 <button
-                  aria-label="sortable column"
                   class="component-action"
+                  title="sortable column"
                   type="button"
                 >
                   <svg
@@ -424,6 +426,7 @@ exports[`Table basic rendering render with sort column 1`] = `
                 aria-haspopup="true"
                 aria-label="Manage Columns Visibility"
                 class="dropdown-toggle btn btn-monospaced btn-outline-borderless btn-outline-secondary"
+                title="Manage Columns Visibility"
                 type="button"
               >
                 <svg
@@ -584,6 +587,7 @@ exports[`Table basic rendering render with treegrid 1`] = `
                 aria-haspopup="true"
                 aria-label="Manage Columns Visibility"
                 class="dropdown-toggle btn btn-monospaced btn-outline-borderless btn-outline-secondary"
+                title="Manage Columns Visibility"
                 type="button"
               >
                 <svg
@@ -673,9 +677,9 @@ exports[`Table basic rendering render with treegrid 1`] = `
                 class="autofit-col-toggle autofit-col"
               >
                 <button
-                  aria-label="expandable"
                   class="btn btn-monospaced btn-outline-borderless btn-outline-secondary btn-xs"
                   tabindex="-1"
+                  title="expandable"
                   type="button"
                 >
                   <svg