Skip to content

Commit b9adf1d

Browse files
tay1orjonesAlessandra Davilakodiakhq[bot]
authored
fix(HeaderGlobalAction): provide visual text for link via title attribute (#7736)
* fix(uishell): use aria-label text as title in header global action * chore: update headerglobalaction snapshot * fix(uishell): use <Button> for header global actions * test(headerglobalaction): update snap Co-authored-by: Alessandra Davila <aledavila@ibm.com> Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>
1 parent 4cd729f commit b9adf1d

File tree

5 files changed

+84
-28
lines changed

5 files changed

+84
-28
lines changed

‎packages/components/src/components/ui-shell/_header.scss‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -77,6 +77,10 @@
7777
background-color: $shell-header-bg-03;
7878
}
7979

80+
.#{$prefix}--header__action.#{$prefix}--btn--icon-only.#{$prefix}--tooltip__trigger {
81+
justify-content: center;
82+
}
83+
8084
.#{$prefix}--header__action > svg {
8185
fill: $shell-header-icon-02;
8286
}

‎packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6784,6 +6784,16 @@ Map {
67846784
"onClick": Object {
67856785
"type": "func",
67866786
},
6787+
"tooltipAlignment": Object {
6788+
"args": Array [
6789+
Array [
6790+
"start",
6791+
"center",
6792+
"end",
6793+
],
6794+
],
6795+
"type": "oneOf",
6796+
},
67876797
},
67886798
"render": [Function],
67896799
},

‎packages/react/src/components/UIShell/HeaderGlobalAction.js‎

Lines changed: 14 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@ import cx from 'classnames';
1010
import React from 'react';
1111
import PropTypes from 'prop-types';
1212
import { AriaLabelPropType } from '../../prop-types/AriaPropTypes';
13+
import Button from '../Button';
1314

1415
const { prefix } = settings;
1516

@@ -29,6 +30,7 @@ const HeaderGlobalAction = React.forwardRef(function HeaderGlobalAction(
2930
className: customClassName,
3031
onClick,
3132
isActive,
33+
tooltipAlignment,
3234
...rest
3335
},
3436
ref
@@ -43,15 +45,19 @@ const HeaderGlobalAction = React.forwardRef(function HeaderGlobalAction(
4345
'aria-labelledby': ariaLabelledBy,
4446
};
4547
return (
46-
<button
48+
<Button
4749
{...rest}
4850
{...accessibilityLabel}
4951
className={className}
5052
onClick={onClick}
5153
type="button"
54+
hasIconOnly
55+
iconDescription={ariaLabel}
56+
tooltipPosition="bottom"
57+
tooltipAlignment={tooltipAlignment}
5258
ref={ref}>
5359
{children}
54-
</button>
60+
</Button>
5561
);
5662
});
5763

@@ -82,6 +88,12 @@ HeaderGlobalAction.propTypes = {
8288
* button fires it's onclick event
8389
*/
8490
onClick: PropTypes.func,
91+
92+
/**
93+
* Specify the alignment of the tooltip to the icon-only button.
94+
* Can be one of: start, center, or end.
95+
*/
96+
tooltipAlignment: PropTypes.oneOf(['start', 'center', 'end']),
8597
};
8698

8799
HeaderGlobalAction.displayName = 'HeaderGlobalAction';

‎packages/react/src/components/UIShell/UIShell-story.js‎

