Skip to content

Commit 122182e

Browse files
VishaalKVishaalK
authored
[Bugs] First round of a11y fixes (#345)
1 parent 3a89ebd commit 122182e

22 files changed

+180
-40
lines changed

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -54,7 +54,7 @@
5454
"node-qunit-phantomjs": "1.5.0",
5555
"node-static": "0.7.9",
5656
"onenoteapi": "1.1.0",
57-
"onenotepicker": "1.0.6",
57+
"onenotepicker": "1.0.8",
5858
"pdfjs-dist": "1.7.290",
5959
"popper.js": "1.0.6",
6060
"qunitjs": "1.20.0",

‎src/scripts/clipperUI/components/annotationInput.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -78,10 +78,10 @@ class AnnotationInputClass extends ComponentBase<AnnotationInputState, ClipperSt
7878
if (!this.state.opened) {
7979
return (
8080
<div id={Constants.Ids.annotationContainer}>
81-
<a id={Constants.Ids.annotationPlaceholder} style={Localization.getFontFamilyAsStyle(Localization.FontFamily.Regular)} {...this.enableInvoke(this.handleAnnotateButton, 210)}>
81+
<div id={Constants.Ids.annotationPlaceholder} style={Localization.getFontFamilyAsStyle(Localization.FontFamily.Regular)} {...this.enableInvoke(this.handleAnnotateButton, 210)}>
8282
<img src={ExtensionUtils.getImageResourceUrl("editorOptions/add_icon_purple.png")} />
8383
<span>{Localization.getLocalizedString("WebClipper.Label.AnnotationPlaceholder")}</span>
84-
</a>
84+
</div>
8585
</div>
8686
);
8787
} else {

‎src/scripts/clipperUI/components/closeButton.tsx‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import {Constants} from "../../constants";
22

33
import {ExtensionUtils} from "../../extensions/extensionUtils";
4+
import {Localization} from "../../localization/localization";
45

56
import {ComponentBase} from "../componentBase";
67

@@ -17,7 +18,7 @@ class CloseButtonClass extends ComponentBase<{}, CloseButtonProps> {
1718
render() {
1819
return (
1920
<div id={Constants.Ids.closeButtonContainer}>
20-
<a id={Constants.Ids.closeButton} {...this.enableInvoke(this.props.onClickHandler, 300, this.props.onClickHandlerParams) }>
21+
<a id={Constants.Ids.closeButton} aria-label={Localization.getLocalizedString("WebClipper.Action.CloseTheClipper")} {...this.enableInvoke(this.props.onClickHandler, 300, this.props.onClickHandlerParams) }>
2122
<img className="closeButtonIcon" src={ExtensionUtils.getImageResourceUrl("close.png")} />
2223
</a>
2324
</div>

‎src/scripts/clipperUI/components/footer.tsx‎

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -77,25 +77,25 @@ class FooterClass extends ComponentBase<FooterState, FooterProps> {
7777
<div>
7878
<div className="footerButtonsLeft confineText">
7979
<a id={Constants.Ids.feedbackButton} {...this.enableInvoke(this.handleFeedbackButton, 80) }>
80-
<img id={Constants.Ids.feedbackImage} src={ExtensionUtils.getImageResourceUrl("feedback_smiley.png")}
81-
alt={Localization.getLocalizedString("WebClipper.Action.Feedback") }/>
80+
<img id={Constants.Ids.feedbackImage} src={ExtensionUtils.getImageResourceUrl("feedback_smiley.png")}/>
8281
<span>{Localization.getLocalizedString("WebClipper.Action.Feedback") }</span>
8382
</a>
8483
</div>
8584
{showUserInfo
8685
? (<div className="footerButtonsRight">
87-
<a id={Constants.Ids.currentUserControl} {...this.enableInvoke(this.userControlHandler, 81) }>
86+
<a id={Constants.Ids.currentUserControl} {...this.enableInvoke(this.userControlHandler, 81)} aria-expanded={this.state.userSettingsOpened}>
8887
<img id={Constants.Ids.userDropdownArrow} src={ExtensionUtils.getImageResourceUrl("dropdown_arrow.png")} />
8988
<div id={Constants.Ids.currentUserDetails}>
9089
{
9190
this.props.clipperState.userResult.data.user.fullName
9291
? <div id={Constants.Ids.currentUserName} className="confineText">{this.props.clipperState.userResult.data.user.fullName}</div>
93-
: <div id={Constants.Ids.currentUserName} className="confineText"></div>
92+
: <div id={Constants.Ids.currentUserName} className="confineText">{Localization.getLocalizedString("WebClipper.Label.SignedIn")}</div>
93+
}
94+
{
95+
this.props.clipperState.userResult.data.user.emailAddress
96+
? <div id={Constants.Ids.currentUserId} className="confineText currentUserIdFont" style={Localization.getFontFamilyAsStyle(Localization.FontFamily.Regular)}>{this.props.clipperState.userResult.data.user.emailAddress}</div>
97+
: ""
9498
}
95-
<div id={Constants.Ids.currentUserId} className="confineText currentUserIdFont"
96-
style={Localization.getFontFamilyAsStyle(Localization.FontFamily.Regular)}>
97-
{this.props.clipperState.userResult.data.user.emailAddress}
98-
</div>
9999
</div>
100100
</a>
101101
</div>)

‎src/scripts/clipperUI/components/modeButton.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -29,7 +29,7 @@ class ModeButtonClass extends ComponentBase<{}, ModeButtonProps> {
2929
let idName: string = clipMode + "Button";
3030

3131
return (
32-
<a className={className} aria-selected={this.props.selected} aria-role="button"
32+
<a className={className} aria-selected={this.props.selected} role="button"
3333
id={idName} title={this.props.tooltipText ? this.props.tooltipText : ""}
3434
{...this.enableInvoke(this.buttonHandler, this.props.tabIndex) }>
3535
<img className="icon" src={this.props.imgSrc} />

‎src/scripts/clipperUI/components/modeButtonSelector.tsx‎

Lines changed: 12 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import {ClientType} from "../../clientType";
2+
import {Constants} from "../../constants";
23
import {Experiments} from "../../experiments";
34

45
import {AugmentationHelper} from "../../contentCapture/augmentationHelper";
@@ -21,6 +22,15 @@ class ModeButtonSelectorClass extends ComponentBase<{}, ClipperStateProp> {
2122
});
2223
};
2324

25+
private getScreenReaderOnlyElementThatAnnouncesCurrentMode(currentMode: ClipMode) {
26+
let stringToTellUserModeHasChanged = Localization.getLocalizedString("WebClipper.Accessibility.ScreenReader.CurrentModeHasChanged");
27+
stringToTellUserModeHasChanged = stringToTellUserModeHasChanged.replace("{0}", ClipMode[currentMode]);
28+
29+
return (
30+
<div aria-live="polite" aria-relevant="text" className={Constants.Classes.srOnly}>{stringToTellUserModeHasChanged}</div>
31+
);
32+
}
33+
2434
private getPdfModeButton(currentMode: ClipMode) {
2535
if (this.props.clipperState.pageInfo.contentType !== OneNoteApi.ContentType.EnhancedUrl) {
2636
return undefined;
@@ -114,7 +124,8 @@ class ModeButtonSelectorClass extends ComponentBase<{}, ClipperStateProp> {
114124
let currentMode = this.props.clipperState.currentMode.get();
115125

116126
return (
117-
<div style={Localization.getFontFamilyAsStyle(Localization.FontFamily.Semilight) }>
127+
<div style={Localization.getFontFamilyAsStyle(Localization.FontFamily.Semilight)}>
128+
{ this.getScreenReaderOnlyElementThatAnnouncesCurrentMode(currentMode)}
118129
{ this.getFullPageModeButton(currentMode) }
119130
{ this.getRegionModeButton(currentMode) }
120131
{ this.getAugmentationModeButton(currentMode) }

‎src/scripts/clipperUI/components/previewViewer/fullPagePreview.tsx‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -69,11 +69,14 @@ class FullPagePreview extends PreviewComponentBase<{}, ClipperStateProp> {
6969

7070
switch (result.status) {
7171
case Status.Succeeded:
72+
let pageTitle = this.props.clipperState.pageInfo ? this.props.clipperState.pageInfo.contentTitle : "";
73+
let altTag = Localization.getLocalizedString("WebClipper.Preview.FullPageModeScreenshotDescription").replace("{0}", pageTitle);
74+
7275
if (this.props.clipperState.fullPageResult.data) {
7376
let screenshotImages: FullPageScreenshotResult = this.props.clipperState.fullPageResult.data;
7477
for (let imageData of screenshotImages.Images) {
7578
let dataUrl = "data:image/" + screenshotImages.ImageFormat + ";" + screenshotImages.ImageEncoding + "," + imageData;
76-
contentBody.push(<img src={dataUrl}></img>);
79+
contentBody.push(<img src={dataUrl} alt={altTag}></img>);
7780
}
7881
}
7982
break;

‎src/scripts/clipperUI/components/previewViewer/previewComponentBase.tsx‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -57,6 +57,7 @@ export abstract class PreviewComponentBase<TState, TProps extends ClipperStatePr
5757
{...this.enableInvoke(undefined, 200) }
5858
rows="1"
5959
id={Constants.Ids.previewHeaderInput}
60+
aria-label={Localization.getLocalizedString("WebClipper.Accessibility.ScreenReader.InputBoxToChangeTitleOfOneNotePage")}
6061
className={!titleIsEditable ? Constants.Classes.textAreaInput + inProgressClassIfApplicable : Constants.Classes.textAreaInput}
6162
value={contentTitle}
6263
readOnly={!titleIsEditable}>
@@ -78,9 +79,9 @@ export abstract class PreviewComponentBase<TState, TProps extends ClipperStatePr
7879
? <AnnotationInput clipperState={this.props.clipperState} />
7980
: undefined}
8081
{this.props.clipperState.currentMode.get() !== ClipMode.Bookmark
81-
? <div id={Constants.Ids.previewUrlContainer}>
82-
{sourceUrlCitationPrefix}
83-
<a href={sourceUrl} target="_blank" title={sourceUrl}>{sourceUrl}</a>
82+
? <div id={Constants.Ids.previewUrlContainer} tabIndex={220}>
83+
<span aria-label={sourceUrlCitationPrefix}>{sourceUrlCitationPrefix}</span>
84+
<a href={sourceUrl} target="_blank" aria-label={sourceUrl} title={sourceUrl}>{sourceUrl}</a>
8485
</div>
8586
: undefined}
8687
</div>

‎src/scripts/clipperUI/components/previewViewer/previewViewerAugmentationHeader.tsx‎

Lines changed: 26 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,16 @@ export interface PreviewViewerAugmentationHeaderProp {
1616

1717
class PreviewViewerAugmentationHeaderClass extends PreviewViewerHeaderComponentBase<{}, PreviewViewerAugmentationHeaderProp> {
1818
getControlGroups(): ControlGroup[] {
19-
return [this.getHighlightGroup(), this.getSerifGroup(), this.getFontSizeGroup()];
19+
return [this.getScreenReaderTitleGroup(), this.getHighlightGroup(), this.getSerifGroup(), this.getFontSizeGroup()];
20+
}
21+
22+
private getScreenReaderTitleGroup() {
23+
return {
24+
className: Constants.Classes.srOnly,
25+
innerElements: [
26+
<div>{Localization.getLocalizedString("WebClipper.ClipType.Article.Button")}</div>
27+
]
28+
};
2029
}
2130

2231
private getHighlightGroup(): ControlGroup {
@@ -26,11 +35,16 @@ class PreviewViewerAugmentationHeaderClass extends PreviewViewerHeaderComponentB
2635

2736
return {
2837
id: Constants.Ids.highlightControl,
29-
innerElements: [<img
30-
id={Constants.Ids.highlightButton}
31-
{...this.enableInvoke(this.props.toggleHighlight, 100) }
32-
className={classForHighlighter}
33-
src={ExtensionUtils.getImageResourceUrl(imgSrc) } />
38+
innerElements: [
39+
<img
40+
role="button"
41+
aria-label={Localization.getLocalizedString("WebClipper.Accessibility.ScreenReader.ToggleHighlighterForArticleMode")}
42+
aria-pressed={highlighterEnabled ? "true" : "false"}
43+
id={Constants.Ids.highlightButton}
44+
{...this.enableInvoke(this.props.toggleHighlight, 100) }
45+
className={classForHighlighter}
46+
src={ExtensionUtils.getImageResourceUrl(imgSrc)}
47+
/>
3448
]
3549
};
3650
}
@@ -40,13 +54,17 @@ class PreviewViewerAugmentationHeaderClass extends PreviewViewerHeaderComponentB
4054
id: Constants.Ids.serifControl,
4155
innerElements: [
4256
<button
57+
aria-label={Localization.getLocalizedString("WebClipper.Accessibility.ScreenReader.ChangeFontToSansSerif")}
58+
aria-pressed={!this.props.serif ? "true" : "false"}
4359
id={Constants.Ids.sansSerif}
4460
{...this.enableInvoke(this.props.changeFontFamily, 101, false) }
4561
className={!this.props.serif ? HeaderClasses.Button.activeControlButton : HeaderClasses.Button.controlButton}
4662
type="button">
4763
{Localization.getLocalizedString("WebClipper.Preview.Header.SansSerifButtonLabel") }
4864
</button>,
4965
<button
66+
aria-label={Localization.getLocalizedString("WebClipper.Accessibility.ScreenReader.ChangeFontToSerif")}
67+
aria-pressed={this.props.serif ? "true" : "false"}
5068
id={Constants.Ids.serif}
5169
{...this.enableInvoke(this.props.changeFontFamily, 102, true) }
5270
className={this.props.serif ? HeaderClasses.Button.activeControlButton : HeaderClasses.Button.controlButton}
@@ -63,11 +81,13 @@ class PreviewViewerAugmentationHeaderClass extends PreviewViewerHeaderComponentB
6381
className: HeaderClasses.Button.relatedButtons,
6482
innerElements: [
6583
<button className={HeaderClasses.Button.controlButton}
84+
aria-label={Localization.getLocalizedString("WebClipper.Accessibility.ScreenReader.DecreaseFontSize")}
6685
type="button" {...this.enableInvoke(this.props.changeFontSize, 103, false) }
6786
id={Constants.Ids.decrementFontSize}>
6887
<img src={ExtensionUtils.getImageResourceUrl("editorOptions/font_down.png") } />
6988
</button>,
7089
<button className={HeaderClasses.Button.controlButton}
90+
aria-label={Localization.getLocalizedString("WebClipper.Accessibility.ScreenReader.IncreaseFontSize")}
7191
type="button" {...this.enableInvoke(this.props.changeFontSize, 104, true) }
7292
id={Constants.Ids.incrementFontSize}>
7393
<img src={ExtensionUtils.getImageResourceUrl("editorOptions/font_up.png") } />

‎src/scripts/clipperUI/components/previewViewer/previewViewerRegionHeader.tsx‎

Lines changed: 10 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,16 @@ class PreviewViewerRegionHeaderClass extends PreviewViewerHeaderComponentBase<{}
2020
}
2121

2222
getControlGroups(): ControlGroup[] {
23-
return [this.getAddRegionGroup()];
23+
return [this.getScreenReaderTitleGroup(), this.getAddRegionGroup()];
24+
}
25+
26+
private getScreenReaderTitleGroup() {
27+
return {
28+
className: Constants.Classes.srOnly,
29+
innerElements: [
30+
<div>{Localization.getLocalizedString("WebClipper.ClipType.Region.Button")}</div>
31+
]
32+
};
2433
}
2534

2635
private getAddRegionGroup(): ControlGroup {

0 commit comments

Comments
 (0)