ARIAAttributesView.js 4.7 KB

123456789101112131415161718192021222324252627
  1. export default class ARIAAttributesPane extends Accessibility.AccessibilitySubPane{constructor(){super(ls`ARIA Attributes`);this._noPropertiesInfo=this.createInfo(ls`No ARIA attributes`);this._treeOutline=this.createTreeOutline();}
  2. setNode(node){super.setNode(node);this._treeOutline.removeChildren();if(!this.node()){return;}
  3. const target=this.node().domModel().target();const attributes=node.attributes();for(let i=0;i<attributes.length;++i){const attribute=attributes[i];if(Accessibility.ARIAAttributesPane._attributes.indexOf(attribute.name)<0){continue;}
  4. this._treeOutline.appendChild(new Accessibility.ARIAAttributesTreeElement(this,attribute,target));}
  5. const foundAttributes=(this._treeOutline.rootElement().childCount()!==0);this._noPropertiesInfo.classList.toggle('hidden',foundAttributes);this._treeOutline.element.classList.toggle('hidden',!foundAttributes);}}
  6. export class ARIAAttributesTreeElement extends UI.TreeElement{constructor(parentPane,attribute,target){super('');this._parentPane=parentPane;this._attribute=attribute;this.selectable=false;}
  7. static createARIAValueElement(value){const valueElement=createElementWithClass('span','monospace');valueElement.setTextContentTruncatedIfNeeded(value||'');return valueElement;}
  8. onattach(){this._populateListItem();this.listItemElement.addEventListener('click',this._mouseClick.bind(this));}
  9. _populateListItem(){this.listItemElement.removeChildren();this.appendNameElement(this._attribute.name);this.listItemElement.createChild('span','separator').textContent=':\xA0';this.appendAttributeValueElement(this._attribute.value);}
  10. appendNameElement(name){this._nameElement=createElement('span');this._nameElement.textContent=name;this._nameElement.classList.add('ax-name');this._nameElement.classList.add('monospace');this.listItemElement.appendChild(this._nameElement);}
  11. appendAttributeValueElement(value){this._valueElement=Accessibility.ARIAAttributesTreeElement.createARIAValueElement(value);this.listItemElement.appendChild(this._valueElement);}
  12. _mouseClick(event){if(event.target===this.listItemElement){return;}
  13. event.consume(true);this._startEditing();}
  14. _startEditing(){const valueElement=this._valueElement;if(UI.isBeingEdited(valueElement)){return;}
  15. const previousContent=valueElement.textContent;function blurListener(previousContent,event){const text=event.target.textContent;this._editingCommitted(text,previousContent);}
  16. this._prompt=new Accessibility.ARIAAttributesPane.ARIAAttributePrompt(Accessibility.ariaMetadata().valuesForProperty(this._nameElement.textContent),this);this._prompt.setAutocompletionTimeout(0);const proxyElement=this._prompt.attachAndStartEditing(valueElement,blurListener.bind(this,previousContent));proxyElement.addEventListener('keydown',this._editingValueKeyDown.bind(this,previousContent),false);valueElement.getComponentSelection().selectAllChildren(valueElement);}
  17. _removePrompt(){if(!this._prompt){return;}
  18. this._prompt.detach();delete this._prompt;}
  19. _editingCommitted(userInput,previousContent){this._removePrompt();if(userInput!==previousContent){this._parentPane.node().setAttributeValue(this._attribute.name,userInput);}}
  20. _editingCancelled(){this._removePrompt();this._populateListItem();}
  21. _editingValueKeyDown(previousContent,event){if(event.handled){return;}
  22. if(isEnterKey(event)){this._editingCommitted(event.target.textContent,previousContent);event.consume();return;}
  23. if(isEscKey(event)){this._editingCancelled();event.consume();return;}}}
  24. export class ARIAAttributePrompt extends UI.TextPrompt{constructor(ariaCompletions,treeElement){super();this.initialize(this._buildPropertyCompletions.bind(this));this._ariaCompletions=ariaCompletions;this._treeElement=treeElement;}
  25. _buildPropertyCompletions(expression,prefix,force){prefix=prefix.toLowerCase();if(!prefix&&!force&&(this._isEditingName||expression)){return Promise.resolve([]);}
  26. return Promise.resolve(this._ariaCompletions.filter(value=>value.startsWith(prefix)).map(c=>({text:c})));}}
  27. const _attributes=['role','aria-busy','aria-checked','aria-disabled','aria-expanded','aria-grabbed','aria-hidden','aria-invalid','aria-pressed','aria-selected','aria-activedescendant','aria-atomic','aria-autocomplete','aria-controls','aria-describedby','aria-dropeffect','aria-flowto','aria-haspopup','aria-label','aria-labelledby','aria-level','aria-live','aria-multiline','aria-multiselectable','aria-orientation','aria-owns','aria-posinset','aria-readonly','aria-relevant','aria-required','aria-setsize','aria-sort','aria-valuemax','aria-valuemin','aria-valuenow','aria-valuetext',];self.Accessibility=self.Accessibility||{};Accessibility=Accessibility||{};Accessibility.ARIAAttributesPane=ARIAAttributesPane;Accessibility.ARIAAttributesTreeElement=ARIAAttributesTreeElement;Accessibility.ARIAAttributesPane.ARIAAttributePrompt=ARIAAttributePrompt;Accessibility.ARIAAttributesPane._attributes=_attributes;