Lines changed: 14 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -254,7 +254,8 @@ export const HeaderBaseWActions = withReadme(readme, () => (
254254
</HeaderGlobalAction>
255255
<HeaderGlobalAction
256256
aria-label="App Switcher"
257-
onClick={action('app-switcher click')}>
257+
onClick={action('app-switcher click')}
258+
tooltipAlignment="end">
258259
<AppSwitcher20 />
259260
</HeaderGlobalAction>
260261
</HeaderGlobalBar>
@@ -283,7 +284,8 @@ export const HeaderBaseWSkipToContent = withReadme(readme, () => (
283284
</HeaderGlobalAction>
284285
<HeaderGlobalAction
285286
aria-label="App Switcher"
286-
onClick={action('app-switcher click')}>
287+
onClick={action('app-switcher click')}
288+
tooltipAlignment="end">
287289
<AppSwitcher20 />
288290
</HeaderGlobalAction>
289291
</HeaderGlobalBar>
@@ -330,7 +332,8 @@ export const HeaderBaseWNavigationAndActions = withReadme(readme, () => (
330332
</HeaderGlobalAction>
331333
<HeaderGlobalAction
332334
aria-label="App Switcher"
333-
onClick={action('app-switcher click')}>
335+
onClick={action('app-switcher click')}
336+
tooltipAlignment="end">
334337
<AppSwitcher20 />
335338
</HeaderGlobalAction>
336339
</HeaderGlobalBar>
@@ -396,7 +399,8 @@ export const HeaderBaseWNavigationActionsAndSideNav = withReadme(readme, () => (
396399
</HeaderGlobalAction>
397400
<HeaderGlobalAction
398401
aria-label="App Switcher"
399-
onClick={action('app-switcher click')}>
402+
onClick={action('app-switcher click')}
403+
tooltipAlignment="end">
400404
<AppSwitcher20 />
401405
</HeaderGlobalAction>
402406
</HeaderGlobalBar>
@@ -552,7 +556,8 @@ export const HeaderBaseWActionsAndRightPanel = withReadme(readme, () => (
552556
</HeaderGlobalAction>
553557
<HeaderGlobalAction
554558
aria-label="App Switcher"
555-
onClick={action('app-switcher click')}>
559+
onClick={action('app-switcher click')}
560+
tooltipAlignment="end">
556561
<AppSwitcher20 />
557562
</HeaderGlobalAction>
558563
</HeaderGlobalBar>
@@ -580,7 +585,8 @@ export const HeaderBaseWActionsAndSwitcher = withReadme(readme, () => (
580585
<HeaderGlobalAction
581586
aria-label="App Switcher"
582587
isActive
583-
onClick={action('app-switcher click')}>
588+
onClick={action('app-switcher click')}
589+
tooltipAlignment="end">
584590
<AppSwitcher20 />
585591
</HeaderGlobalAction>
586592
</HeaderGlobalBar>
@@ -828,7 +834,8 @@ export const SideNavRailWHeader = withReadme(readme, () => (
828834
</HeaderGlobalAction>
829835
<HeaderGlobalAction
830836
aria-label="App Switcher"
831-
onClick={action('app-switcher click')}>
837+
onClick={action('app-switcher click')}
838+
tooltipAlignment="end">
832839
<AppSwitcher20 />
833840
</HeaderGlobalAction>
834841
</HeaderGlobalBar>

‎packages/react/src/components/UIShell/__tests__/__snapshots__/HeaderGlobalAction-test.js.snap‎

Lines changed: 42 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -7,37 +7,60 @@ exports[`HeaderGlobalAction should render 1`] = `
77
isActive={false}
88
onClick={[MockFunction]}
99
>
10-
<button
10+
<Button
1111
aria-label="Accessibility label"
1212
className="custom-class bx--header__action"
13+
disabled={false}
14+
hasIconOnly={true}
15+
iconDescription="Accessibility label"
16+
kind="primary"
1317
onClick={[MockFunction]}
18+
size="default"
19+
tabIndex={0}
20+
tooltipAlignment="center"
21+
tooltipPosition="bottom"
1422
type="button"
1523
>
16-
<ForwardRef(Fade32)>
17-
<Icon
18-
fill="currentColor"
19-
height={32}
20-
preserveAspectRatio="xMidYMid meet"
21-
viewBox="0 0 32 32"
22-
width={32}
23-
xmlns="http://www.w3.org/2000/svg"
24+
<button
25+
aria-label="Accessibility label"
26+
aria-pressed={null}
27+
className="custom-class bx--header__action bx--btn bx--btn--primary bx--btn--icon-only bx--tooltip__trigger bx--tooltip--a11y bx--tooltip--bottom bx--tooltip--align-center"
28+
disabled={false}
29+
onClick={[MockFunction]}
30+
tabIndex={0}
31+
type="button"
32+
>
33+
<span
34+
className="bx--assistive-text"
2435
>
25-
<svg
26-
aria-hidden={true}
36+
Accessibility label
37+
</span>
38+
<ForwardRef(Fade32)>
39+
<Icon
2740
fill="currentColor"
28-
focusable="false"
2941
height={32}
3042
preserveAspectRatio="xMidYMid meet"
3143
viewBox="0 0 32 32"
3244
width={32}
3345
xmlns="http://www.w3.org/2000/svg"
3446
>
35-
<path
36-
d="M8.24 25.14L7 26.67a13.79 13.79 0 004.18 2.44l.69-1.87A12 12 0 018.24 25.14zM4.19 18l-2 .41A14.09 14.09 0 003.86 23L5.59 22A12.44 12.44 0 014.19 18zM11.82 4.76l-.69-1.87A13.79 13.79 0 007 5.33L8.24 6.86A12 12 0 0111.82 4.76zM5.59 10L3.86 9a14.37 14.37 0 00-1.64 4.59l2 .34A12.05 12.05 0 015.59 10zM16 2V4a12 12 0 010 24v2A14 14 0 0016 2z"
37-
/>
38-
</svg>
39-
</Icon>
40-
</ForwardRef(Fade32)>
41-
</button>
47+
<svg
48+
aria-hidden={true}
49+
fill="currentColor"
50+
focusable="false"
51+
height={32}
52+
preserveAspectRatio="xMidYMid meet"
53+
viewBox="0 0 32 32"
54+
width={32}
55+
xmlns="http://www.w3.org/2000/svg"
56+
>
57+
<path
58+
d="M8.24 25.14L7 26.67a13.79 13.79 0 004.18 2.44l.69-1.87A12 12 0 018.24 25.14zM4.19 18l-2 .41A14.09 14.09 0 003.86 23L5.59 22A12.44 12.44 0 014.19 18zM11.82 4.76l-.69-1.87A13.79 13.79 0 007 5.33L8.24 6.86A12 12 0 0111.82 4.76zM5.59 10L3.86 9a14.37 14.37 0 00-1.64 4.59l2 .34A12.05 12.05 0 015.59 10zM16 2V4a12 12 0 010 24v2A14 14 0 0016 2z"
59+
/>
60+
</svg>
61+
</Icon>
62+
</ForwardRef(Fade32)>
63+
</button>
64+
</Button>
4265
</HeaderGlobalAction>
4366
`;

0 commit comments

Comments
 (0)