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(mat/paginator): fix focus issues with paginator buttons #29379

Merged
merged 12 commits into from
Oct 3, 2024
Merged

fix(mat/paginator): fix focus issues with paginator buttons #29379

Show file tree
Hide file tree
Changes from 11 commits
Commits
Show all changes
12 commits
Select commit Hold shift + click to select a range
5fe60b7
fix(material/paginator): fix focus issues with paginator buttons
DBowen33 Jul 3, 2024
b42fc6b
fix(material/paginator): remove console logs
DBowen33 Jul 3, 2024
12ce3c1
fix(material/paginator): update api
DBowen33 Jul 3, 2024
6095e61
fix(material/paginator): fix comment
DBowen33 Jul 3, 2024
0a12d40
fix(material/paginator): add disabled interactive attribute to pagina…
DBowen33 Jul 8, 2024
acaa1c2
fix(material/paginator): fix tests
DBowen33 Jul 8, 2024
bac7217
fix(material/paginator): fix more broken tests
DBowen33 Jul 8, 2024
14b5b7e
fix(material/paginator): fix spec test
DBowen33 Jul 8, 2024
b8fd8e8
fix(material/paginator): fix unit tests
DBowen33 Jul 11, 2024
24c28f6
fix(material/paginator): merge
DBowen33 Sep 23, 2024
3768788
fix(material/paginator): fix style issue
DBowen33 Sep 24, 2024
a87f453
fix(material/datepicker): remove disabled class
DBowen33 Oct 3, 2024
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
20 changes: 12 additions & 8 deletions src/material/paginator/paginator.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -43,13 +43,14 @@

@if (showFirstLastButtons) {
<button mat-icon-button type="button"
class="mat-mdc-paginator-navigation-first"
class="mat-mdc-paginator-navigation-first mat-mdc-button-disabled-interactive"
DBowen33 marked this conversation as resolved.
Show resolved Hide resolved
(click)="firstPage()"
[attr.aria-label]="_intl.firstPageLabel"
[matTooltip]="_intl.firstPageLabel"
[matTooltipDisabled]="_previousButtonsDisabled()"
[matTooltipPosition]="'above'"
[disabled]="_previousButtonsDisabled()">
[disabled]="_previousButtonsDisabled()"
disabledInteractive>
<svg class="mat-mdc-paginator-icon"
viewBox="0 0 24 24"
focusable="false"
Expand All @@ -59,13 +60,14 @@
</button>
}
<button mat-icon-button type="button"
class="mat-mdc-paginator-navigation-previous"
class="mat-mdc-paginator-navigation-previous mat-mdc-button-disabled-interactive"
(click)="previousPage()"
[attr.aria-label]="_intl.previousPageLabel"
[matTooltip]="_intl.previousPageLabel"
[matTooltipDisabled]="_previousButtonsDisabled()"
[matTooltipPosition]="'above'"
[disabled]="_previousButtonsDisabled()">
[disabled]="_previousButtonsDisabled()"
disabledInteractive>
<svg class="mat-mdc-paginator-icon"
viewBox="0 0 24 24"
focusable="false"
Expand All @@ -74,13 +76,14 @@
</svg>
</button>
<button mat-icon-button type="button"
class="mat-mdc-paginator-navigation-next"
class="mat-mdc-paginator-navigation-next mat-mdc-button-disabled-interactive"
(click)="nextPage()"
[attr.aria-label]="_intl.nextPageLabel"
[matTooltip]="_intl.nextPageLabel"
[matTooltipDisabled]="_nextButtonsDisabled()"
[matTooltipPosition]="'above'"
[disabled]="_nextButtonsDisabled()">
[disabled]="_nextButtonsDisabled()"
disabledInteractive>
<svg class="mat-mdc-paginator-icon"
viewBox="0 0 24 24"
focusable="false"
Expand All @@ -90,13 +93,14 @@
</button>
@if (showFirstLastButtons) {
<button mat-icon-button type="button"
class="mat-mdc-paginator-navigation-last"
class="mat-mdc-paginator-navigation-last mat-mdc-button-disabled-interactive"
(click)="lastPage()"
[attr.aria-label]="_intl.lastPageLabel"
[matTooltip]="_intl.lastPageLabel"
[matTooltipDisabled]="_nextButtonsDisabled()"
[matTooltipPosition]="'above'"
[disabled]="_nextButtonsDisabled()">
[disabled]="_nextButtonsDisabled()"
disabledInteractive>
<svg class="mat-mdc-paginator-icon"
viewBox="0 0 24 24"
focusable="false"
Expand Down
2 changes: 1 addition & 1 deletion src/material/paginator/paginator.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -119,7 +119,7 @@ $button-icon-size: 28px;
) {
@include token-utils.create-token-slot(fill, enabled-icon-color);

.mat-mdc-icon-button[disabled] & {
.mat-mdc-icon-button[aria-disabled] & {
@include token-utils.create-token-slot(fill, disabled-icon-color);
}
}
Expand Down
8 changes: 4 additions & 4 deletions src/material/paginator/paginator.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -529,10 +529,10 @@ describe('MatPaginator', () => {
fixture.detectChanges();

expect(select.disabled).toBe(true);
expect(getPreviousButton(fixture).hasAttribute('disabled')).toBe(true);
expect(getNextButton(fixture).hasAttribute('disabled')).toBe(true);
expect(getFirstButton(fixture).hasAttribute('disabled')).toBe(true);
expect(getLastButton(fixture).hasAttribute('disabled')).toBe(true);
expect(getPreviousButton(fixture).hasAttribute('aria-disabled')).toBe(true);
expect(getNextButton(fixture).hasAttribute('aria-disabled')).toBe(true);
expect(getFirstButton(fixture).hasAttribute('aria-disabled')).toBe(true);
expect(getLastButton(fixture).hasAttribute('aria-disabled')).toBe(true);
});

it('should be able to configure the default options via a provider', () => {
Expand Down
4 changes: 2 additions & 2 deletions src/material/paginator/testing/paginator-harness.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -50,13 +50,13 @@ export class MatPaginatorHarness extends ComponentHarness {

/** Returns whether or not the next page button is disabled. */
async isNextPageDisabled(): Promise<boolean> {
const disabledValue = await (await this._nextButton()).getAttribute('disabled');
const disabledValue = await (await this._nextButton()).getAttribute('aria-disabled');
return disabledValue == 'true';
}

/* Returns whether or not the previous page button is disabled. */
async isPreviousPageDisabled(): Promise<boolean> {
const disabledValue = await (await this._previousButton()).getAttribute('disabled');
const disabledValue = await (await this._previousButton()).getAttribute('aria-disabled');
return disabledValue == 'true';
}

Expand Down
Loading