From e52a0d0988a9e871b4339012d9a52bc5348aa1f5 Mon Sep 17 00:00:00 2001 From: David Wheatley Date: Tue, 28 Dec 2021 18:38:57 +0100 Subject: [PATCH 1/4] fix: prevent unwarranted a11y warnings on UploadImageButton --- js/src/admin/components/UploadImageButton.js | 1 + js/src/common/components/Button.tsx | 11 ++++++++++- 2 files changed, 11 insertions(+), 1 deletion(-) diff --git a/js/src/admin/components/UploadImageButton.js b/js/src/admin/components/UploadImageButton.js index e624540784..9d6011ccb2 100644 --- a/js/src/admin/components/UploadImageButton.js +++ b/js/src/admin/components/UploadImageButton.js @@ -3,6 +3,7 @@ import Button from '../../common/components/Button'; export default class UploadImageButton extends Button { loading = false; + ignoreNoChildrenWarning = true; view(vnode) { this.attrs.loading = this.loading; diff --git a/js/src/common/components/Button.tsx b/js/src/common/components/Button.tsx index 991a0b890b..5d17a9a7bd 100644 --- a/js/src/common/components/Button.tsx +++ b/js/src/common/components/Button.tsx @@ -67,6 +67,15 @@ export interface IButtonAttrs extends ComponentAttrs { * styles can be applied by providing `className="Button"` to the Button component. */ export default class Button extends Component { + /** + * Prevents firing of accessibility warnings for this Button component. + * + * This should be set to `true` when creating a custom Button class component which + * does not expect any children to be provided to it because, for example, it has a + * custom `view` method with its own content baked-in. + */ + protected ignoreNoChildrenWarning: boolean = false; + view(vnode: Mithril.VnodeDOM) { let { type, title, 'aria-label': ariaLabel, icon: iconName, disabled, loading, className, class: _class, ...attrs } = this.attrs; @@ -107,7 +116,7 @@ export default class Button ext const { 'aria-label': ariaLabel } = this.attrs; - if (!ariaLabel && !extractText(vnode.children) && !this.element?.getAttribute?.('aria-label')) { + if (!this.ignoreNoChildrenWarning && !ariaLabel && !extractText(vnode.children) && !this.element?.getAttribute?.('aria-label')) { fireDebugWarning( '[Flarum Accessibility Warning] Button has no content and no accessible label. This means that screen-readers will not be able to interpret its meaning and just read "Button". Consider providing accessible text via the `aria-label` attribute. https://web.dev/button-name', this.element From c0fffe718e473a9a9935c64c5cd367b116eea2c9 Mon Sep 17 00:00:00 2001 From: David Wheatley Date: Tue, 28 Dec 2021 18:41:41 +0100 Subject: [PATCH 2/4] chore: format --- js/src/common/components/Button.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/js/src/common/components/Button.tsx b/js/src/common/components/Button.tsx index 5d17a9a7bd..aa68aeca06 100644 --- a/js/src/common/components/Button.tsx +++ b/js/src/common/components/Button.tsx @@ -69,7 +69,7 @@ export interface IButtonAttrs extends ComponentAttrs { export default class Button extends Component { /** * Prevents firing of accessibility warnings for this Button component. - * + * * This should be set to `true` when creating a custom Button class component which * does not expect any children to be provided to it because, for example, it has a * custom `view` method with its own content baked-in. From 204288226b75ea9f9d2e8f255c3e6718d1d76c3d Mon Sep 17 00:00:00 2001 From: David Wheatley Date: Wed, 29 Dec 2021 02:15:06 +0100 Subject: [PATCH 3/4] refactor --- js/src/admin/components/UploadImageButton.js | 1 - js/src/common/components/Button.tsx | 2 +- 2 files changed, 1 insertion(+), 2 deletions(-) diff --git a/js/src/admin/components/UploadImageButton.js b/js/src/admin/components/UploadImageButton.js index 9d6011ccb2..e624540784 100644 --- a/js/src/admin/components/UploadImageButton.js +++ b/js/src/admin/components/UploadImageButton.js @@ -3,7 +3,6 @@ import Button from '../../common/components/Button'; export default class UploadImageButton extends Button { loading = false; - ignoreNoChildrenWarning = true; view(vnode) { this.attrs.loading = this.loading; diff --git a/js/src/common/components/Button.tsx b/js/src/common/components/Button.tsx index aa68aeca06..24fa132ffd 100644 --- a/js/src/common/components/Button.tsx +++ b/js/src/common/components/Button.tsx @@ -116,7 +116,7 @@ export default class Button ext const { 'aria-label': ariaLabel } = this.attrs; - if (!this.ignoreNoChildrenWarning && !ariaLabel && !extractText(vnode.children) && !this.element?.getAttribute?.('aria-label')) { + if (this.view === Button.prototype.view && !ariaLabel && !extractText(vnode.children) && !this.element?.getAttribute?.('aria-label')) { fireDebugWarning( '[Flarum Accessibility Warning] Button has no content and no accessible label. This means that screen-readers will not be able to interpret its meaning and just read "Button". Consider providing accessible text via the `aria-label` attribute. https://web.dev/button-name', this.element From 2c6913ee2347d3febeade8b949c61c4d355d9771 Mon Sep 17 00:00:00 2001 From: David Wheatley Date: Wed, 29 Dec 2021 02:15:44 +0100 Subject: [PATCH 4/4] fix: remove attr --- js/src/common/components/Button.tsx | 9 --------- 1 file changed, 9 deletions(-) diff --git a/js/src/common/components/Button.tsx b/js/src/common/components/Button.tsx index 24fa132ffd..86e9ce0017 100644 --- a/js/src/common/components/Button.tsx +++ b/js/src/common/components/Button.tsx @@ -67,15 +67,6 @@ export interface IButtonAttrs extends ComponentAttrs { * styles can be applied by providing `className="Button"` to the Button component. */ export default class Button extends Component { - /** - * Prevents firing of accessibility warnings for this Button component. - * - * This should be set to `true` when creating a custom Button class component which - * does not expect any children to be provided to it because, for example, it has a - * custom `view` method with its own content baked-in. - */ - protected ignoreNoChildrenWarning: boolean = false; - view(vnode: Mithril.VnodeDOM) { let { type, title, 'aria-label': ariaLabel, icon: iconName, disabled, loading, className, class: _class, ...attrs } = this.attrs;