Skip to content

Commit

Permalink
fix(ld-table): add aria labels to sort buttons
Browse files Browse the repository at this point in the history
  • Loading branch information
@borisdiakur
borisdiakur committed Nov 8, 2023
1 parent 3d86044 commit 5fe63e0
Show file tree
Hide file tree
Showing 2 changed files with 21 additions and 11 deletions.
8 changes: 8 additions & 0 deletions src/liquid/components/ld-table/ld-table-header/ld-table-header.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -53,6 +53,12 @@ export class LdTableHeader {
/** Defines whether the column is sortable. */
@Prop() sortable? = false

/** The aria label used for sort ascending buttons. */
@Prop() sortAscLabel? = 'Sort ascending'

/** The aria label used for sort descending buttons. */
@Prop() sortDescLabel? = 'Sort descending'

/** Defines whether the column is sorted and in which order. */
@Prop({ mutable: true }) sortOrder?: 'asc' | 'desc'

Expand Down Expand Up @@ -152,6 +158,7 @@ export class LdTableHeader {
{this.sortable && (
<div class="ld-table-header__sort-buttons" part="sort-buttons">
<ld-button
aria-label={this.sortAscLabel}
aria-disabled={this.sortOrder === 'asc' ? 'true' : undefined}
mode="ghost"
onClick={(ev) => this.onSortClick(ev, 'asc')}
Expand All @@ -161,6 +168,7 @@ export class LdTableHeader {
{this.renderChevron(true)}
</ld-button>
<ld-button
aria-label={this.sortDescLabel}
aria-disabled={this.sortOrder === 'desc' ? 'true' : undefined}
mode="ghost"
onClick={(ev) => this.onSortClick(ev, 'desc')}
Expand Down
24 changes: 13 additions & 11 deletions src/liquid/components/ld-table/ld-table-header/readme.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,17 +22,19 @@ Please refer to the [`ld-table` documentation](components/ld-table/) for usage e

## Properties

| Property | Attribute | Description | Type | Default |
| ----------- | ------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------ | ----------- |
| `abbr` | `abbr` | This attribute contains a short abbreviated description of the cell's content. Some user-agents, such as speech readers, may present this description before the content itself. | `string` | `undefined` |
| `colspan` | `colspan` | Indicates for how many columns the cell extends. | `number` | `undefined` |
| `headers` | `headers` | This attribute contains a list of space-separated strings, each corresponding to the id attribute of the <th> elements that apply to this element. | `string` | `undefined` |
| `key` | `key` | for tracking the node's identity when working with lists | `string \| number` | `undefined` |
| `ref` | `ref` | reference to component | `any` | `undefined` |
| `rowspan` | `rowspan` | Indicates for how many rows the cell extends. | `number` | `undefined` |
| `scope` | `scope` | Defines the cells that the header element relates to. | `string` | `undefined` |
| `sortOrder` | `sort-order` | Defines whether the column is sorted and in which order. | `"asc" \| "desc"` | `undefined` |
| `sortable` | `sortable` | Defines whether the column is sortable. | `boolean` | `false` |
| Property | Attribute | Description | Type | Default |
| --------------- | ----------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------ | ------------------- |
| `abbr` | `abbr` | This attribute contains a short abbreviated description of the cell's content. Some user-agents, such as speech readers, may present this description before the content itself. | `string` | `undefined` |
| `colspan` | `colspan` | Indicates for how many columns the cell extends. | `number` | `undefined` |
| `headers` | `headers` | This attribute contains a list of space-separated strings, each corresponding to the id attribute of the <th> elements that apply to this element. | `string` | `undefined` |
| `key` | `key` | for tracking the node's identity when working with lists | `string \| number` | `undefined` |
| `ref` | `ref` | reference to component | `any` | `undefined` |
| `rowspan` | `rowspan` | Indicates for how many rows the cell extends. | `number` | `undefined` |
| `scope` | `scope` | Defines the cells that the header element relates to. | `string` | `undefined` |
| `sortAscLabel` | `sort-asc-label` | The aria label used for sort ascending buttons. | `string` | `'Sort ascending'` |
| `sortDescLabel` | `sort-desc-label` | The aria label used for sort descending buttons. | `string` | `'Sort descending'` |
| `sortOrder` | `sort-order` | Defines whether the column is sorted and in which order. | `"asc" \| "desc"` | `undefined` |
| `sortable` | `sortable` | Defines whether the column is sortable. | `boolean` | `false` |


## Events
Expand Down

0 comments on commit 5fe63e0

Please sign in to comment.