Skip to content

Commit 79a538c

Browse files
zamoorezamoore
committed
a11y enhancements
1 parent fe5bc8c commit 79a538c

File tree

8 files changed

+116
-40
lines changed

8 files changed

+116
-40
lines changed

‎packages/components/package.json

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -148,6 +148,7 @@
148148
"./components/hds/advanced-table/th-button-expand.js": "./dist/_app_/components/hds/advanced-table/th-button-expand.js",
149149
"./components/hds/advanced-table/th-button-sort.js": "./dist/_app_/components/hds/advanced-table/th-button-sort.js",
150150
"./components/hds/advanced-table/th-button-tooltip.js": "./dist/_app_/components/hds/advanced-table/th-button-tooltip.js",
151+
"./components/hds/advanced-table/th-menu/index.js": "./dist/_app_/components/hds/advanced-table/th-menu/index.js",
151152
"./components/hds/advanced-table/th-resize-handle.js": "./dist/_app_/components/hds/advanced-table/th-resize-handle.js",
152153
"./components/hds/advanced-table/th-selectable.js": "./dist/_app_/components/hds/advanced-table/th-selectable.js",
153154
"./components/hds/advanced-table/th-sort.js": "./dist/_app_/components/hds/advanced-table/th-sort.js",

‎packages/components/src/components/hds/advanced-table/index.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -325,7 +325,7 @@ export default class HdsAdvancedTable extends Component<HdsAdvancedTableSignatur
325325
if (hasCustomColumnWidths) {
326326
// check the custom column widths, if the current column has a custom width use the custom width. otherwise take the available space.
327327
for (let i = 0; i < columns.length; i++) {
328-
style += ` ${columns[i]?.width ?? DEFAULT_COLUMN_WIDTH}`;
328+
style += ` ${columns[i]!.width ?? DEFAULT_COLUMN_WIDTH}`;
329329
}
330330
} else {
331331
// if there are no custom column widths, each column is the same width and they take up the available space

‎packages/components/src/components/hds/advanced-table/models/column.ts

Lines changed: 23 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,14 @@ import { tracked } from '@glimmer/tracking';
33
import type { HdsAdvancedTableColumn as HdsAdvancedTableColumnType } from '../types';
44
import type { HdsAdvancedTableHorizontalAlignment } from '../types';
55

6+
function getNumericalWidth(width: string | undefined): number {
7+
if (width === undefined) {
8+
return 0;
9+
}
10+
11+
// width is a css string
12+
return parseInt(width, 10);
13+
}
614
export default class HdsAdvancedTableColumn {
715
@tracked label: string = '';
816
@tracked align?: HdsAdvancedTableHorizontalAlignment = 'left';
@@ -13,12 +21,24 @@ export default class HdsAdvancedTableColumn {
1321
@tracked isSortable?: boolean = false;
1422
@tracked isVisuallyHidden?: boolean = false;
1523
@tracked tooltip?: string = undefined;
16-
@tracked width?: string = undefined;
17-
@tracked minWidth?: string = undefined;
18-
@tracked maxWidth?: string = undefined;
24+
@tracked width?: string = undefined; // css width like `100px`
25+
@tracked minWidth?: string = undefined; // css width like `100px`
26+
@tracked maxWidth?: string = undefined; // css width like `100px`
1927

2028
@tracked sortingFunction?: (a: unknown, b: unknown) => number = undefined;
2129

30+
get numericalWidth(): number {
31+
return getNumericalWidth(this.width);
32+
}
33+
34+
get numericalMinWidth(): number {
35+
return getNumericalWidth(this.minWidth);
36+
}
37+
38+
get numericalMaxWidth(): number {
39+
return getNumericalWidth(this.maxWidth);
40+
}
41+
2242
constructor(args: HdsAdvancedTableColumnType) {
2343
this.label = args.label;
2444
this.align = args.align;

‎packages/components/src/components/hds/advanced-table/th-menu/index.hbs

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
<div ...attributes>
2+
<Hds::Dropdown as |D|>
3+
<D.ToggleIcon @text="column menu" @icon="menu" @size="small" />
4+
{{#if @column.isResizable}}
5+
<D.Interactive @icon="maximize" {{on "click" (fn (mut this.isResizing) true)}}>
6+
Resize column
7+
</D.Interactive>
8+
<D.Interactive @icon="reload" {{on "click" this.resetColumnWidth}}>
9+
Reset column width
10+
</D.Interactive>
11+
{{/if}}
12+
</Hds::Dropdown>
13+
14+
{{#if this.isResizing}}
15+
Resizing
16+
{{/if}}
17+
</div>

‎packages/components/src/components/hds/advanced-table/th-menu/index.ts

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
/**
2+
* Copyright (c) HashiCorp, Inc.
3+
* SPDX-License-Identifier: MPL-2.0
4+
*/
5+
6+
import Component from '@glimmer/component';
7+
import { tracked } from '@glimmer/tracking';
8+
import HdsAdvancedTableColumn from '../models/column.ts';
9+
import { action } from '@ember/object';
10+
11+
export interface HdsAdvancedTableThMenuSignature {
12+
Args: {
13+
column: HdsAdvancedTableColumn;
14+
};
15+
Blocks: {
16+
default?: [];
17+
};
18+
Element: HTMLDivElement;
19+
}
20+
21+
export default class HdsAdvancedTableThMenu extends Component<HdsAdvancedTableThMenuSignature> {
22+
@tracked isResizing = false;
23+
24+
@action
25+
resetColumnWidth(): void {
26+
const { column } = this.args ?? {};
27+
28+
if (column) {
29+
column.width = undefined;
30+
}
31+
}
32+
}

‎packages/components/src/components/hds/advanced-table/th-resize-handle.hbs

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -3,9 +3,9 @@
33
draggable="false"
44
role="separator"
55
aria-orientation="vertical"
6-
aria-valuenow={{@column.width}}
7-
aria-valuemin={{@column.minWidth}}
8-
aria-valuemax={{@column.maxWidth}}
6+
aria-valuenow={{@column.numericalWidth}}
7+
aria-valuemin={{@column.numericalMinWidth}}
8+
aria-valuemax={{@column.numericalMaxWidth}}
99
tabindex="0"
1010
aria-label="Resize {{@column.label}} column"
1111
{{on "pointerdown" this.startResize}}

‎packages/components/src/components/hds/advanced-table/th.hbs

Lines changed: 36 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -23,40 +23,43 @@
2323
}}
2424
...attributes
2525
>
26-
{{#if @isVisuallyHidden}}
27-
<span class="sr-only">{{yield}}</span>
28-
{{else}}
29-
{{#if @tooltip}}
30-
<div class="hds-advanced-table__th-content">
31-
{{#if @isExpandable}}
32-
<Hds::AdvancedTable::ThButtonExpand
33-
@labelId={{this._labelId}}
34-
@onToggle={{@onClickToggle}}
35-
@isExpanded={{@isExpanded}}
36-
@isExpandAll={{@hasExpandAllButton}}
37-
{{this._manageExpandButton}}
38-
/>
39-
{{/if}}
40-
<span id={{this._labelId}} class="hds-typography-body-200 hds-font-weight-semibold">{{yield}}</span>
41-
<Hds::AdvancedTable::ThButtonTooltip @tooltip={{@tooltip}} @labelId={{this._labelId}} />
42-
</div>
26+
<Hds::Layout::Flex @justify="space-between" @align="center">
27+
{{#if @isVisuallyHidden}}
28+
<span class="sr-only">{{yield}}</span>
4329
{{else}}
44-
<div class="hds-advanced-table__th-content">
45-
{{#if @isExpandable}}
46-
<Hds::AdvancedTable::ThButtonExpand
47-
@labelId={{this._labelId}}
48-
@onToggle={{@onClickToggle}}
49-
@isExpanded={{@isExpanded}}
50-
@isExpandAll={{@hasExpandAllButton}}
51-
{{this._manageExpandButton}}
52-
/>
53-
{{/if}}
54-
<span class="hds-typography-body-200 hds-font-weight-semibold" id={{this._labelId}}>{{yield}}</span>
55-
</div>
30+
{{#if @tooltip}}
31+
<div class="hds-advanced-table__th-content">
32+
{{#if @isExpandable}}
33+
<Hds::AdvancedTable::ThButtonExpand
34+
@labelId={{this._labelId}}
35+
@onToggle={{@onClickToggle}}
36+
@isExpanded={{@isExpanded}}
37+
@isExpandAll={{@hasExpandAllButton}}
38+
{{this._manageExpandButton}}
39+
/>
40+
{{/if}}
41+
<span id={{this._labelId}} class="hds-typography-body-200 hds-font-weight-semibold">{{yield}}</span>
42+
<Hds::AdvancedTable::ThButtonTooltip @tooltip={{@tooltip}} @labelId={{this._labelId}} />
43+
</div>
44+
{{else}}
45+
<div class="hds-advanced-table__th-content">
46+
{{#if @isExpandable}}
47+
<Hds::AdvancedTable::ThButtonExpand
48+
@labelId={{this._labelId}}
49+
@onToggle={{@onClickToggle}}
50+
@isExpanded={{@isExpanded}}
51+
@isExpandAll={{@hasExpandAllButton}}
52+
{{this._manageExpandButton}}
53+
/>
54+
{{/if}}
55+
<span class="hds-typography-body-200 hds-font-weight-semibold" id={{this._labelId}}>{{yield}}</span>
56+
</div>
57+
{{/if}}
5658
{{/if}}
57-
{{/if}}
5859

59-
{{#if @column.isResizable}}
60-
<Hds::AdvancedTable::ThResizeHandle @column={{@column}} @tableHeight={{@tableHeight}} />
61-
{{/if}}
60+
{{#if @column.isResizable}}
61+
<Hds::AdvancedTable::ThMenu @column={{@column}} />
62+
<Hds::AdvancedTable::ThResizeHandle @column={{@column}} @tableHeight={{@tableHeight}} />
63+
{{/if}}
64+
</Hds::Layout::Flex>
6265
</div>

‎packages/components/src/template-registry.ts

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@ import type HdsAdvancedTableTdComponent from './components/hds/advanced-table/td
1212
import type HdsAdvancedTableThButtonExpandComponent from './components/hds/advanced-table/th-button-expand';
1313
import type HdsAdvancedTableThButtonSortComponent from './components/hds/advanced-table/th-button-sort';
1414
import type HdsAdvancedTableThComponent from './components/hds/advanced-table/th';
15+
import type HdsAdvancedTableThMenuComponent from './components/hds/advanced-table/th-menu';
1516
import type HdsAdvancedTableThButtonTooltipComponent from './components/hds/advanced-table/th-button-tooltip';
1617
import type HdsAdvancedTableThResizeHandle from './components/hds/advanced-table/th-resize-handle.ts';
1718
import type HdsAdvancedTableThSortComponent from './components/hds/advanced-table/th-sort';
@@ -251,6 +252,8 @@ export default interface HdsComponentsRegistry {
251252
'hds/advanced-table/td': typeof HdsAdvancedTableTdComponent;
252253
'Hds::AdvancedTable::Th': typeof HdsAdvancedTableThComponent;
253254
'hds/advanced-table/th': typeof HdsAdvancedTableThComponent;
255+
'Hds::AdvancedTable::ThMenu': typeof HdsAdvancedTableThMenuComponent;
256+
'hds/advanced-table/th-menu': typeof HdsAdvancedTableThMenuComponent;
254257
'Hds::AdvancedTable::Tr': typeof HdsAdvancedTableTrComponent;
255258
'hds/advanced-table/tr': typeof HdsAdvancedTableTrComponent;
256259
'Hds::AdvancedTable::ThButtonExpand': typeof HdsAdvancedTableThButtonExpandComponent;

0 commit comments

Comments
 (0)