Skip to content

fix: updated the fix for access related issues in dashboard component #4049

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
Maha14-ui wants to merge 8 commits into
base: next
Choose a base branch
from
Open

fix: updated the fix for access related issues in dashboard component #4049

Show file tree
Hide file tree
Changes from 4 commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
6b8b494
fix: updated the fix for access related issues in dashboard component
Maha14-ui Dec 3, 2025
e3eea24
fix: updated the fix for commit failed issue
Maha14-ui Dec 3, 2025
f47ceb5
fix: addressed review comments
Maha14-ui Dec 3, 2025
ce9ec3d
fix: updated the fix for access related issue for gauge card
Maha14-ui Dec 3, 2025
6a30a42
Merge branch 'next' into fix-MAXUIF-3195
Maha14-ui Dec 9, 2025
9c87cc4
fix: updated the fix for access related issue for dashboad component
Maha14-ui Dec 10, 2025
1366108
fix: removed unused variables
Maha14-ui Dec 10, 2025
a5f06a7
fix: updated the format to resolve yarn lint issue
Maha14-ui Dec 10, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion packages/react/src/components/Card/Card.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -68,9 +68,9 @@ const CardWrapper = React.forwardRef(
return (
<div
ref={ref}
role="presentation"
data-testid={testID || testId}
id={id}
role="presentation"
style={{ ...style, '--card-default-height': `${dimensions.y}px` }}
onMouseDown={onMouseDown}
onMouseUp={onMouseUp}
Expand Down
171 changes: 87 additions & 84 deletions packages/react/src/components/GaugeCard/GaugeCard.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -93,93 +93,96 @@ const GaugeCard = ({
const resizeHandles = isResizable ? getResizeHandles(children) : [];

return (
<Card
id={id}
className={`${iotPrefix}--gauge-card`}
title={title}
size={size}
resizeHandles={resizeHandles}
// TODO: remove deprecated testID in v3.
testId={testID || testId}
{...others}
tooltip={tooltip}
isLoading={isLoading}
>
<div className={classnames(`${iotPrefix}--gauge-container`, className)} style={myStyles}>
{dataState && <DataStateRenderer dataState={dataState} size={size} id={id} />}
{!dataState &&
gauges.map((gauge, i) => {
const { color } = getColor(gauge, values[gauge.dataSourceId]);
const valueLength =
values[gauge.dataSourceId] && values[gauge.dataSourceId].toString().length;
return (
<Fragment key={`${iotPrefix}-gauge-${i}`}>
<svg
aria-labelledby="gauge-label"
className={classnames(
`${iotPrefix}--gauge`,
{ [`${iotPrefix}--gauge__loaded`]: loadedState },
className
)}
percent="0"
style={{
'--gauge-value': values[gauge.dataSourceId] || 0,
'--gauge-max-value': gauge.maximumValue,
'--gauge-colors': color,
'--gauge-bg': gauge.backgroundColor,
'--stroke-dash': getStrokeDash(values[gauge.dataSourceId]) || 0,
'--stroke-dash-array': circum,
'--gauge-size': `${gaugeSize}px`,
'--gauge-trend-color': gauge.trend.color,
}}
>
<circle
className={`${iotPrefix}--gauge-bg`}
cx={gaugeSize / 2}
cy={gaugeSize / 2}
r={radius}
/>
<circle
className={`${iotPrefix}--gauge-fg`}
cx={gaugeSize / 2}
cy={gaugeSize / 2}
r={radius}
/>
<text
id="gauge-label"
<section id="main-content" aria-label="region">
Copy link
Collaborator

@aqibibm aqibibm Dec 5, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Why do we need this?

Copy link
Collaborator Author

@Maha14-ui Maha14-ui Dec 10, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

hi @aqibibm ,as I said above. I have reverted these changes. and updated the PR. please review. Thank you!.

<Card
id={id}
className={`${iotPrefix}--gauge-card`}
title={title}
size={size}
resizeHandles={resizeHandles}
aria-label={`${title}`}
// TODO: remove deprecated testID in v3.
testId={testID || testId}
{...others}
tooltip={`${title}`}
isLoading={isLoading}
>
<div className={classnames(`${iotPrefix}--gauge-container`, className)} style={myStyles}>
{dataState && <DataStateRenderer dataState={dataState} size={size} id={id} />}
{!dataState &&
gauges.map((gauge, i) => {
const { color } = getColor(gauge, values[gauge.dataSourceId]);
const valueLength =
values[gauge.dataSourceId] && values[gauge.dataSourceId].toString().length;
return (
<Fragment key={`${iotPrefix}-gauge-${i}`}>
<svg
aria-labelledby="gauge-label"
className={classnames(
`${iotPrefix}--gauge-value`,
`${iotPrefix}--gauge-value__centered`,
{ [`${iotPrefix}--gauge-value-sm`]: valueLength === 4 },
{ [`${iotPrefix}--gauge-value-md`]: valueLength === 3 },
{ [`${iotPrefix}--gauge-value-lg`]: valueLength <= 2 }
`${iotPrefix}--gauge`,
{ [`${iotPrefix}--gauge__loaded`]: loadedState },
className
)}
x={gaugeSize / 2}
y={gaugeSize / 2 + STROKE_SIZE}
textAnchor="middle"
>
<tspan>{values[gauge.dataSourceId]}</tspan>
<tspan>{gauge.units}</tspan>
</text>
</svg>
{values[gauge.trend.dataSourceId] && (
<div
className={classnames(`${iotPrefix}--gauge-trend`, {
[`${iotPrefix}--gauge-trend__up`]: gauge.trend.trend === 'up',
[`${iotPrefix}--gauge-trend__down`]: gauge.trend.trend === 'down',
})}
key={`${gauge.trend.dataSourceId}-${i}`}
percent="0"
style={{
'--gauge-value': values[gauge.dataSourceId] || 0,
'--gauge-max-value': gauge.maximumValue,
'--gauge-colors': color,
'--gauge-bg': gauge.backgroundColor,
'--stroke-dash': getStrokeDash(values[gauge.dataSourceId]) || 0,
'--stroke-dash-array': circum,
'--gauge-size': `${gaugeSize}px`,
'--gauge-trend-color': gauge.trend.color,
}}
>
<p style={{ '--gauge-trend-color': gauge.trend.color }}>
{values[gauge.trend.dataSourceId]}
</p>
</div>
)}
</Fragment>
);
})}
</div>
</Card>
<circle
className={`${iotPrefix}--gauge-bg`}
cx={gaugeSize / 2}
cy={gaugeSize / 2}
r={radius}
/>
<circle
className={`${iotPrefix}--gauge-fg`}
cx={gaugeSize / 2}
cy={gaugeSize / 2}
r={radius}
/>
<text
id="gauge-label"
className={classnames(
`${iotPrefix}--gauge-value`,
`${iotPrefix}--gauge-value__centered`,
{ [`${iotPrefix}--gauge-value-sm`]: valueLength === 4 },
{ [`${iotPrefix}--gauge-value-md`]: valueLength === 3 },
{ [`${iotPrefix}--gauge-value-lg`]: valueLength <= 2 }
)}
x={gaugeSize / 2}
y={gaugeSize / 2 + STROKE_SIZE}
textAnchor="middle"
>
<tspan>{values[gauge.dataSourceId]}</tspan>
<tspan>{gauge.units}</tspan>
</text>
</svg>
{values[gauge.trend.dataSourceId] && (
<div
className={classnames(`${iotPrefix}--gauge-trend`, {
[`${iotPrefix}--gauge-trend__up`]: gauge.trend.trend === 'up',
[`${iotPrefix}--gauge-trend__down`]: gauge.trend.trend === 'down',
})}
key={`${gauge.trend.dataSourceId}-${i}`}
>
<p style={{ '--gauge-trend-color': gauge.trend.color }}>
{values[gauge.trend.dataSourceId]}
</p>
</div>
)}
</Fragment>
);
})}
</div>
</Card>
</section>
);
};

Expand Down
4 changes: 3 additions & 1 deletion packages/react/src/components/ToggleTip/index.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,6 +22,8 @@ export const ToggleTip = ({
toggleTipLabelRef,
...other
}) => {
// Extract aria props so they go to the BUTTON, not CarbonToggleTip
const { 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy } = other;
let newAlign;
// This function is to pass the old direction, align property to the new align property since The align and direction props have been merged into the align prop
if (direction === 'bottom' && align === 'center') {
Expand Down Expand Up @@ -58,7 +60,7 @@ export const ToggleTip = ({
) : null}
<CarbonToggleTip align={newAlign} autoAlign={useAutoPositioning} {...other}>
{triggerBtn ?? (
<ToggletipButton>
<ToggletipButton aria-label={ariaLabel} aria-labelledby={ariaLabelledBy}>
{showIcon ? (
IconCustomElement ? (
<IconCustomElement />
Expand Down
82 changes: 43 additions & 39 deletions packages/react/src/components/ValueCard/ValueContent.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -57,47 +57,51 @@ const ValueContent = ({
const attributeCount = content.attributes.length;

return (
<div
className={classnames(`${BASE_CLASS_NAME}__content-wrapper`, {
[`${BASE_CLASS_NAME}__content-wrapper--vertical`]: layout === CARD_LAYOUTS.VERTICAL,
})}
>
{!dataState ? (
content.attributes.map((attribute, index) => (
<Attribute
key={`fragment-${attribute.dataSourceId}-${JSON.stringify(attribute.dataFilter || {})}`}
attribute={attribute}
attributeCount={attributeCount}
layout={layout}
locale={locale}
isEditable={isEditable}
title={title}
renderIconByName={others.renderIconByName}
value={determineValue(attribute.dataSourceId, values, attribute.dataFilter)}
secondaryValue={
attribute.secondaryValue && {
...attribute.secondaryValue,
value: determineValue(attribute.secondaryValue.dataSourceId, values),
<section id="main-content" aria-label="value content">
Copy link
Collaborator

@aqibibm aqibibm Dec 5, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Can't we use same div to give aria-label instead of having

Copy link
Collaborator Author

@Maha14-ui Maha14-ui Dec 10, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

hi @aqibibm , I have tried to repeat the issues from reference-app. issue (Content is not within a landmark element) was not repeating and main tag and role is already available from main page so these changes are not required. I have reverted these changes. and updated the PR. please review. Thank you!.

<div
className={classnames(`${BASE_CLASS_NAME}__content-wrapper`, {
[`${BASE_CLASS_NAME}__content-wrapper--vertical`]: layout === CARD_LAYOUTS.VERTICAL,
})}
>
{!dataState ? (
content.attributes.map((attribute, index) => (
<Attribute
key={`fragment-${attribute.dataSourceId}-${JSON.stringify(
attribute.dataFilter || {}
)}`}
attribute={attribute}
attributeCount={attributeCount}
layout={layout}
locale={locale}
isEditable={isEditable}
title={title}
renderIconByName={others.renderIconByName}
value={determineValue(attribute.dataSourceId, values, attribute.dataFilter)}
secondaryValue={
attribute.secondaryValue && {
...attribute.secondaryValue,
value: determineValue(attribute.secondaryValue.dataSourceId, values),
}
}
}
// Prefer new formatter. Fall back to legacy customFormatter.
formatter={formatter}
customFormatter={customFormatter}
fontSize={fontSize}
isNumberValueCompact={isNumberValueCompact}
testId={`${testId}-attribute-${index}`}
onValueClick={onAttributeClick}
// Prefer new formatter. Fall back to legacy customFormatter.
formatter={formatter}
customFormatter={customFormatter}
fontSize={fontSize}
isNumberValueCompact={isNumberValueCompact}
testId={`${testId}-attribute-${index}`}
onValueClick={onAttributeClick}
/>
))
) : (
<DataStateRenderer
dataState={dataState}
size={size}
id={id}
testId={`${testId}-data-state`}
/>
))
) : (
<DataStateRenderer
dataState={dataState}
size={size}
id={id}
testId={`${testId}-data-state`}
/>
)}
</div>
)}
</div>
</section>
);
};

Expand Down
Loading