Skip to content

Commit 680c33b

Browse files
Lukas742Lukas742
authored
feat(ObjectStatus): add emptyIndicator & stateAnnouncementText props, improve a11y (#4952)
1 parent 961b237 commit 680c33b

File tree

3 files changed

+212
-42
lines changed

3 files changed

+212
-42
lines changed

‎packages/main/src/components/ObjectStatus/ObjectStatus.cy.tsx

Lines changed: 65 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,13 @@
1+
import {
2+
VALUE_STATE_ERROR,
3+
VALUE_STATE_INFORMATION,
4+
VALUE_STATE_SUCCESS,
5+
VALUE_STATE_WARNING
6+
} from '@ui5/webcomponents/dist/generated/i18n/i18n-defaults.js';
17
import { ThemingParameters } from '@ui5/webcomponents-react-base';
2-
import type { ValueState, IndicationColor } from '../../enums/index.js';
8+
import type { IndicationColor } from '../../enums/index.js';
9+
import { ValueState } from '../../enums/index.js';
10+
import { INDICATION_COLOR } from '../../i18n/i18n-defaults.js';
311
import { Icon } from '../../webComponents/index.js';
412
import { ObjectStatus } from './index.js';
513
import { cssVarToRgb, cypressPassThroughTestsFactory } from '@/cypress/support/utils';
@@ -10,6 +18,7 @@ const statesWithCSSVars: {
1018
iconColor: string;
1119
hasDefaultIcon?: true;
1220
inverted: { color: string; iconColor: string; backgroundColor: string };
21+
hiddenText: undefined | string;
1322
}[] = [
1423
{
1524
state: 'Error',
@@ -20,7 +29,8 @@ const statesWithCSSVars: {
2029
color: ThemingParameters.sapButton_Negative_TextColor,
2130
backgroundColor: ThemingParameters.sapButton_Negative_Background,
2231
iconColor: ThemingParameters.sapButton_Negative_TextColor
23-
}
32+
},
33+
hiddenText: VALUE_STATE_ERROR.defaultText
2434
},
2535
{
2636
state: 'None',
@@ -30,7 +40,8 @@ const statesWithCSSVars: {
3040
color: ThemingParameters.sapButton_Neutral_TextColor,
3141
backgroundColor: ThemingParameters.sapButton_Neutral_Background,
3242
iconColor: ThemingParameters.sapButton_Neutral_TextColor
33-
}
43+
},
44+
hiddenText: undefined
3445
},
3546
{
3647
state: 'Success',
@@ -41,7 +52,8 @@ const statesWithCSSVars: {
4152
color: ThemingParameters.sapButton_Success_TextColor,
4253
backgroundColor: ThemingParameters.sapButton_Success_Background,
4354
iconColor: ThemingParameters.sapButton_Success_TextColor
44-
}
55+
},
56+
hiddenText: VALUE_STATE_SUCCESS.defaultText
4557
},
4658
{
4759
state: 'Warning',
@@ -52,7 +64,8 @@ const statesWithCSSVars: {
5264
color: ThemingParameters.sapButton_Critical_TextColor,
5365
backgroundColor: ThemingParameters.sapButton_Critical_Background,
5466
iconColor: ThemingParameters.sapButton_Critical_TextColor
55-
}
67+
},
68+
hiddenText: VALUE_STATE_WARNING.defaultText
5669
},
5770
{
5871
state: 'Information',
@@ -63,7 +76,8 @@ const statesWithCSSVars: {
6376
color: ThemingParameters.sapButton_Information_TextColor,
6477
backgroundColor: ThemingParameters.sapButton_Information_Background,
6578
iconColor: ThemingParameters.sapButton_Information_TextColor
66-
}
79+
},
80+
hiddenText: VALUE_STATE_INFORMATION.defaultText
6781
},
6882
{
6983
state: 'Indication01',
@@ -73,7 +87,8 @@ const statesWithCSSVars: {
7387
color: ThemingParameters.sapIndicationColor_1_TextColor,
7488
backgroundColor: ThemingParameters.sapIndicationColor_1,
7589
iconColor: ThemingParameters.sapIndicationColor_1_TextColor
76-
}
90+
},
91+
hiddenText: `${INDICATION_COLOR.defaultText} 1`
7792
},
7893
{
7994
state: 'Indication02',
@@ -83,7 +98,8 @@ const statesWithCSSVars: {
8398
color: ThemingParameters.sapIndicationColor_2_TextColor,
8499
backgroundColor: ThemingParameters.sapIndicationColor_2,
85100
iconColor: ThemingParameters.sapIndicationColor_2_TextColor
86-
}
101+
},
102+
hiddenText: `${INDICATION_COLOR.defaultText} 2`
87103
},
88104
{
89105
state: 'Indication03',
@@ -93,7 +109,8 @@ const statesWithCSSVars: {
93109
color: ThemingParameters.sapIndicationColor_3_TextColor,
94110
backgroundColor: ThemingParameters.sapIndicationColor_3,
95111
iconColor: ThemingParameters.sapIndicationColor_3_TextColor
96-
}
112+
},
113+
hiddenText: `${INDICATION_COLOR.defaultText} 3`
97114
},
98115
{
99116
state: 'Indication04',
@@ -103,7 +120,8 @@ const statesWithCSSVars: {
103120
color: ThemingParameters.sapIndicationColor_4_TextColor,
104121
backgroundColor: ThemingParameters.sapIndicationColor_4,
105122
iconColor: ThemingParameters.sapIndicationColor_4_TextColor
106-
}
123+
},
124+
hiddenText: `${INDICATION_COLOR.defaultText} 4`
107125
},
108126
{
109127
state: 'Indication05',
@@ -113,7 +131,8 @@ const statesWithCSSVars: {
113131
color: ThemingParameters.sapIndicationColor_5_TextColor,
114132
backgroundColor: ThemingParameters.sapIndicationColor_5,
115133
iconColor: ThemingParameters.sapIndicationColor_5_TextColor
116-
}
134+
},
135+
hiddenText: `${INDICATION_COLOR.defaultText} 5`
117136
},
118137
{
119138
state: 'Indication06',
@@ -123,7 +142,8 @@ const statesWithCSSVars: {
123142
color: ThemingParameters.sapIndicationColor_6_TextColor,
124143
backgroundColor: ThemingParameters.sapIndicationColor_6,
125144
iconColor: ThemingParameters.sapIndicationColor_6_TextColor
126-
}
145+
},
146+
hiddenText: `${INDICATION_COLOR.defaultText} 6`
127147
},
128148
{
129149
state: 'Indication07',
@@ -133,7 +153,8 @@ const statesWithCSSVars: {
133153
color: ThemingParameters.sapIndicationColor_7_TextColor,
134154
backgroundColor: ThemingParameters.sapIndicationColor_7,
135155
iconColor: ThemingParameters.sapIndicationColor_7_TextColor
136-
}
156+
},
157+
hiddenText: `${INDICATION_COLOR.defaultText} 7`
137158
},
138159
{
139160
state: 'Indication08',
@@ -143,7 +164,8 @@ const statesWithCSSVars: {
143164
color: ThemingParameters.sapIndicationColor_8_TextColor,
144165
backgroundColor: ThemingParameters.sapIndicationColor_8,
145166
iconColor: ThemingParameters.sapIndicationColor_8_TextColor
146-
}
167+
},
168+
hiddenText: `${INDICATION_COLOR.defaultText} 8`
147169
}
148170
];
149171

@@ -187,6 +209,9 @@ describe('ObjectStatus', () => {
187209
Content
188210
</ObjectStatus>
189211
);
212+
if (stateObj.hiddenText) {
213+
cy.findByText(stateObj.hiddenText).should('exist').and('not.be.visible');
214+
}
190215
if (!item.inverted) {
191216
cy.findByText('Content').should('have.css', 'color', rgbValColorString);
192217
cy.findByTestId('icon').should('have.css', 'color', rgbValColorIconString);
@@ -201,9 +226,15 @@ describe('ObjectStatus', () => {
201226

202227
it('active', () => {
203228
const click = cy.spy().as('clickSpy');
204-
cy.mount(<ObjectStatus onClick={click}>Content</ObjectStatus>);
229+
cy.mount(
230+
<ObjectStatus onClick={click} data-testid="os">
231+
Content
232+
</ObjectStatus>
233+
);
205234
cy.findByText('Content').click();
206235
cy.get('@clickSpy').should('not.be.called');
236+
cy.findByRole('button').should('not.exist');
237+
cy.findByTestId('os').should('not.have.attr', 'aria-roledescription');
207238

208239
cy.mount(
209240
<ObjectStatus onClick={click} active>
@@ -212,6 +243,25 @@ describe('ObjectStatus', () => {
212243
);
213244
cy.findByText('Content').click();
214245
cy.get('@clickSpy').should('have.been.calledOnce');
246+
cy.findByRole('button').should('have.attr', 'aria-roledescription', 'Object Status Button');
247+
});
248+
249+
it('emptyIndicator', () => {
250+
cy.mount(<ObjectStatus data-testid="os" />);
251+
cy.findByTestId('os').children().should('have.length', 0);
252+
cy.mount(<ObjectStatus data-testid="os" emptyIndicator />);
253+
cy.findByTestId('os').children().should('have.length', 1);
254+
cy.findByText('–').should('be.visible');
255+
});
256+
257+
it('stateAnnouncementText', () => {
258+
cy.mount(
259+
<ObjectStatus data-testid="os" state={ValueState.Error} stateAnnouncementText="Custom Text">
260+
Content
261+
</ObjectStatus>
262+
);
263+
cy.findByText(VALUE_STATE_ERROR.defaultText).should('not.exist');
264+
cy.findByText('Custom Text').should('exist').and('not.be.visible');
215265
});
216266

217267
cypressPassThroughTestsFactory(ObjectStatus);

‎packages/main/src/components/ObjectStatus/ObjectStatus.jss.ts

Lines changed: 14 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -83,7 +83,7 @@ const styles = {
8383
verticalAlign: 'top',
8484
paddingInlineEnd: '0.25rem',
8585

86-
'&:only-child': {
86+
'&[data-icon-only="true"]': {
8787
paddingInlineEnd: 0
8888
}
8989
},
@@ -95,6 +95,19 @@ const styles = {
9595
verticalAlign: 'top'
9696
},
9797

98+
emptyIndicator: {
99+
lineHeight: 'normal',
100+
color: ThemingParameters.sapTextColor
101+
},
102+
103+
pseudoInvisibleText: {
104+
fontSize: 0,
105+
position: 'absolute',
106+
userSelect: 'none',
107+
left: 0,
108+
top: 0
109+
},
110+
98111
success: {
99112
color: ThemingParameters.sapPositiveTextColor,
100113
'& [ui5-icon]': {

0 commit comments

Comments
 (0)