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 updates: alt text, tabbing, screen reader improvements, filter update #307

Merged
merged 4 commits into from
Dec 11, 2024
Merged

Accessibility updates: alt text, tabbing, screen reader improvements, filter update #307

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
55d41a2
accessibility updates - alt text, tabbing, screen reader dates, filte…
Dec 10, 2024
bce0775
removed unnecessary lines
Dec 10, 2024
873c647
removed unnecessary line
acobbb Dec 10, 2024
2e54b7b
Merge branch 'epsilon' into main
deejay-hub Dec 11, 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
6 changes: 6 additions & 0 deletions force-app/main/default/classes/TimelineService.cls
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -128,6 +128,7 @@ public with sharing class TimelineService {
'Parent_Object__c =:parentConfigType'; //NOPMD

List<Timeline_Configuration__mdt> listOfTimelineConfigurations = Database.query(queryTimelineConfiguration); //NOPMD
Map<ID, Timeline_Configuration__mdt> timelineConfigObjectName = new Map <ID, Timeline_Configuration__mdt>([SELECT Id, Object_Name__c FROM Timeline_Configuration__mdt]);

if (listofTimelineConfigurations.size() < 1) {
String errorMsg =
Expand All @@ -141,6 +142,9 @@ public with sharing class TimelineService {

for (Timeline_Configuration__mdt timelineConfigurationRecord : listOfTimelineConfigurations) {
TimelineRecord timelineRecord = new timelineRecord();
Schema.SObjectType timelineRecordObjectType = Schema.getGlobalDescribe().get(timelineConfigurationRecord.Object_Name__c);
Schema.DescribeSObjectResult timelineDescribeResult = timelineRecordObjectType.getDescribe();
timelineRecord.objectLabel = timelineDescribeResult.getLabel();
timelineRecord.relationshipName = timelineConfigurationRecord.Relationship_Name__c;
timelineRecord.icon = timelineConfigurationRecord.Icon__c;
timelineRecord.iconBackground = timelineConfigurationRecord.Icon_Background_Colour__c;
Expand Down Expand Up @@ -368,6 +372,7 @@ public with sharing class TimelineService {
mapData.put('positionDateValue', positionValues.get('value'));
mapData.put('positionDateType', positionValues.get('type'));
mapData.put('objectName', tr.objectName);
mapData.put('objectLabel', tr.objectLabel);
mapData.put('fallbackTooltipField', fallbackValues.get('label'));
mapData.put('fallbackTooltipValue', fallbackValues.get('value'));
mapData.put('drilldownId', drilldownIdValues.get('value'));
Expand Down Expand Up @@ -658,6 +663,7 @@ public with sharing class TimelineService {
private String positionDateValue;
private String positionDateType;
private String objectName;
private String objectLabel;
private String type;
private String tooltipIdField;
private String tooltipObject;
Expand Down
8 changes: 8 additions & 0 deletions force-app/main/default/labels/CustomLabels.labels-meta.xml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -104,6 +104,14 @@
<shortDescription>Timeline_Label_Filter_Type_Legend</shortDescription>
<value>Types to Show</value>
</labels>
<labels>
<fullName>Timeline_Label_Filter_Date_Legend</fullName>
<categories>Timeline</categories>
<language>en_US</language>
<protected>true</protected>
<shortDescription>Timeline_Label_Filter_Date_Legend</shortDescription>
<value>Dates in View</value>
</labels>
<labels>
<fullName>Timeline_Label_Filters</fullName>
<categories>Timeline</categories>
Expand Down
16 changes: 16 additions & 0 deletions force-app/main/default/lwc/timeline/timeline.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -313,6 +313,22 @@
display: none;
}

.sr-only {
font-size: 0;
}

.sticky-button {
position: sticky;
bottom: 0;
background-color: white;
padding: 5px;
}

.slds-panel__body {
padding-bottom: 50px;
}

.timeline-summary-verbose {
padding-right: 10px;

}
259 changes: 112 additions & 147 deletions force-app/main/default/lwc/timeline/timeline.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,165 +1,137 @@
<!-- sldsValidatorIgnore -->
<template>
<!--main timeline component-->
<article class="slds-card slds-card_boundary slds-card_related-list-fix">
<div class="slds-card__header slds-grid">
<header class="slds-media slds-media_center slds-has-flexi-truncate">
<div class="slds-media__body">
<template lwc:if={isLoaded}>
<h2 class="slds-card__header-title">
{timelineTitle}
</h2>
</template>
<template lwc:else>
<div class="timeline-container">
<!--header-->
<div class="slds-grid slds-grid_align-spread">
<div class="slds-col slds-shrink slds-align-middle">
<template lwc:if={isLoaded}>
<h3 class="slds-text-heading_medium">{timelineTitle}</h3>
</template>
<template lwc:else>
<div class="stencil-value" style="margin-left: 10px"></div>
<!--spinner when component is loading-->
<div class="stencil-timeline-spinner">
<lightning-spinner variant="brand" alternative-text="Loading" size="small"></lightning-spinner>
<lightning-spinner alternative-text="Loading" size="small"></lightning-spinner>
</div>
<!--end spinner-->
</template>
</div>
<div class="slds-col slds-shrink-none slds-align-middle">
<div class="slds-form--inline">
<div class="slds-form-element">
<template lwc:if={showSummary}>
<div class="timeline-summary">
<span class="timeline-summary-verbose">{timelineSummaryText} </span>
<span class="timeline-summary-short">{localisedZoomStartDate} - {localisedZoomEndDate}
</span>
</div>
</template>
<template lwc:if={isLoading}>
<div class="stencil-label"></div>
</template>
</div>
<div class="slds-form-element">
<lightning-button-group>
<lightning-button-icon class="timeline-refresh" icon-name="utility:refresh"
alternative-text="Refresh" onclick={processTimeline}></lightning-button-icon>
<lightning-button-icon-stateful icon-name="utility:filterList" selected={isFilter}
onclick={toggleFilter} alternative-text="Filter"
data-id="filterBtn"></lightning-button-icon-stateful>
</lightning-button-group>
</div>
</template>
</div>
<div class="slds-no-flex">
<template lwc:if={showSummary}>
<div class="timeline-summary">
<span class="timeline-summary-verbose">{timelineSummaryText} </span>
<span class="timeline-summary-short"
>{localisedZoomStartDate} - {localisedZoomEndDate}
</span>
</div>
</template>
<template lwc:if={isLoading}>
<div class="stencil-label" style="margin-right: 10px"></div>
</template>
</div>
</div>
</div>
<!--end header-->

<div class="slds-no-flex">
<lightning-button-group>
<lightning-button-icon
class="timeline-refresh"
icon-name="utility:refresh"
alternative-text="Refresh"
onclick={processTimeline}
></lightning-button-icon>
<lightning-button-icon-stateful
icon-name="utility:filterList"
selected={isFilter}
onclick={toggleFilter}
alternative-text="Filter"
></lightning-button-icon-stateful>
</lightning-button-group>
<!--timeline body-->
<div id="timeline-wrapper" class="timeline-wrapper">
<div class="slds-col slds-size_1-of-1">
<div class="timeline-canvas" id="timeline-canvas" lwc:dom="manual"></div>
<div class="timeline-canvas-axis" aria-hidden="true" id="timeline-canvas-axis" lwc:dom="manual"></div>
<div class="timeline-map-wrapper" aria-hidden="true">
<div class="timeline-map" id="timeline-map" lwc:dom="manual"></div>
<div class="timeline-map-axis" id="timeline-map-axis" lwc:dom="manual"></div>
</div>
</header>
</div>
<div class="slds-card__body slds-card__body_inner">

<!--timeline body-->
<div id="timeline-wrapper" class="timeline-wrapper">
<div class="slds-col slds-size_1-of-1">
<div class="timeline-canvas" id="timeline-canvas" lwc:dom="manual"></div>
<div class="timeline-canvas-axis" id="timeline-canvas-axis" lwc:dom="manual"></div>
<div class="timeline-map-wrapper">
<div class="timeline-map" id="timeline-map" lwc:dom="manual"></div>
<div class="timeline-map-axis" id="timeline-map-axis" lwc:dom="manual"></div>
</div>

<!--illustration component when there is an error-->
<div class={illustrationVisibility}>
<div class="stencil-timeline">
<c-illustration header={illustrationHeader} sub-header={illustrationSubHeader}
type={illustrationType}></c-illustration>
</div>
</div>
<!--end illustration component-->

<!--illustration component when there is an error-->
<div class={illustrationVisibility}>
<div class="stencil-timeline">
<c-illustration
header={illustrationHeader}
sub-header={illustrationSubHeader}
type={illustrationType}
></c-illustration>
</div>
<div class="timeline-filter slds-float_right slds-panel slds-size_small slds-panel_docked slds-panel_docked-right"
aria-hidden="false">
<div class="slds-panel__header" style="height: 50px">
<h4 class="slds-panel__header-title slds-text-heading_small slds-truncate" title="Panel Header">
{label.FILTERS}
</h4>
<button
class="slds-button slds-button_icon slds-button_icon slds-button_icon-small slds-float_right slds-panel__close"
title="Close dialog" data-id="closeDialogBtn" onclick={cancelFilter}>
<lightning-icon icon-name="utility:close" alternative-text="Close"
size="xx-small"></lightning-icon>
</button>
</div>
<!--end illustration component-->

<div
class="timeline-filter slds-float_right slds-panel slds-size_small slds-panel_docked slds-panel_docked-right"
aria-hidden="false"
>
<div class="slds-panel__header" style="height: 50px">
<template lwc:if={isFilterUpdated}>
<div class="slds-grid" style="width: 100%">
<div>
<lightning-button
label={label.BUTTON_CANCEL}
title="Cancel"
onclick={cancelFilter}
></lightning-button>
</div>
<div class="slds-grid slds-col slds-grid_align-end">
<lightning-button
variant="brand"
label={label.BUTTON_APPLY}
title="Apply"
onclick={applyFilter}
></lightning-button>
</div>
<div class="slds-panel__body">
<legend class="slds-form-element__label slds-text-title_caps">{label.TYPE_LEGEND}</legend>
<div class="slds-form-element">
<div class="slds-form-element__control">
<div class="slds-checkbox">
<input type="checkbox" class="all-types-checkbox" name="options" id="all-filter"
value={handleAllTypesLoad} onchange={handleAllTypesChange} />
<label class="slds-checkbox__label" for="all-filter">
<span class="slds-checkbox_faux"></span>
<span class="slds-form-element__label">{label.ALL_TYPES}</span>
</label>
</div>
</template>

<template lwc:else>
<h2 class="slds-panel__header-title slds-text-heading_small slds-truncate" title="Panel Header">
{label.FILTERS}
</h2>
<button
class="slds-button slds-button_icon slds-button_icon slds-button_icon-small slds-float_right slds-panel__close"
title="Close dialog"
onclick={toggleFilter}
>
<lightning-icon
icon-name="utility:close"
alternative-text="Close"
size="xx-small"
></lightning-icon>
</button>
</template>
</div>
</div>

<div class="slds-panel__body">
<legend class="slds-form-element__label slds-text-title_caps">{label.TYPE_LEGEND}</legend>
<div class="slds-form-element">
<div class="slds-form-element__control">
<div class="slds-checkbox">
<input
type="checkbox"
class="all-types-checkbox"
name="options"
id="all-filter"
value={handleAllTypesLoad}
onchange={handleAllTypesChange}
/>
<label class="slds-checkbox__label" for="all-filter">
<span class="slds-checkbox_faux"></span>
<span class="slds-form-element__label">{label.ALL_TYPES}</span>
</label>
</div>
</div>
</div>
<template lwc:if={isFilter}>
<lightning-checkbox-group name="Types Shown" label="" options={filterOptions}
value={filterValues} onchange={handleFilterChange}>
</lightning-checkbox-group>
</template>

<template lwc:if={isFilter}>
<lightning-checkbox-group
name="Types Shown"
label=""
options={filterOptions}
value={filterValues}
onchange={handleFilterChange}
>
</lightning-checkbox-group>
</template>
<div style="padding-top: 10px"></div>
<legend class="slds-form-element__label slds-text-title_caps">{label.DATE_RANGE_LEGEND}</legend>

<div style="padding-top: 10px"></div>
<legend class="slds-form-element__label slds-text-title_caps">{label.DATE_RANGE_LEGEND}</legend>
<div class="slds-form-element__label" style="padding-top: 5px">{timelineStart} - {timelineEnd}</div>

<div class="slds-form-element__label" style="padding-top: 5px">{timelineStart} - {timelineEnd}</div>
<div style="padding-top: 10px"></div>
<legend class="slds-form-element__label slds-text-title_caps">{label.DATE_LEGEND}</legend>
<div class="slds-form-element">
<lightning-input type="text" label="Viewing: Start Date" value={localisedZoomStartDate}
onchange={handleStartDateChange}></lightning-input>
</div>
<div class="slds-form-element">
<lightning-input type="text" label="Viewing: End Date" value={localisedZoomEndDate}
onchange={handleEndDateChange}> </lightning-input>
</div>
</div>
<div class="sticky-button">
<div class="slds-grid" style="width: 100%">
<div aria-live="polite" role="alert">
<lightning-button label={label.BUTTON_CANCEL} title="Cancel"
onclick={cancelFilter}></lightning-button>
</div>
<div class="slds-grid slds-col slds-grid_align-end" aria-live="polite" role="alert">
<lightning-button variant="brand" label={label.BUTTON_APPLY} title="Apply"
onclick={applyFilter}></lightning-button>
</div>
</div>
</div>
</div>
<!--end timeline body-->
</div>
</article>
<!--end timeline body-->
</div>

<!--tooltips FALLBACK WHEN AN OBJECT IS NOT SUPPORTED-->
<div aria-label="Tooltip popover" class="tooltip-panel tooltip-popover slds-popover_panel slds-nubbin_left-top">
Expand Down Expand Up @@ -203,18 +175,11 @@ <h2 class="slds-panel__header-title slds-text-heading_small slds-truncate" title
<template lwc:if={isTooltipLoading}>
<div class="tooltip-loading"></div>
</template>
<lightning-record-form
record-id={mouseOverRecordId}
object-api-name={mouseOverObjectAPIName}
layout-type="Compact"
columns="2"
mode="readonly"
class="tooltip-content"
onload={tooltipLoaded}
>
<lightning-record-form record-id={mouseOverRecordId} object-api-name={mouseOverObjectAPIName}
layout-type="Compact" columns="2" mode="readonly" class="tooltip-content" onload={tooltipLoaded}>
</lightning-record-form>
</template>
</div>
</div>
<!--end tooltips-->
</template>
</template>
Loading
Loading