feat(@clayui/table): LPD-42395 Add tooltips to table action buttons i…

…n Clay Table
liferay · Nov 19, 2024 · f4b3da9 · f4b3da9
1 parent 8e17c59
commit f4b3da9
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 10 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
@@ -90,18 +90,17 @@ function HeadInner<T extends Record<string, any>>(
 								alwaysClose={false}
 								items={[
 									{
-										description:
-											messages[
-												'columnsVisibilityDescription'
-											]!,
+										description: messages[
+											'columnsVisibilityDescription'
+										]!,
 										name: messages[
 											'columnsVisibilityHeader'
 										]!,
 									},
 									...collection
 										.getItems()
 										.filter(
-											(item) =>
+											item =>
 												!alwaysVisibleColumns.has(item)
 										),
 								]}
@@ -117,12 +116,13 @@ function HeadInner<T extends Record<string, any>>(
 										borderless
 										displayType="secondary"
 										monospaced
+										title={messages['columnsVisibility']}
 									>
 										<Icon symbol="caret-bottom" />
 									</Button>
 								}
 							>
-								{(item) =>
+								{item =>
 									typeof item === 'object' ? (
 										<Header
 											description={item.description}
@@ -173,7 +173,7 @@ function HeadInner<T extends Record<string, any>>(
 																alwaysVisibleColumns.size ===
 																1
 														}
-														onChange={(event) => {
+														onChange={event => {
 															event.stopPropagation();
 
 															onVisibleColumnsChange(
@@ -183,7 +183,7 @@ function HeadInner<T extends Record<string, any>>(
 																).index
 															);
 														}}
-														onKeyDown={(event) => {
+														onKeyDown={event => {
 															switch (event.key) {
 																case 'Enter':
 																	onVisibleColumnsChange(