accessibleprimevue
Version:
Note: This is the forked version of the Primefaces/PrimeVue repository. Since V3 has reached its EOL this is use to fix identified accessibility bugs in the v3 version of primevue. PrimeVue is an open source UI library for Vue featuring a rich set of 80+
2 lines (1 loc) • 4.79 kB
JavaScript
this.primevue=this.primevue||{},this.primevue.panel=function(e,t,o,r,n,l,i){"use strict";function a(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var c=a(e),s=a(t),p=a(o),d={name:"Panel",extends:{name:"BasePanel",extends:a(n).default,props:{header:String,toggleable:Boolean,collapsed:Boolean,toggleButtonProps:{type:null,default:null}},style:a(l).default,provide:function(){return{$parentInstance:this}}},inheritAttrs:!1,emits:["update:collapsed","toggle"],data:function(){return{id:this.$attrs.id,d_collapsed:this.collapsed}},watch:{"$attrs.id":function(e){this.id=e||r.UniqueComponentId()},collapsed:function(e){this.d_collapsed=e}},mounted:function(){this.id=this.id||r.UniqueComponentId()},methods:{toggle:function(e){this.d_collapsed=!this.d_collapsed,this.$emit("update:collapsed",this.d_collapsed),this.$emit("toggle",{originalEvent:e,value:this.d_collapsed})},onKeyDown:function(e){"Enter"!==e.code&&"NumpadEnter"!==e.code&&"Space"!==e.code||(this.toggle(e),e.preventDefault())}},computed:{buttonAriaLabel:function(){return this.toggleButtonProps&&this.toggleButtonProps.ariaLabel?this.toggleButtonProps.ariaLabel:this.header}},components:{PlusIcon:s.default,MinusIcon:c.default},directives:{ripple:p.default}};function u(e){return u="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e},u(e)}function m(e,t){var o=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),o.push.apply(o,r)}return o}function g(e){for(var t=1;t<arguments.length;t++){var o=null!=arguments[t]?arguments[t]:{};t%2?m(Object(o),!0).forEach((function(t){f(e,t,o[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(o)):m(Object(o)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(o,t))}))}return e}function f(e,t,o){var r;return(t="symbol"==u(r=b(t,"string"))?r:String(r))in e?Object.defineProperty(e,t,{value:o,enumerable:!0,configurable:!0,writable:!0}):e[t]=o,e}function b(e,t){if("object"!=u(e)||!e)return e;var o=e[Symbol.toPrimitive];if(void 0!==o){var r=o.call(e,t||"default");if("object"!=u(r))return r;throw new TypeError("@@toPrimitive must return a primitive value.")}return("string"===t?String:Number)(e)}var y=["id"],h=["id","aria-label","aria-controls","aria-expanded"],v=["id","aria-labelledby"];return d.render=function(e,t,o,r,n,l){var a=i.resolveDirective("ripple");return i.openBlock(),i.createElementBlock("div",i.mergeProps({class:e.cx("root")},e.ptmi("root")),[i.createElementVNode("div",i.mergeProps({class:e.cx("header")},e.ptm("header")),[i.renderSlot(e.$slots,"header",{id:n.id+"_header",class:i.normalizeClass(e.cx("title"))},(function(){return[e.header?(i.openBlock(),i.createElementBlock("span",i.mergeProps({key:0,id:n.id+"_header",class:e.cx("title")},e.ptm("title")),i.toDisplayString(e.header),17,y)):i.createCommentVNode("",!0)]})),i.createElementVNode("div",i.mergeProps({class:e.cx("icons")},e.ptm("icons")),[i.renderSlot(e.$slots,"icons"),e.toggleable?i.withDirectives((i.openBlock(),i.createElementBlock("button",i.mergeProps({key:0,id:n.id+"_header",type:"button",role:"button",class:e.cx("toggler"),"aria-label":l.buttonAriaLabel,"aria-controls":n.id+"_content","aria-expanded":!n.d_collapsed,onClick:t[0]||(t[0]=function(){return l.toggle&&l.toggle.apply(l,arguments)}),onKeydown:t[1]||(t[1]=function(){return l.onKeyDown&&l.onKeyDown.apply(l,arguments)})},g(g({},e.toggleButtonProps),e.ptm("toggler"))),[i.renderSlot(e.$slots,"togglericon",{collapsed:n.d_collapsed},(function(){return[(i.openBlock(),i.createBlock(i.resolveDynamicComponent(n.d_collapsed?"PlusIcon":"MinusIcon"),i.normalizeProps(i.guardReactiveProps(e.ptm("togglericon"))),null,16))]}))],16,h)),[[a]]):i.createCommentVNode("",!0)],16)],16),i.createVNode(i.Transition,i.mergeProps({name:"p-toggleable-content"},e.ptm("transition")),{default:i.withCtx((function(){return[i.withDirectives(i.createElementVNode("div",i.mergeProps({id:n.id+"_content",class:e.cx("toggleablecontent"),role:"region","aria-labelledby":n.id+"_header"},e.ptm("toggleablecontent")),[i.createElementVNode("div",i.mergeProps({class:e.cx("content")},e.ptm("content")),[i.renderSlot(e.$slots,"default")],16),e.$slots.footer?(i.openBlock(),i.createElementBlock("div",i.mergeProps({key:0,class:e.cx("footer")},e.ptm("footer")),[i.renderSlot(e.$slots,"footer")],16)):i.createCommentVNode("",!0)],16,v),[[i.vShow,!n.d_collapsed]])]})),_:3},16)],16)},d}(primevue.icons.minus,primevue.icons.plus,primevue.ripple,primevue.utils,primevue.basecomponent,primevue.panel.style,Vue);