Skip to content

Update Comment aria #9663

@maribethb

Description

@maribethb

Check for duplicates

  • I have searched for similar issues before opening a new one.

Problem

No response

Request

The only change needed in CommentEditor is to set its text area to have the ARIA role textbox.

CommentView requires a few changes to set up its ARIA context during construction:

  • Its root is to be an ARIA button since enter activates editing (not for readonly comments).
  • It will have an aria-roledescription of 'Comment' (localized) so that the user gets more than just 'button' context when interacting with the view.
  • If the view has an editor it should be labeled (i.e. aria-labelledby) by the editor's ID which corresponds to the editor's text area.

CommentBarButton will have two new API methods added:

/**
 * Recomputes the ARIA label and role for this button. Note that this is not
 * automatically called during initialization and must be called once a button's
 * focusable element (icon) is initialized. Implementations may also find it useful
 * to call this if the button's label should be changed.
 */
protected updateAriaContext()

/**
 * Returns the ARIA label to use for this button (defaults to null). Note that this
 * method will only be called and apply when updateAiraContext is called.
 *
 * @returns The ARIA label to use for this button, or null to use a default.
 */
protected getAriaLabel(): string | null

This is a bit more awkward than other implementations because CommentBarButton doesn't have a guaranteed initialization 'hook' at which to enable these properties. Instead, implementations must call updateAriaContext in their constructors after initializing their icon element. Beyond that, updateAriaContext will set the icon to have a button role and set its label to the value of getAriaLabel. This behavior isn't expected to need to be overwritten, and the label will default to 'Button' (localized) if no ARIA label is specified. Beyond that, subclasses will provide their own labels (with translation support):
CollapseCommentBarButton: 'Collapse Comment' (new Blockly Msg).
DeleteCommentBarButton: 'Remove Comment' (existing Blockly Msg as Msg['REMOVE_COMMENT']).

Alternatives considered

No response

Additional context

No response

Metadata

Metadata

Assignees

No one assigned

    Labels

    help wantedExternal contributions actively solicitedissue: feature requestDescribes a new feature and why it should be addedissue: triageIssues awaiting triage by a Blockly team member

    Type

    No type

    Projects

    Status

    Todo

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions