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

Accessibility fixes #4788

Merged
merged 6 commits into from
Aug 13, 2024
Merged

Accessibility fixes #4788

Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
dac286c
updated renderIndicators function
Jaylyn-Barbee Aug 8, 2024
3e6d3b4
fixed color contrast issue in code blocks in docs
Jaylyn-Barbee Aug 8, 2024
f7ab232
fixed scrollbar appearing when hovering menu item in nav at top of si…
Jaylyn-Barbee Aug 8, 2024
d592056
fixed nested buttons issue
Jaylyn-Barbee Aug 8, 2024
28d3aa6
added aria pressed to the toggle button so that the screen reader ann…
Jaylyn-Barbee Aug 13, 2024
49f7931
Merge branch 'staging' into jay/accessibility-0808
Jaylyn-Barbee Aug 13, 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
67 changes: 33 additions & 34 deletions apps/pwabuilder/src/script/pages/app-report.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -916,26 +916,28 @@ export class AppReport extends LitElement {
width: 100%;
box-shadow: 0px 4px 30px 0px #00000014;
border-radius: var(--card-border-radius);
padding: 20px;
background-color: #ffffff;
display: flex;
flex-direction: column;
width: 100%;
}

#todo-detail::part(base) {
#todo-detail {
border-radius: var(--card-border-radius);
border: none;
display: flex;
flex-direction: column;
width: 100%;
}

#todo-detail::part(header) {
.details-summary {
height: 60px;
}

#todo-detail::part(summary) {
color: var(--primary-color);
font-size: 20px;
font-weight: bold;
}

#todo-detail::part(content){
padding-top: 0;
padding-bottom: 1em;
margin-bottom: 20px;
height: fit-content;
}

#todo-summary-left {
Expand All @@ -946,6 +948,7 @@ export class AppReport extends LitElement {

#todo-summary-left > h2 {
font-size: var(--subheader-font-size);
margin: 0;
}

#pagination-actions {
Expand Down Expand Up @@ -1901,7 +1904,6 @@ export class AppReport extends LitElement {

// Expands the Action items details on load
firstUpdated() {
this.rotateNinety("todo", undefined, true);

}

Expand Down Expand Up @@ -2439,11 +2441,7 @@ export class AppReport extends LitElement {
this.showConfirmationModal = false;

details.forEach((detail: any) => {
if(detail.id != "todo-detail"){
detail.hide();
} else {
detail.show()
}
detail.hide();
});

// reset retest data
Expand Down Expand Up @@ -2800,23 +2798,27 @@ export class AppReport extends LitElement {
})

if(yellow + purple + red != 0){

let redSelected = this.filterList.includes("required");
let yellowSelected = this.filterList.includes("recommended");
let purpleSelected = this.filterList.includes("enhancement");

let redClassMap = classMap({'indicator' : true, 'selected': this.filterList.includes("required")});
let yellowClassMap = classMap({'indicator' : true, 'selected': this.filterList.includes("recommended")});
let purpleClassMap = classMap({'indicator' : true, 'selected': this.filterList.includes("enhancement")});
let redClassMap = classMap({'indicator' : true, 'selected': redSelected});
let yellowClassMap = classMap({'indicator' : true, 'selected': yellowSelected});
let purpleClassMap = classMap({'indicator' : true, 'selected': purpleSelected});

return html`
<div id="indicators-holder">
${red != 0 ?
html`<button type="button" class=${redClassMap} tabindex="0" @click=${(e: Event) => this.filterTodoItems("required", e)}><img src=${this.filterList.includes("required") ? stop_white_src : stop_src} alt="invalid result icon"/><p>${red}</p></button>`
html`<button type="button" class=${redClassMap} data-indicator="required" aria-pressed="${redSelected}" tabindex="0" @click=${(e: Event) => this.filterTodoItems("required", e)}><img src=${redSelected ? stop_white_src : stop_src} alt="invalid result icon"/><p>${red}</p></button>`
: null
}
${yellow != 0 ?
html`<button type="button" class=${yellowClassMap} tabindex="0" @click=${(e: Event) => this.filterTodoItems("yellow", e)}><img src=${this.filterList.includes("recommended") ? yield_white_src : yield_src} alt="yield result icon"/><p>${yellow}</p></button>`
html`<button type="button" class=${yellowClassMap} data-indicator="yellow" aria-pressed="${yellowSelected}" tabindex="0" @click=${(e: Event) => this.filterTodoItems("yellow", e)}><img src=${yellowSelected ? yield_white_src : yield_src} alt="yield result icon"/><p>${yellow}</p></button>`
: null
}
${purple != 0 ?
html`<button type="button" class=${purpleClassMap} tabindex="0" @click=${(e: Event) => this.filterTodoItems("enhancement", e)}><img src=${this.filterList.includes("enhancement") ? enhancement_white_src : enhancement_src} alt="enhancement result icon"/><p>${purple}</p></button>`
html`<button type="button" class=${purpleClassMap} data-indicator="enhancement" aria-pressed="${purpleSelected}" tabindex="0" @click=${(e: Event) => this.filterTodoItems("enhancement", e)}><img src=${purpleSelected ? enhancement_white_src : enhancement_src} alt="enhancement result icon"/><p>${purple}</p></button>`
: null
}
</div>`
Expand All @@ -2829,11 +2831,13 @@ export class AppReport extends LitElement {
filterTodoItems(filter: string, e: Event){
e.stopPropagation();

/* let button = this.shadowRoot!.querySelector('[data-indicator="' + filter + '"]');
let isPressed = button!.getAttribute("aria-pressed") === "true";
button!.setAttribute("aria-pressed", isPressed ? "false" : "true"); */

recordPWABuilderProcessStep(`${filter}_indicator_clicked`, AnalyticsBehavior.ProcessCheckpoint);

this.pageNumber = 1;
/* let todoDetail: SlDetails = (this.shadowRoot!.getElementById('todo-detail')! as unknown as SlDetails);
todoDetail.show(); */

this.stopShowingNotificationTooltip = true;
// if its in the list, remove it, else add it
Expand Down Expand Up @@ -2912,7 +2916,7 @@ export class AppReport extends LitElement {
dialogContent = html`
<p>Retesting your site now!</p>
`;
}
}
else if (this.readdDenied) {
dialogContent = html`
<p>Add your new ${this.thingToAdd}, and then we can retest your site. </p>
Expand Down Expand Up @@ -3043,8 +3047,8 @@ export class AppReport extends LitElement {
src=${`/assets/windows_icon${this.darkMode ? "_light" : ""}.svg`}
alt="Windows"
/>
<img
title="iOS"
<img
title="iOS"
src=${`/assets/apple_icon${this.darkMode ? "_light" : ""}.svg`}
alt="iOS" />
<img
Expand Down Expand Up @@ -3094,11 +3098,8 @@ export class AppReport extends LitElement {
}

<div id="todo">
<sl-details
<div
id="todo-detail"
@sl-show=${(e: Event) => this.rotateNinety("todo", e)}
@sl-hide=${(e: Event) => this.rotateZero("todo", e)}
open
>
<div class="details-summary" slot="summary">
<div id="todo-summary-left">
Expand All @@ -3122,8 +3123,6 @@ export class AppReport extends LitElement {
:
null}
</div>
<img class="dropdown_icon" data-card="todo" src="/assets/new/dropdownIcon.svg" alt="dropdown toggler"/>

</div>
<div class="todo-items-holder">
${this.filteredTodoItems.length > 0 ? this.paginate().map((todo: any) =>
Expand Down Expand Up @@ -3173,7 +3172,7 @@ export class AppReport extends LitElement {
</button>
</div>` : null}
<div id="pageStatus" aria-live="polite" aria-atomic="true"></div>
</sl-details>
</div>
</div>

<div id="manifest" class="flex-col">
Expand Down
Loading