Skip to content
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

Fix accessibility table examples #23821

Merged
merged 8 commits into from
Apr 21, 2022
Merged

Fix accessibility table examples #23821

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
037d246
fix(material/table): accessibility improvements on table examples for…
forsti0506 Oct 16, 2021
b5fb4ab
fix(material/table): th with nbsp; instead of span
forsti0506 Oct 22, 2021
21c1079
fix(material/table): using columnsToDisplay length for colspan attribute
forsti0506 Feb 28, 2022
84192b1
Merge branch 'angular:master' into fix-accessibility-table-examples
forsti0506 Apr 3, 2022
3c7116b
feat(material-experimental/mdc-table): examples fixed for accessibility
forsti0506 Apr 3, 2022
8e09f3d
Merge branch 'fix-accessibility-table-examples' of https://github.com…
forsti0506 Apr 3, 2022
e5467b8
feat(material-experimental/mdc-table): fixed table sticky complex fle…
forsti0506 Apr 3, 2022
9339019
feat(material-experimental/mdc-table): fixed section closing in stick…
forsti0506 Apr 4, 2022
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
6 changes: 3 additions & 3 deletions .../material-experimental/mdc-table/table-expandable-rows/table-expandable-rows-example.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@

<!-- Expanded Content Column - The detail row is made up of this one column that spans across all columns -->
<ng-container matColumnDef="expandedDetail">
<td mat-cell *matCellDef="let element" [attr.colspan]="columnsToDisplay.length">
<td mat-cell *matCellDef="let element" [attr.colspan]="columnsToDisplayWithExpand.length">
<div class="example-element-detail"
[@detailExpand]="element == expandedElement ? 'expanded' : 'collapsed'">
<div class="example-element-diagram">
Expand All @@ -25,8 +25,8 @@
</td>
</ng-container>

<tr mat-header-row *matHeaderRowDef="columnsToDisplay"></tr>
<tr mat-row *matRowDef="let element; columns: columnsToDisplay;"
<tr mat-header-row *matHeaderRowDef="columnsToDisplayWithExpand"></tr>
<tr mat-row *matRowDef="let element; columns: columnsToDisplayWithExpand;"
class="example-element-row"
[class.example-expanded-row]="expandedElement === element"
(click)="expandedElement = expandedElement === element ? null : element">
Expand Down
1 change: 1 addition & 0 deletions ...es/material-experimental/mdc-table/table-expandable-rows/table-expandable-rows-example.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,7 @@ import {animate, state, style, transition, trigger} from '@angular/animations';
export class TableExpandableRowsExample {
dataSource = ELEMENT_DATA;
columnsToDisplay = ['name', 'weight', 'symbol', 'position'];
columnsToDisplayWithExpand = [...this.columnsToDisplay, 'expand'];
expandedElement: PeriodicElement | null;
}

Expand Down
6 changes: 3 additions & 3 deletions ...es/material-experimental/mdc-table/table-sticky-columns/table-sticky-columns-example.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
<div class="example-container mat-elevation-z8">
<section class="example-container mat-elevation-z8" tabindex="0">
<table mat-table [dataSource]="dataSource">

<!-- Name Column -->
Expand Down Expand Up @@ -27,7 +27,7 @@

<!-- Star Column -->
<ng-container matColumnDef="star" stickyEnd>
<th mat-header-cell *matHeaderCellDef></th>
<th mat-header-cell *matHeaderCellDef aria-label="row actions">&nbsp;</th>
<td mat-cell *matCellDef="let element">
<mat-icon>more_vert</mat-icon>
</td>
Expand All @@ -36,4 +36,4 @@
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</table>
</div>
</section>
4 changes: 2 additions & 2 deletions ...l-experimental/mdc-table/table-sticky-complex-flex/table-sticky-complex-flex-example.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -35,7 +35,7 @@
</mat-button-toggle-group>
</div>

