Add ariaDisabled prop to button (#11236)

aria-disabled uses the ariaDisabled or disabled props to inform screen
readers that the button is dimmed or unavailable etc.
Remove title from undo / redo buttons as aria-label is present.

Co-authored-by: Richard Knoll <riknoll@users.noreply.github.com>

Author: microbit-robert

webapp/src/editortoolbar.tsx

@@ -172,8 +172,8 @@ export class EditorToolbar extends data.Component<ISettingsProps, EditorToolbarS
         const hasUndo = this.props.parent.editor.hasUndo();
         const hasRedo = this.props.parent.editor.hasRedo();
         return [
-            <EditorToolbarButton icon='xicon undo' className={`editortools-btn undo-editortools-btn ${!hasUndo ? 'disabled' : ''}`} title={lf("Undo")} ariaLabel={lf("{0}, {1}", lf("Undo"), !hasUndo ? lf("Disabled") : "")} onButtonClick={this.undo} view={this.getViewString(view)} key="undo" />,
-            <EditorToolbarButton icon='xicon redo' className={`editortools-btn redo-editortools-btn ${!hasRedo ? 'disabled' : ''}`} title={lf("Redo")} ariaLabel={lf("{0}, {1}", lf("Redo"), !hasRedo ? lf("Disabled") : "")} onButtonClick={this.redo} view={this.getViewString(view)} key="redo" />
+            <EditorToolbarButton icon='xicon undo' className={`editortools-btn undo-editortools-btn ${!hasUndo ? 'disabled' : ''}`} ariaDisabled={!hasUndo} ariaLabel={lf("{0}, {1}", lf("Undo"), !hasUndo ? lf("Disabled") : "")} onButtonClick={this.undo} view={this.getViewString(view)} key="undo" />,
+            <EditorToolbarButton icon='xicon redo' className={`editortools-btn redo-editortools-btn ${!hasRedo ? 'disabled' : ''}`} ariaDisabled={!hasRedo} ariaLabel={lf("{0}, {1}", lf("Redo"), !hasRedo ? lf("Disabled") : "")} onButtonClick={this.redo} view={this.getViewString(view)} key="redo" />
         ];
     }
 

webapp/src/sui.tsx

@@ -511,6 +511,7 @@ export interface ButtonProps extends UiProps, TooltipUIProps {
     id?: string;
     title?: string;
     ariaLabel?: string;
+    ariaDisabled?: boolean;
     ariaExpanded?: boolean;
     onClick?: (e: React.MouseEvent<HTMLElement>) => void;
     disabled?: boolean;
@@ -539,6 +540,7 @@ export class Button extends StatelessUIElement<ButtonProps> {
             tabIndex={this.props.tabIndex || 0}
             aria-label={this.props.ariaLabel}
             aria-expanded={this.props.ariaExpanded}
+            aria-disabled={this.props.ariaDisabled ?? disabled}
             onClick={this.props.onClick}
             onKeyDown={this.props.onKeyDown}
             autoFocus={this.props.autoFocus}