Author: jku@illinois.edu

This will be discussed at today’s meeting.

Updated Toolbar Design

Toobar UI -1

Toobar UI -2

1. UI Comparison

• The behavior of a link object shares aspects with both block and inline objects, and so is considered a hybrid object.
  • For example, if you make a text selection and then choose the link button, you will set the selected text as the display text of the link (inline style behavior).
  • On the other hand, if you place the cursor anywhere within the display text of an existing link object and choose the unlink button, you will remove the link styling and interactivity of all of the display text for the link (block object behavior).
• Link dialog option in CKEditor works.
• Checking the value of link (not null) should be part of validation.

2. Link Menu Button in CKEditor – Dialog

• Either create a link or break a link (two buttons)

3. Link Menu List in OneNet Editor

Global toolbar option 1

 

View this documentation in our github repository.

This document presents a vocabulary that relates to users’ task domain when using a text editor. It attempts to provide terminology for the objects, attributes, and available actions that map to users’ tasks when creating or editing a document.

High-Level Description of Purpose and Functionality

The goal of the project is to proactively support authors in creating accessible documents by modifying the CKEditor user interface to include behaviors that guide authors in adding and editing accessible web content.

By encouraging users to think primarily in terms of the structural components of documents, we can then guide them through the creation of website content by capturing up front the information specific to various types of content (e.g., headings, lists, and images) that ensure their accessibility.

Functionality

• Proactively promote thinking in terms of structural blocks as the main components of a document
• For specific block types, prompt the user for semantic clarification (e.g., whether a list is bulleted or numbered, image text alternative), or when appropriate, simply limit the available choices (e.g., heading levels)
• Make it possible to style inline content, but discourage users from reaching for this type of action on first impulse (i.e., first, think semantically)

Block Objects/Attributes

Paragraph

• Content: text/inline
• Note 1: This is the default block type. When some other block type formatting is removed (e.g., from a heading or list), the block(s) will automatically default to paragraph(s)
• Note 2: Because this is the default block type, the label ‘paragraph’ is deemed unnecessary and should not appear in the user interface

Heading

• Level (2 – 6)
• Content: text/inline

List

• List style
• Title (optional)
• Content: list items

List item

• Indent level (0 – 5)
• Content: text/inline

Table

• Number of columns
• Number of rows
• Column header labels
• Row header labels
• Title (optional)
• Long description (optional)
• Content: data cells

Table Data Cell

• Content: text/inline, blocks (excluding table, others?)

Image

• Alt text
• Long description (optional)
• Width and height?
• Content: image (from file/library)

Video

• Title
• Content: video (from file/library)

Audio

• Title
• Content: audio (from file/library)

Block Quote

• Content: headings, paragraphs, lists, images

Text/Inline Objects/Attributes

Text/Inline

• Content: characters, punctuation, symbols, whitespace, and permitted inline objects

Link

• Href
• Content: text/inline

Image

• Alt text
• Content: image (from file/library)

Actions

Block Actions

• Insert block (at top level of parent context–see notes)
• Select block and modify its properties (how to select table?)
• Convert existing block to another type of block
• Delete block (for some block types, must delete contents)

Text/Inline Actions

• Add/modify/delete text
• Add/modify/delete styling
• Insert/modify/delete inline object (link, image)

Object-specific Block Actions

Heading

• Change level

List

• Change list style (choices among bullets and numbers)
• Add/modify/delete title
• Users interact with list items; editor considers all contiguous list items part of the same list

List Item

• Indent/outdent

Table

• Add/delete column
• Add/delete row
• Modify column headers and/or row headers
• Add/modify/delete title
• Add/modify/delete long description
• Merge data cells

Object-specific Inline Actions

Link

• Modify href

Image

• Modify alt text

Notes on Actions

Block Actions vs. Text/Inline Actions

• Need to make a clear distinction between text/inline actions and block actions.
• For example, for all of the block objects that contain text/inline, all of the text/inline actions are available, and thus can be factored out when considering the available actions on a particular block.
• Need to encourage/prioritize block actions (insert block, convert to another block) over text/inline styling actions.

Block Insertions and Splits

• A block can only be inserted at the top level of the parent context, which may be (1) the document, (2) a table data cell or (3) a block quote (others?).
• A paragraph can be split into two paragraphs using the enter key.
• A list can be split into two lists using the enter key twice in succession.
• These actions are necessary in order to insert a block, i.e. the user is not permitted to insert a block within a paragraph or list.
• Likewise, tables need a mechanism for splitting into two tables.
• In general, blocks need to maintain their integrity (you can’t easily demolish them by inserting random blocks within them) but must also be easily divided.

Block Selection, Conversion, and Deletion

• Need to make it clear how blocks are selected, to allow modification of their properties, and what needs to happen in order to delete them.
• For example, a paragraph can be converted to a heading or list item by placing the cursor at the beginning, end, or anywhere in between and choosing action.
• On the other hand, a paragraph can be deleted only by deleting all of its text/inline content. A list can be deleted only by deleting all of its list items, and list items are deleted by deleting their text/inline content.

Relationships

• Simple block (heading, paragraph, list item) contains text/inline only
• Compound block (list, table, table column, table row) contains sub-blocks (list items, data cells)
• Table data cell is a hybrid–may contain text/inline or blocks (e.g., paragraphs, list/list items)
• Image is unique–no visible text is required (optional caption?) but must have alt text (short description) and may have a long description