<div class="example-container mat-elevation-z8">
<section class="example-container mat-elevation-z8" tabindex="0">
<mat-table [dataSource]="dataSource" *ngFor="let table of tables">
<ng-container matColumnDef="position" [sticky]="isSticky(stickyColumns, 'position')">
<mat-header-cell *matHeaderCellDef> Position </mat-header-cell>
Expand Down Expand Up @@ -75,4 +75,4 @@
<mat-footer-row *matFooterRowDef="displayedColumns; sticky: isSticky(stickyFooters, 'footer-1')"></mat-footer-row>
<mat-footer-row *matFooterRowDef="displayedColumns; sticky: isSticky(stickyFooters, 'footer-2')"></mat-footer-row>
</mat-table>
</div>
</section>
4 changes: 2 additions & 2 deletions ...es/material-experimental/mdc-table/table-sticky-complex/table-sticky-complex-example.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -35,7 +35,7 @@
</mat-button-toggle-group>
</div>

<div class="example-container mat-elevation-z8">
<section class="example-container mat-elevation-z8" tabindex="0">
<table mat-table [dataSource]="dataSource" *ngFor="let table of tables">
<ng-container matColumnDef="position" [sticky]="isSticky(stickyColumns, 'position')">
<th mat-header-cell *matHeaderCellDef> Position </th>
Expand Down Expand Up @@ -75,4 +75,4 @@
<tr mat-footer-row *matFooterRowDef="displayedColumns; sticky: isSticky(stickyFooters, 'footer-1')"></tr>
<tr mat-footer-row *matFooterRowDef="displayedColumns; sticky: isSticky(stickyFooters, 'footer-2')"></tr>
</table>
</div>
</section>
4 changes: 2 additions & 2 deletions ...ples/material-experimental/mdc-table/table-sticky-footer/table-sticky-footer-example.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
<div class="example-container mat-elevation-z8">
<section class="example-container mat-elevation-z8" tabindex="0">
<table mat-table [dataSource]="transactions">
<!-- Item Column -->
<ng-container matColumnDef="item">
Expand All @@ -18,4 +18,4 @@
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
<tr mat-footer-row *matFooterRowDef="displayedColumns; sticky: true"></tr>
</table>
</div>
</section>
4 changes: 2 additions & 2 deletions ...ples/material-experimental/mdc-table/table-sticky-header/table-sticky-header-example.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
<div class="example-container mat-elevation-z8">
<section class="example-container mat-elevation-z8" tabindex="0">
<table mat-table [dataSource]="dataSource">

<!-- Position Column -->
Expand Down Expand Up @@ -28,4 +28,4 @@
<tr mat-header-row *matHeaderRowDef="displayedColumns; sticky: true"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</table>
</div>
</section>
15 changes: 12 additions & 3 deletions ...mponents-examples/material/table/table-expandable-rows/table-expandable-rows-example.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,10 +5,19 @@
<th mat-header-cell *matHeaderCellDef> {{column}} </th>
<td mat-cell *matCellDef="let element"> {{element[column]}} </td>
</ng-container>
<ng-container matColumnDef="expand">
<th mat-header-cell *matHeaderCellDef aria-label="row actions">&nbsp;</th>
<td mat-cell *matCellDef="let element">
<button mat-icon-button aria-label="expand row" (click)="(expandedElement = expandedElement === element ? null : element); $event.stopPropagation()">
<mat-icon *ngIf="expandedElement !== element">keyboard_arrow_down</mat-icon>
<mat-icon *ngIf="expandedElement === element">keyboard_arrow_up</mat-icon>
</button>
</td>
</ng-container>

<!-- Expanded Content Column - The detail row is made up of this one column that spans across all columns -->
<ng-container matColumnDef="expandedDetail">
<td mat-cell *matCellDef="let element" [attr.colspan]="columnsToDisplay.length">
<td mat-cell *matCellDef="let element" [attr.colspan]="columnsToDisplayWithExpand.length">
<div class="example-element-detail"
[@detailExpand]="element == expandedElement ? 'expanded' : 'collapsed'">
<div class="example-element-diagram">
Expand All @@ -25,8 +34,8 @@
</td>
</ng-container>

<tr mat-header-row *matHeaderRowDef="columnsToDisplay"></tr>
<tr mat-row *matRowDef="let element; columns: columnsToDisplay;"
<tr mat-header-row *matHeaderRowDef="columnsToDisplayWithExpand"></tr>
<tr mat-row *matRowDef="let element; columns: columnsToDisplayWithExpand;"
class="example-element-row"
[class.example-expanded-row]="expandedElement === element"
(click)="expandedElement = expandedElement === element ? null : element">
Expand Down
1 change: 1 addition & 0 deletions ...components-examples/material/table/table-expandable-rows/table-expandable-rows-example.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,7 @@ import {animate, state, style, transition, trigger} from '@angular/animations';
export class TableExpandableRowsExample {
dataSource = ELEMENT_DATA;
columnsToDisplay = ['name', 'weight', 'symbol', 'position'];
columnsToDisplayWithExpand = [...this.columnsToDisplay, 'expand'];
expandedElement: PeriodicElement | null;
}

Expand Down
6 changes: 3 additions & 3 deletions ...components-examples/material/table/table-sticky-columns/table-sticky-columns-example.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
<div class="example-container mat-elevation-z8">
<section class="example-container mat-elevation-z8" tabindex="0">
<table mat-table [dataSource]="dataSource">

<!-- Name Column -->
Expand Down Expand Up @@ -27,7 +27,7 @@

<!-- Star Column -->
<ng-container matColumnDef="star" stickyEnd>
<th mat-header-cell *matHeaderCellDef></th>
<th mat-header-cell *matHeaderCellDef aria-label="row actions">&nbsp;</th>
<td mat-cell *matCellDef="let element">
<mat-icon>more_vert</mat-icon>
</td>
Expand All @@ -36,4 +36,4 @@
<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</table>
</div>
</section>
4 changes: 2 additions & 2 deletions ...-examples/material/table/table-sticky-complex-flex/table-sticky-complex-flex-example.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -35,7 +35,7 @@
</mat-button-toggle-group>
</div>

<div class="example-container mat-elevation-z8">
<section class="example-container mat-elevation-z8" tabindex="0">
<mat-table [dataSource]="dataSource" *ngFor="let table of tables">
<ng-container matColumnDef="position" [sticky]="isSticky(stickyColumns, 'position')">
<mat-header-cell *matHeaderCellDef> Position </mat-header-cell>
Expand Down Expand Up @@ -75,4 +75,4 @@
<mat-footer-row *matFooterRowDef="displayedColumns; sticky: isSticky(stickyFooters, 'footer-1')"></mat-footer-row>
<mat-footer-row *matFooterRowDef="displayedColumns; sticky: isSticky(stickyFooters, 'footer-2')"></mat-footer-row>
</mat-table>
</div>
</section>
4 changes: 2 additions & 2 deletions ...components-examples/material/table/table-sticky-complex/table-sticky-complex-example.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -35,7 +35,7 @@
</mat-button-toggle-group>
</div>

<div class="example-container mat-elevation-z8">
<section class="example-container mat-elevation-z8" tabindex="0">
<table mat-table [dataSource]="dataSource" *ngFor="let table of tables">
<ng-container matColumnDef="position" [sticky]="isSticky(stickyColumns, 'position')">
<th mat-header-cell *matHeaderCellDef> Position </th>
Expand Down Expand Up @@ -75,4 +75,4 @@
<tr mat-footer-row *matFooterRowDef="displayedColumns; sticky: isSticky(stickyFooters, 'footer-1')"></tr>
<tr mat-footer-row *matFooterRowDef="displayedColumns; sticky: isSticky(stickyFooters, 'footer-2')"></tr>
</table>
</div>
</section>
4 changes: 2 additions & 2 deletions src/components-examples/material/table/table-sticky-footer/table-sticky-footer-example.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
<div class="example-container mat-elevation-z8">
<section class="example-container mat-elevation-z8" tabindex="0">
<table mat-table [dataSource]="transactions">
<!-- Item Column -->
<ng-container matColumnDef="item">
Expand All @@ -18,4 +18,4 @@
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
<tr mat-footer-row *matFooterRowDef="displayedColumns; sticky: true"></tr>
</table>
</div>
</section>
4 changes: 2 additions & 2 deletions src/components-examples/material/table/table-sticky-header/table-sticky-header-example.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
<div class="example-container mat-elevation-z8">
<section class="example-container mat-elevation-z8" tabindex="0">
<table mat-table [dataSource]="dataSource">

<!-- Position Column -->
Expand Down Expand Up @@ -28,4 +28,4 @@
<tr mat-header-row *matHeaderRowDef="displayedColumns; sticky: true"></tr>
<tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
</table>
</div>
</section>