Skip to content

Commit

Permalink
Accessibility fixes (#4788)
Browse files Browse the repository at this point in the history 
- Turns the todo-detail into just a box. Fixes nested button issue.
#4747
- #4746
  • Loading branch information
@Jaylyn-Barbee
Jaylyn-Barbee authored Aug 13, 2024
1 parent 6bfdc6d commit fd665db
Showing 1 changed file with 33 additions and 34 deletions.
67 changes: 33 additions & 34 deletions apps/pwabuilder/src/script/pages/app-report.ts
View file
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

0 comments on commit fd665db

Please sign in to comment.